How to submit checkbox through jquery ajax?

Question

I have difficulty submitting this form:

<form action="/someurl" method="post">
    <input type="hidden" name="token" value="7mLw36HxPTlt4gapxLUKWOpe1GsqA0I5"> 
    <input type="checkbox" class="mychoice" name="name" value="apple"> Apple
    <input type="checkbox" class="mychoice" name="name" value="orange"> Orange      
    <input type="checkbox" class="mychoice" name="name" value="pear"> Pear
  </form>

And the jquery bit:

$('.mychoice').click( function() {
    $.ajax({
        url: '/someurl',
        type: 'post',
        dataType: 'json',
        success: function(data) {
                 //  ... do something with the data...
                 }
    });
});

But nothing happens when I click a checkbox. How can I fix this?

UPDATE: It may worth mentioning that the form is located at a bootstrap modal.

Are you sure that your elements are in the DOM when your code runs? Can you post a snippet example? — Alejandro C., Nov 17 '16 at 19:48
you need to include the data attribute in your ajax syntax. Also, I don't see where your attempting to get the actual value of the check box. I think this will help you. http://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery — Neo, Nov 17 '16 at 19:50

score 5 · Accepted Answer · edited May 23 '17 at 12:02

5

You're missing the data property.

See: JQuery $.ajax() post - data in a java servlet for an example.

If you want to send the contents of the form, then you would use Form.serialize(), but you could put whatever data you want into the property.

$(document).ready(function() {
  $('.mychoice').click(function() {
    var formData = $('#myForm').serialize();
    console.log('Posting the following: ', formData);
    
    $.ajax({
      url: '/someurl',
      data: formData,
      type: 'post',
      dataType: 'json',
      success: function(data) {
        //  ... do something with the data...
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/someurl" method="post" id="myForm">
  <input type="hidden" name="token" value="7mLw36HxPTlt4gapxLUKWOpe1GsqA0I5">
  <input type="checkbox" class="mychoice" name="name" value="apple">Apple
  <input type="checkbox" class="mychoice" name="name" value="orange">Orange
  <input type="checkbox" class="mychoice" name="name" value="pear">Pear
</form>

edited May 23 '17 at 12:02

Community

1
1

answered Nov 17 '16 at 19:46

Dan Wilson

3,937
2
17
27

data is only required for sending post requests, else any data can be added to the url itself. – I wrestled a bear once. Nov 17 '16 at 19:47
What does `type: 'post'` mean? Is it something different to you? – Dan Wilson Nov 17 '16 at 19:48
2

i didn't downvote you so keep your pants on. even still you didnt explain how to serialize the form or populate the data so it's still only half an answer. – I wrestled a bear once. Nov 17 '16 at 19:50
1

I didn't explain how to serialize the form or populate the data because Karlom didn't specify what data that endpoint should receive. And my pants are still on, but only because I'm at work. :) – Dan Wilson Nov 17 '16 at 19:52
Well, I added `data: $('#myForm').serialize(),` but still does not work. Could it be because the form is on a bootstrap modal? – Karlom Nov 17 '16 at 19:58
Did you add `id="myForm"` to the form element? A Boostrap modal should still be accessible in the DOM. – Dan Wilson Nov 17 '16 at 19:59
Yes I did add `id="myForm"` to the form. – Karlom Nov 17 '16 at 20:02
Hmm, sorry about that. Is the dialog content in a different frame? – Dan Wilson Nov 17 '16 at 20:04
No, I don't use frames. I just have the form on a bootstrap modal. – Karlom Nov 17 '16 at 20:10

score 0 · Answer 2 · answered Nov 17 '16 at 19:49

0

Try this:

$(document).ready(function(){
    $('.mychoice').change( function() {
        $.ajax({
            url: '/someurl',
            type: 'post',
            dataType: 'json',
            success: function(data) {
                //  ... do something with the data...
            }
        });
    });
});

answered Nov 17 '16 at 19:49

James McDowell

2,668
1
14
27

@Mister Positive In what way does it not answer the question. He asked what he can do; I said try this. That sounds like an answer to me, but then again, I've only spoken English my whole life. – James McDowell Nov 21 '16 at 12:25

Swatantra Kumar · Answer 3 · 2016-11-17T20:00:34.803

0

supply missing data

$(document).ready(function() {
  $('.mychoice').click(function() {
    $.ajax({
      url: '/someurl',
      data: $(this).closest('form').serialize(),
      type: 'post',
      dataType: 'json',
      success: function(data) {
        //  ... do something with the data...
      }
    });
  });
});

edited Nov 17 '16 at 20:00

answered Nov 17 '16 at 19:50

Swatantra Kumar

1,324
5
24
32

score 0 · Answer 4 · answered Mar 08 '22 at 11:21

if you are trying to receive the data with the csrf token do as below :

var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())

will return

['field_name=9&field_name=15&field_name=10']

you will then have to parse the info in your view ( django )

score -1 · Answer 5 · answered Nov 17 '16 at 19:53

-1

Try 'change' instead of 'click', like this:

$('.mychoice').change(function(){...})

answered Nov 17 '16 at 19:53

evilReiko

19,501
24
86
102

I did, but has no effect. I even added a `alert("clicked")` inside the jquery function, but it is not triggered when I tick a checkbox. – Karlom Nov 17 '16 at 19:55
@Karlom in Chrome right-click then select "inspect element", you probably have javascript error which causes javascript to stop, OR, jquery is not included correctly – evilReiko Nov 17 '16 at 19:58

How to submit checkbox through jquery ajax?

5 Answers5