CODEWITHSUNDEEP
jqueryajax
sdot257
sdot257

Reputation: 10376

Submit form on dropdown change using Ajax

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>

Upvotes: 3

Views: 11416

Answers (3)

Jai
Jai

Reputation: 74748

You have to do it this way:

What this is doing:

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

  3. 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
           }
       });
    });
});

Upvotes: 0

Ross
Ross

Reputation: 88

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>

Upvotes: 5

Musa
Musa

Reputation: 97727

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
           }
       });
    });
});

Upvotes: 6

Related Questions