Submit form on dropdown change using Ajax

Question

I have the following which calls another file and spits output based on the dropdown value. It works fine except I can't seem to get it to work correctly without a submit button. This works except it will redirect itself to process.php with the correct output. The whole point of this code is to display the output within the empty div (output).

$(document).ready(function() {
   $('#dropdown').change( function() {
       $('#myform').submit();
       $.ajax({ // create an AJAX call...
           data: $(this).serialize(), // get the form data
           type: $(this).attr('method'), // GET or POST
           url: $(this).attr('action'), // the file to call
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
       return false; // cancel original event to prevent form submitting
    });
});


<form id="myform" method=POST action="process.php">
<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>
</form>
<div id="output"></div>

Do you need to submit the form in the code above if you are using ajax to get the information from process.php? — Modika
– Modika, Commented Dec 19, 2012 at 17:40
A return false in the change event won't prevent the form from submitting, and you're submitting it everytime the select changes, reloading the page, so it won't really work at all ? — adeneo
– adeneo, Commented Dec 19, 2012 at 17:41
Good question, i grabbed it code from somewhere else. Basically I want to pull data from mysql and display it inside the output div. It works fine but, if there's a better way, I'm open to it. — sdot257
– sdot257, Commented Dec 19, 2012 at 17:45

Musa · Accepted Answer · 2012-12-19 17:42:01Z

6

If you want to use ajax then don't submit the form, also in the dropdown change event this is the dropdown element not the form.

$(document).ready(function() {
   $('#dropdown').change( function() {
       $.ajax({ // create an AJAX call...
           data: $('#myform').serialize(), // serialize the form
           type: $('#myform').attr('method'), // GET or POST from the form
           url: $('#myform').attr('action'), // the file to call from the form
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
    });
});

answered Dec 19, 2012 at 17:42

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

Ross · Accepted Answer · 2012-12-19 17:47:07Z

5

I think the JQuery load function can do what you are after in less code.

$(document).ready(function() {
   $('#dropdown').change( function() {

    $('#output').load('/process.php',{dropdown: $(this).val()});

    });
});


<select id="dropdown" name="dropdown">
    <option value="QU">QU</option>
    <option value="QF">QF</option>
    <option value="QC">QC</option>
</select>

answered Dec 19, 2012 at 17:47

Ross

889 bronze badges

2 Comments

sdot257 Over a year ago

Woah, this works and much less code. So is this any different from the code above?

Ross Over a year ago

First of all in your above code you never needed the form. Since we are using ajax. Apart from that load just combines the replace and the ajax call in one. It is less flexible but less code. If you need something special use ajax and do your own replace. If not use load it's quicker.

Jai · Accepted Answer · 2013-11-12 09:41:24Z

0

You have to do it this way:

What this is doing:

On change of dropdown
using ajax so we have to prevent the default behavior of form submission with prevDef()

Then your ajax call which submits the value and process it to process.php and the output response on process.php gets loaded in the #output div

$(document).ready(function() {
  $('#dropdown').change( function() {
       $.ajax({ // create an AJAX call...
           data: $(this).serialize(), // get the form data
           type: $(this).attr('method'), // GET or POST
           url: $(this).attr('action'), // the file to call
           success: function(response) { // on success..
               $('#output').html(response); // update the DIV
           }
       });
    });
});

edited Nov 12, 2013 at 9:41

answered Dec 19, 2012 at 17:44

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Submit form on dropdown change using Ajax

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related