javascript - send button value to Jquery AJAX with onclick() - Stack Overflow

admin管理员组

文章数量:1326287

is it possible to send a value from button to Jquery AJAX with onclick function ? I have tried something like this code, but not working. There is nothing on console log.

html

<button type="button" class="hapus_krs" onclick="hapus_krs(this.value)" value="1">x</button> 
<button type="button" class="hapus_krs" onclick="hapus_krs(this.value)" value="2">x</button>
<button type="button" class="hapus_krs" onclick="hapus_krs(this.value)" value="n">x</button> 

script

function hapus_krs() {
    var formData = {
        'id_mhs': $(this).val()
    };
    $.ajax({
            type: 'POST',
            url: '<?=base_url()?>akademik/hapus_krs',
            data: formData,
            dataType: 'json',
            encode: true
        })
        .done(function(data) {
            console.log(data);
        })
};

is it possible to send a value from button to Jquery AJAX with onclick function ? I have tried something like this code, but not working. There is nothing on console log.

html

<button type="button" class="hapus_krs" onclick="hapus_krs(this.value)" value="1">x</button> 
<button type="button" class="hapus_krs" onclick="hapus_krs(this.value)" value="2">x</button>
<button type="button" class="hapus_krs" onclick="hapus_krs(this.value)" value="n">x</button> 

script

function hapus_krs() {
    var formData = {
        'id_mhs': $(this).val()
    };
    $.ajax({
            type: 'POST',
            url: '<?=base_url()?>akademik/hapus_krs',
            data: formData,
            dataType: 'json',
            encode: true
        })
        .done(function(data) {
            console.log(data);
        })
};

• javascript
• jquery
• html
• ajax

Share Improve this question Follow asked Jul 20, 2017 at 3:46 Billy AdelphiaBilly Adelphia 1,02744 gold badges1919 silver badges3434 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

When you invoke the function with onclick="hapus_krs(this.value)", you are already passing the button value to the function as parameter:

function hapus_krs(value) {
    var formData = {
        'id_mhs': value
    };
}

Unobtrusive JS version:

<button type="button" class="hapus_krs" value="1">x</button> 
<button type="button" class="hapus_krs" value="2">x</button>
<button type="button" class="hapus_krs" value="n">x</button>

$('button.hapus_krs').click(function() {
    var formData = {
        'id_mhs': this.value // $(this).val() also works but it's unnecessary to invoke another jQuery call
    };
});

Here you go with the solution https://jsfiddle/60qu6mev/

$('.hapus_krs').click(function(){
var formData = {
  'id_mhs': $(this).attr('value')
};
console.log(formData);
$.ajax({
      type: 'POST',
      url: '<?=base_url()?>akademik/hapus_krs',
      data: formData,
      dataType: 'json',
      encode: true
  })
  .done(function(data) {
      console.log(data);
  })
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="hapus_krs"  value="1">x</button> 
<button type="button" class="hapus_krs" value="2">x</button>
<button type="button" class="hapus_krs" value="n">x</button>

I have removed the onclick from HTML, rather used a jQuery click event to handle ajax call & retrieve value from button

You have to be careful when playing with this. In your code, this might not refer the the button that has been clicked.

In addition, you are passing a this.value as a parameter and yet you are not using it. So your function should look like the following:

function hapus_krs(value) {
    var formData = {
        'id_mhs': value
    };
    $.ajax({
        type: 'POST',
        url: '<?=base_url()?>akademik/hapus_krs',
        data: formData,
        dataType: 'json',
        encode: true
    })
    .done(function(data) {
        console.log(data);
    })
};

本文标签： javascriptsend button value to Jquery AJAX with onclick()Stack Overflow