How do i submit form data using jquery-ajax?

Question

I'm not sure why I'm not getting it. Either way this is frustrating me beyond belief. I've looked through 2 jquery books, web tutorials, and stack overflow posts and i still dont understand.

I am trying to build a search filter bar where a user can select filters and upon clicking "refine result" it modifies the query output.

How do I submit the value of whichever form radio box the user selects using jquery/ajax to a php page which will display results dependent upon the input, without page refresh.

Form-->
user selects radio button value and clicks submit-->
form data gets sent via jquery/ajax to the .php page whose output is to be displayed in without page refresh-->
.php file processes the user input and creates output based on it

I've honestly looked through alot of different answers but all of them assume that the reader has a greater basic knowledge of javascript/jquery than I do.

Like, do I have to put the jQuery/ajax in a function that runs "onclick" of my submit button? Or do I just add a .click event handler for my button id?

Can someone explain it all to me assuming I'm a complete jQuery/ajax noob?

Have a look at jQuery ajax: api.jquery.com/jQuery.ajax/ and event bindings on the same site. They are showing basic examples. Reading the doc and beginner books can't be made any more basic as far as I know. If you have difficulties understanding JavaScript in general you have to look at some books or on-line resources on that too. — Nope
– Nope, Commented Oct 3, 2012 at 20:05
I have basic experience in terms of basic syntax, making/calling functions, referencing parts of the DOM etc. which i was hoping would be enough... but maybe a weak foundation in js is making jquery/ajax comprehension untenable at this point — user1299028
– user1299028, Commented Oct 3, 2012 at 20:17
Thank you Francois, i guess i'll just have to be more patient. Sometimes it's hard :) — user1299028
– user1299028, Commented Oct 3, 2012 at 20:18

Fabien Quatravaux · Accepted Answer · 2012-10-03 20:22:41Z

2

You just have to attach your ajax call to the "submit" event that comes from the form when the submit button is clicked :

$('form').submit(function(e){
    e.preventDefault();
    $('.content').load(this.action+" .content", $(this).serialize(), function(){
        // code to execute after result display if needed
    });
    return false;
});

I assumed your results are displayed in an element that has the "content" class.

$('form') selects your form, you can personalize it
.submit attach an event handler to the form "submit event
e.preventDefault() and return false prevents the form to be actually submitted
$('.content').load will fill the element with "content" class with the ajax call results
this.action is the URL to submit the form to
" +.content" is here to extract only the result part from the response, instead of the entire html page
$(this).serialize() passes the form fields data to the ajax request
finally the last anonymous function is called after the results are displayed and can be used to trigger some visual effect indicating that the results were updated

edited Oct 3, 2012 at 20:22

answered Oct 3, 2012 at 20:16

Fabien Quatravaux

3,7963 gold badges30 silver badges36 bronze badges

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

1 Comment

user1299028 Over a year ago

That's exactly what i needed. Everything is clearer now, thank you! :)

Collectives™ on Stack Overflow

How do i submit form data using jquery-ajax?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related