AJAX/JQuery: Submit form and call function without refreshing page

Question

I'm attempting to use ajax/jquery to submit a form comprised of dropdown menus, with the intention of displaying information from a MySQL database based on the form input. Without ajax/jquery, the page functions properly. However, I don't want the page to refresh once the form is submitted, so that the selected dropdown options remain showing. My ajax/jquery is not very good, and I know this is where I'm having trouble. my code is as follows:

<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(){
    $.ajax({
        type: "POST",
        data: $(this).serialize(), 
        cache: false,
        success: displayResults
    });
  });
});

</script>

the function displayResults is the function that I want to call when the form is submitted, but as of right now, when i click submit, the form refreshes and no results are displayed. Any help would be greatly appreciated. Thanks in advance.

Ok. But is my syntax, etc corrrect? When I click submit, the function displayResults doesn't get called. — cdrive
– cdrive, Commented Jan 19, 2015 at 16:37
It isn't correct. You need to add the property url:$(this).attr('action') for it to work as you want. — Ismael Miguel
– Ismael Miguel, Commented Jan 19, 2015 at 16:46
As a side note, you can use var $this=$(this); as the first line in your function. It will increase performance by reducing the number of times you call the jQuery library. — Ismael Miguel
– Ismael Miguel, Commented Jan 19, 2015 at 16:56

Royalty · Accepted Answer · 2015-01-19 16:37:35Z

2

<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        data: $(this).serialize(), 
        cache: false,
        success: displayResults
    });
  });
});

</script>

This prevents the form from submitting by preventing the event from firing. In vanilla javascript you could return false on submit and it would be the same.

answered Jan 19, 2015 at 16:37

Royalty

3922 silver badges10 bronze badges

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

1 Comment

Ismael Miguel Over a year ago

Notice that sometimes the browser might not like that you use e.preventDefault();. In those cases, having return false; may help. Also, this is used to prevent propagation of the event in both fases (even though jQuery only handles the events on bubbling fase.)

A l w a y s S u n n y · Accepted Answer · 2015-01-19 16:39:22Z

Try this way to submit your form and prevent default behavior of form submit using e.preventdefualt() which will prevent event from firing,To serialize form data use serializeArray() ,use success and error to debug ajax call.

$("#ajaxform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            console.log(data); //display data Results 
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            console.log(errorThrown); // dispaly error
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind(); //unbind. to stop multiple form submit.
});

$("#ajaxform").submit(); //Submit  the FORM

iubema · Accepted Answer · 2015-01-19 16:48:27Z

0

The .submit() it will be the same as use the submit button. You have to use a button with the click event.

<script>
$(document).ready(funtion(){
    var data1 = $('#field1').val();
    // the same with all the values
   $('#button').click(function(){
      $.ajax({
        type: "POST",
        data: ({dat1: data1} ),
        cache: false,
        success: function(data) {
         displayResults(); 
        }
      });
   });

});

</script>

answered Jan 19, 2015 at 16:48

iubema

3492 silver badges12 bronze badges

Collectives™ on Stack Overflow

AJAX/JQuery: Submit form and call function without refreshing page

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related