Zapisywanie danych za pomocą posta jQuery ajax z formularzem Wyślij

Question

Mam formularz i chcę zapisać dane za pośrednictwem posta jQuery ajax. Jeśli przycisk jest type="submit" uratować, to nie robi żadnej to tylko pusty alert ... Chcę, aby zapisać dane i pozostanie na tej samej formie z polami odświeżania ...

Oto co próbowałem:

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

i tu jest moja forma

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

Answer 1

zrobić w ten sposób

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> 

Twój 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); 
    } 
    }); 
}); 

Więc na stronie 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"; 
    } 
?> 

Nadzieja to daje wyobrażenie

Answer 2

Bind złożyć formularz zamiast i żaden sukces w $ .post konieczne, funkcja jest wystarczająco:

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

Answer 3

Nie potrzebujesz zdarzenia kliknięcia dla tego usunięcia $("#saveNewContact").click(function() { i używaj metody jQuery .submit().

Użyj również .serialize, które umożliwiają serializację pól formularzy z wartością i tworzenie danych zakodowanych w trybie urlen.

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