通過AJAX提交的表單不起作用

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

要停止Default操作，請使用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);
            }
        });
    });
});