通過AJAX表單提交不起作用

我的表單不會通過AJAX提交來顯示PHP頁面'myscript.php'的返回。通過AJAX表單提交不起作用

這是我使用的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'文件。幫助表示讚賞。提前致謝！

來源

2012-10-30 Mauricio

它看起來像你有錯誤類型的按鈕：http://stackoverflow.com/questions/290215/difference- between-input-type-button-and-input-type-submit – Brandon

你並不需要按鈕 - 請參閱下面的答案。 – gibberish

您的代碼的一個問題是，它實際上並未停止提交表單。 return false;在你認爲它的方式中並不完全適用於jQuery。相反，要停止默認操作，您必須執行此類操作。

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

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

最重要的是，如果你不希望表單提交的發生，並希望用自己的AJAX submition來取代它，你爲什麼打電話的形式提交所有在這個代碼中？爲什麼不直接將AJAX直接放入更改代碼？

來源

2012-10-30 15:32:33 dqhendricks

您正在描述'parent（）'函數的行爲。「父母（）」一路走來。 – daveyfaherty

你能解釋一下你的意思是「調用表單提交」嗎？我只想選擇結果，並將它們帶到下一頁，但它不提交。 – Mauricio

啊感謝@puppybeard - 編輯。 – dqhendricks

在這種情況下，最好使用.closest()而不是.parents()。由於父母選擇器獲取所有匹配選擇器的祖先。

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

並停止默認操作使用e.preventDefault代替return false

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

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

來源

2012-10-30 15:40:37

在你的HTML代碼，我想你應該改變input type=button到input type=submit

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

然後當你點擊按鈕，表單將被提交到你的php頁面。另外，關於你的jQuery代碼中的選擇更改事件，我認爲你可以嘗試跟隨選擇器，因爲你的HTML中有可用的名稱/ id屬性。

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

來源

2012-10-30 15:49:14 woodykiddy

dqhendricks是正確的 - 爲什麼使用表格提交時，你可以訪問AJAX直接？在下面的例子中，我在窗體下面添加了一個div（#responder）來顯示輸出。嘗試一下 - 你會發現它的功能完美。

您確實不需要該按鈕，儘管我將它留在那裏，因爲在更改下拉列表時發送/接收數據。你會看到你的消息出現在表格下方的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>

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

來源

2012-10-30 16:01:24 gibberish

通過AJAX表單提交不起作用

回答

相關問題