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.
– Alejandro C., Commented Nov 17, 2016 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. stackoverflow.com/questions/2834350/… — Neo
– Neo, Commented Nov 17, 2016 at 19:50

Community · Accepted Answer · 2017-05-23 12:02:45Z

6

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, 2017 at 12:02

CommunityBot

11 silver badge

answered Nov 17, 2016 at 19:46

Dan Wilson

4,0472 gold badges19 silver badges29 bronze badges

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

9 Comments

I wrestled a bear once. Over a year ago

data is only required for sending post requests, else any data can be added to the url itself.

Dan Wilson Over a year ago

What does type: 'post' mean? Is it something different to you?

I wrestled a bear once. Over a year ago

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.

Dan Wilson Over a year ago

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. :)

Karlom Over a year ago

Well, I added data: $('#myForm').serialize(), but still does not work. Could it be because the form is on a bootstrap modal?

|

James McDowell · Accepted Answer · 2016-11-17 19:49:57Z

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, 2016 at 19:49

James McDowell

2,7782 gold badges16 silver badges30 bronze badges

1 Comment

James McDowell Over a year ago

@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.

Swatantra Kumar · Accepted Answer · 2016-11-17 20:00:34Z

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, 2016 at 20:00

answered Nov 17, 2016 at 19:50

Swatantra Kumar

1,3286 gold badges25 silver badges33 bronze badges

Comments

Drayen Dörff · Accepted Answer · 2022-03-08 11:21:53Z

0

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 )

answered Mar 8, 2022 at 11:21

Drayen Dörff

1037 bronze badges

Comments

evilReiko · Accepted Answer · 2016-11-17 19:53:52Z

-1

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

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

answered Nov 17, 2016 at 19:53

evilReiko

20.6k24 gold badges93 silver badges109 bronze badges

2 Comments

Karlom Over a year ago

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.

evilReiko Over a year ago

@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

Collectives™ on Stack Overflow

How to submit checkbox through jquery ajax?

5 Answers 5

9 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related