通过AJAX提交的表单不起作用

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

我的表单不会通过AJAX提交,以显示PHP页面'myscript.php'的返回。

This is the HTML I'm using:

这是我正在使用的HTML:

<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:

这是页面前面的javascript:

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:

这是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!

此时提交按钮不会响应或尝试访问“myscript.php”文件。感谢帮助。提前致谢!

4 个解决方案

#1

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

在这种情况下,最好使用.closest()而不是.parents()。因为父选择器获取与选择器匹配的所有祖先。

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

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

要停止Default操作,请使用e.preventDefault而不是return false

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

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

#2

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

在你的HTML代码中,我认为你应该改变input type = button来输入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.

然后当您单击该按钮时,表单将提交到您的php页面。

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.

另外,关于jQuery代码中的select change事件,我认为你可以尝试使用跟随选择器,因为你的HTML中有name / id属性。

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

#3

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.

您的代码的一个问题是它实际上并没有阻止提交表单。返回虚假;并不像你认为的那样在jQuery中完全正常工作。相反,要停止默认操作,您必须执行此类操作。

$('#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?

最重要的是,如果您不希望表单提交,并且您想用自己的AJAX子目录替换它,为什么要在此代码中调用表单提交?为什么不直接将AJAX放入您的更改代码?

#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.

dqhendricks是对的 - 为什么在你可以直接访问ajax时使用表单提交?在下面的示例中,我在表单下方添加了一个div(#responder)来显示输出。试试吧 - 你会发现它完美无缺。

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.

你真的不需要按钮,虽然我把它留在那里,因为数据是在下拉变化时发送/接收的。您将看到您的消息显示在表单下方的div中。

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

#1