2

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.

Improve this question
4
  • When are you running the jquery code? Commented Nov 17, 2016 at 19:46
  • It is supposed to run on a bootstrap modal. Commented Nov 17, 2016 at 19:47
  • Are you sure that your elements are in the DOM when your code runs? Can you post a snippet example? 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/… Commented Nov 17, 2016 at 19:50

5 Answers 5

Reset to default
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>

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

9 Comments

data is only required for sending post requests, else any data can be added to the url itself.
What does type: 'post' mean? Is it something different to you?
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 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. :)
Well, I added data: $('#myForm').serialize(), but still does not work. Could it be because the form is on a bootstrap modal?
|
0

Try this:

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

1 Comment

@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.
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... } }); }); });
Improve this answer

Comments

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 )

Improve this answer

Comments

-1

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

$('.mychoice').change(function(){...})
Improve this answer

2 Comments

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 in Chrome right-click then select "inspect element", you probably have javascript error which causes javascript to stop, OR, jquery is not included correctly

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.