最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin4浏览0评论

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);
        })
};
Share Improve this question asked Jul 20, 2017 at 3:46 Billy AdelphiaBilly Adelphia 1,0274 gold badges19 silver badges34 bronze badges
Add a ment  | 

3 Answers 3

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);
    })
};
发布评论

评论列表(0)

  1. 暂无评论