send button value to Jquery AJAX with onclick()

Question

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);
        })
};

Chris Lam · Accepted Answer · 2017-07-20 03:56:48Z

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
    };
});

edited Jul 20, 2017 at 3:56

answered Jul 20, 2017 at 3:48

Chris Lam

3,63417 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Billy Adelphia Over a year ago

thanks a lot, the first answer it's work. I am going to try the Unobtrusive JS version see if it's better.

Shiladitya · Accepted Answer · 2017-07-20 03:53:30Z

2

Here you go with the solution https://jsfiddle.net/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.com/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

answered Jul 20, 2017 at 3:53

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

2 Comments

Billy Adelphia Over a year ago

what is the disadvantage of using onclick() function on HTML ?

Shiladitya Over a year ago

@BillyOrigin There is no disadvantage... I just made it so that JS code will be in JS file & HTML will be free..

Mμ. · Accepted Answer · 2017-07-20 03:54:25Z

1

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);
    })
};

answered Jul 20, 2017 at 3:54

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Collectives™ on Stack Overflow

send button value to Jquery AJAX with onclick()

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related