通過表單提交通過ajax jQuery保存數據表單提交

我有一個表單，我想通過ajax jQuery post保存數據。如果保存按鈕是type="submit"，它不會做任何這只是空警戒......我想保存數據，並保持相同的形式刷新域上...通過表單提交通過ajax jQuery保存數據表單提交

這是我曾嘗試：

$("#saveNewContact").click(function() { 
    var name  = $("#name").val(); 
    var last_name = $("#last_name").val(); 
    $.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name}, 
    success: function(msg){ 
    alert(msg); 
    }); 
});

，這裏是我的形式

<form id="myForm" action="#" method="post"> 
<table id="table_1" class="form_table" align="center" cellpadding="0" cellspacing="0"> 
<tbody> 
    <tr><td> 
    <input name="name" id="name" value="" tabindex="5" readonly="" type="text"> 
    <input name="name" id="name" value="" tabindex="5" readonly="" type="text"> 
    <button type="submit" id="update" style="display:none;" 
    class="save_button saveHEX" name="Update" 
    value="Update Listing">Save Lead</button></td> 
    </tr> 
</table> 
</form>

來源

2013-03-09 Methew

你爲什麼不把輸入類型設置爲'button'？ – 2013-03-09 06:44:24

我想在此之後清除表單，空文本字段 – Methew 2013-03-09 06:45:17

您可以另一種方式清除它。 '（'＃myForm'）。find（'input'）。val（''）;'在你的成功函數中執行它。 – 2013-03-09 06:46:41

做這種方式

HTML

<form name="frm" method="POST" action=""> 
<input type="text" name="name" id="name" value="" /> 
<input type="text" name="last_name" id="last_name" value="" /> 
<input type="submit" name="Update" id="update" value="Update" /> 
</form>

你的jQuery

$("#update").click(function(e) { 
    e.preventDefault(); 
    var name = $("#name").val(); 
    var last_name = $("#last_name").val(); 
    var dataString = 'name='+name+'&last_name='+last_name; 
    $.ajax({ 
    type:'POST', 
    data:dataString, 
    url:'insert.php', 
    success:function(data) { 
     alert(data); 
    } 
    }); 
});

所以在insert.php頁

<?php 
    $name = $_POST['name']; 
    $last_name = $_POST['last_name']; 
    $insert = "insert into TABLE_NAME values('$name','$last_name')";// Do Your Insert Query 
    if(mysql_query($insert)) { 
    echo "Success"; 
    } else { 
    echo "Cannot Insert"; 
    } 
?>

希望這給一個想法

來源

2013-03-09 06:47:39 Roger

正是我試過這..但問題是當按鈕類型被提交時，它返回空警報...沒有數據插入數據庫...我可以改變type = submit？ – Methew 2013-03-09 06:56:10

@Methew：是的你可以使用type =「submit」。但有一點修改。我已經更新了答案，請檢查 – Roger 2013-03-09 07:17:15

我認爲使用該帖子的dataType屬性（或ajax方法 - >將其設置爲json並且不需要難看的序列化會更好！） http：// api.jquery.com/jQuery.post/ – rebe100x 2015-11-20 16:36:29

綁定表單提交，而不是和$。員額需要沒有成功，功能足夠了：

$(function() { 
    $("#myForm").on("submit",function (e) { 
    e.preventDefault(); // stop the normal submission 
    var name  = $("#name").val(); 
    var last_name = $("#last_name").val(); 
    $.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name}, 
    function(msg){ 
     alert(msg); 
     $("#name").empty(); 
     $("#last_name").empty(); 
    }); 
    }); 
});

來源

2013-03-09 06:46:23 mplungjan

您不需要點擊事件來刪除$("#saveNewContact").click(function() {並使用.submit() jQuery方法。

也使用.serialize，允許您使用值序列化表單字段並創建urlencoded dataString。

$("#myForm").on("submit",function (e) 
{ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    $.ajax(
    { 
     type:'post', 
     url:'receiver url', 
     data:formData, 
     beforeSend:function() 
     { 
      launchpreloader(); 
     }, 
     complete:function() 
     { 
      stopPreloader(); 
     }, 
     success:function(result) 
     { 
      alert(result); 
     } 
    }); 
});

來源

2013-03-09 06:50:23

通過表單提交通過ajax jQuery保存數據表單提交

回答

相關問題