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!

It looks like you have the wrong type of button: http://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit — Brandon, Oct 30 '12 at 15:34

dqhendricks · Answer 1 · 2012-10-30T16:27:33.640

0

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?

edited Oct 30 '12 at 16:27

answered Oct 30 '12 at 15:32

dqhendricks

19,030
11
50
83

You're describing the behaviour of the `parent()` function. `parents()` goes all the way up. – daveyfaherty Oct 30 '12 at 15:41
Can you explain what you meant by "calling form submit"? I just want to take the result selected, and take them to the next page, but it's not submitting. – Mauricio Oct 30 '12 at 15:53
@Mauricio Eh calling form submit means your submitting the form using code, which has the same effect as hitting a submit button on a form. The line `$(this).parents("form").submit();` does this. If that's all you want to do, then I don't understand why you are using AJAX at all, which you seem to have added to the form submit event. You could cut this down to five lines of code if you get rid of that whole section. – dqhendricks Oct 30 '12 at 16:31

score 0 · Answer 2 · answered Oct 30 '12 at 15:40

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

score 0 · Answer 3 · answered Oct 30 '12 at 15:49

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

cssyphus · Answer 4 · 2012-10-30T17:19:49.923

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

Form submit through AJAX not working

4 Answers4