Question

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

这是我正在使用的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>

以下是页面前面的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;   
   });
});

这是myscript.php：

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

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

Answer 1

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

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

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

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

Answer 2

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

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

要停止默认操作，请使用e.preventDefault代替return false

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

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

Answer 3

在您的HTML代码中，我认为您应该将input type=button更改为input type=submit

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

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

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

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

Answer 4

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

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

修改后的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>

修改过的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);
            }
        });
    });
});

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

4 个答案: