Form submit through AJAX not working

Question

My form will not submit through AJAX to show the return of the PHP page, 'myscript.php'.

This is the HTML I'm using:

<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">

<ul>

    <li>
    <label>Destination:</label>
    <select name="city" id="city">
        <option class="level-0" value="atlanta">Atlanta</option>
        <option class="level-0" value="miami">Miami</option>

    </select>
    </li>

</ul>

<input class="srch_btn" type="button" value="{{submit-text}}" />

</form>

Here is the javascript earlier in the page:

jQuery(document).ready(function($) {
   $('#city').change(function() {
  $(this).parents("form").submit();
   });
$('#myform').submit(function() { 
  $.post(
     'myscript.php',
     $(this).serialize(),
     function(data){
        $("#mydiv").html(data)
     }
  );
  return false;   
   });
});

Here is the myscript.php:

<?php
   if ($_POST['city'] == "atlanta") {
  echo "Div contents 1";
   }
   if ($_POST['city'] == "miami") {
  echo "Div contents 2";
   }
?>

The submit button won't respond at this point or make an attempt to access the 'myscript.php' file. Help is appreciated. Thanks in advance!

Answer 1

One issue with your code is that it does not actually stop the form from being submitted. return false; does not exactly work in jQuery in the way that you think it does. Instead, to stop the default action, you would have to do something like this.

$('#myform').submit(function(event) {
   event.preventDefault();

http://api.jquery.com/event.preventDefault/

On top of that, if you don't want the form submit to take place, and you want to replace it with your own AJAX submition, why are you calling form submit at all in this code? Why not just put the AJAX directly into your change code?

Answer 2

It is better to use .closest() rather than .parents() in this case.. As parents selector gets all the ancestors that match the selector.

$('#city').change(function() {
  $(this).closest("form").submit();
});

And to stop the Default action use e.preventDefault instead of return false

$('#myform').submit(function(e) { 

     e.preventDefault();
     // Your code here
});

Answer 3

In you HTML code, I think you should change input type=button to input type=submit

<input class="srch_btn" type="submit" value="{{submit-text}}" />

Then when you click that button, the form will be submitted to your php page.

Also, about select change event in your jQuery code, I think you can just try following selector, as you have the name/id attribute available in your HTML.

$('#city').change(function() {
  $('#myform').submit();
});

Answer 4

dqhendricks was right - why use form submit when you can just access ajax directly? In the below example, I added a div (#responder) below the form to show the output. Try it -- you'll see that it works perfectly.

You really don't need the button, although I left it there, because the data is sent/received the moment the drop-down is changed. You will see your messages appear in the div I included below the form.

REVISED HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="myform" method="post" action="#" enctype="multipart/form-data" accept-charset="utf-8" class="taxonomy-drilldown-dropdowns">
    <ul>
        <li>
            <label>Destination:</label>
            <select name="city" id="city">
                <option class="level-0" value="atlanta">Atlanta</option>
                <option class="level-0" value="miami">Miami</option>
            </select>
        </li>
    </ul>
    <input class="srch_btn" type="button" value="Go" />
</form>

<div id="responder"></div>  

REVISED JAVASCRIPT/JQUERY:

$(document).ready(function() {

    $('#city').change(function() {
        //var cty = $('#city').val();
        $.ajax({
            type: "POST",
            url: "myscript.php",
            data: "city=" + $(this).val(),
            success:function(data){
                $('#responder').html(data);
            }
        });
    });
});