Ajax強制更新後的表單提交jquery/php/mysql/html

Question

如何強制all_contacts（select * from用戶）通過表單正確插入數據到我的數據庫後立即顯示。它必須通過ajax沒有頁面刷新方法完成。在表單2中，all_contacts值（從用戶中選擇*）並使用基於字符串q的url/php/group_list.php？q = all_contacts（如果有幫助）。

形式1

<form method="post" name="form">  
    <label>First Name:</label><input id="First_Name" name="First_Name" type="text" /> 
    <br /> 
    <label>Last Name:</label><input id="Last_Name" name="Last_Name" type="text" /> 
    <br /> 
    <label>Email Address:</label><input id="Email_Address" name="Email_Address" type="text" /> 
    <br /> 
    <label>Telephone Number:</label><input id="Telephone_Number" name="Telephone_Number" type="text" /> 
    <br /> 
    <label>Postal Address:</label><input id="Postal_Address" name="Postal_Address" type="text" /> 

    <select id="Contact_Group" name="Contact_Group"> 
    <option value="">Select Group</option> 
    <option value="Ungrouped">Ungrouped</option> 
    <option value="Friends">Friends</option> 
    <option value="Family">Family</option> 
    <option value="Colleagues">Colleagues</option> 
    </select> 
    </li></ul> 
    <div > 
    <input type="submit" value="Submit" class="contact"/> 
    <span class="error" style="display:none"> Please Enter Valid Data</span> 
    <span class="success" style="display:none"> Registration Successfully</span> 
    </div></form> 

表2

<form> 
<select name="users" id="users" onChange="showContact(this.value)"> 
<option value="">Select Group</option> 
<option value="all_contacts">All Contacts</option> 
<option value="friends">Friends</option> 
<option value="family">Family</option> 
<option value="colleagues">Colleagues</option> 
<option value="ungrouped">Ungrouped</option> 
</select> 
</form> 

JS

//Displays the user contact summmary 
    function showContact(str) 
    { 
    if (str=="") 
     { 
     document.getElementById("txtSummary").innerHTML=""; 
     return; 
     } 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById("txtSummary").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","php/group_list.php?q="+str,true); 
    xmlhttp.send(); 
    } 

    //Displays the detailed user contact description 
    function showContactDetail(str) 
    { 
    if (str=="") 
     { 
     document.getElementById("txtSummaryDetails").innerHTML=""; 
     return; 
     } 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById("txtSummaryDetails").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","php/contact_details.php?q="+str,true); 
    xmlhttp.send(); 
    } 

    // Checkbox select and delete with loop 
    jQuery(function($) { 
     $("form input[id='check_all']").click(function() { // triggred check 

      var inputs = $("form input[type='checkbox']"); // get the checkbox 

      for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
       var type = inputs[i].getAttribute("type"); // get the type attribute 
        if(type == "checkbox") { 
         if(this.checked) { 
          inputs[i].checked = true; // checked 
         } else { 
          inputs[i].checked = false; // unchecked 

         } 
        } 
      } 
     }); 

     $("form input[id='submit']").click(function() { // triggred submit 

      var count_checked = $("[name='data[]']:checked").length; // count the checked 
      if(count_checked == 0) { 
       alert("Please select a product(s) to delete."); 
       return false; 
      } 
      if(count_checked == 1) { 
       return confirm("Are you sure you want to delete these product?"); 
      } else { 
       return confirm("Are you sure you want to delete these products?"); 
       }  
     }); 
    }); // jquery end 

    //Submit form 
    $(function() { 
    $(".contact").click(function() { 
    var First_Name = $("#First_Name").val(); 
    var Last_Name = $("#Last_Name").val(); 
    var Email_Address = $("#Email_Address").val(); 
    var Telephone_Number = $("#Telephone_Number").val(); 
    var Postal_Address = $("#Postal_Address").val(); 
    var Contact_Group = $("#Contact_Group").val(); 

    var dataString = 'First_Name='+ First_Name + '&Last_Name=' + Last_Name + '&Email_Address=' + Email_Address + '&Telephone_Number=' + Telephone_Number + '&Postal_Address=' + Postal_Address + '&Contact_Group=' + Contact_Group; 

    if(First_Name=='' || Last_Name=='' || Email_Address=='' || Telephone_Number=='' || Postal_Address=='' || Contact_Group=='') 
    { 
    $('.success').fadeOut(200).hide(); 
    $('.error').fadeOut(200).show(); 
    } 
    else 
    { 
    $.ajax({ 
    type: "POST", 
    url: "php/new_contact.php", 
    data: dataString, 
    success: function(){ 
    $('.success').fadeIn(200).show(); 
    $('.error').fadeOut(200).hide(); 

    //Newly added 
    $('#First_Name').val(''); 
    $('#Last_Name').val(''); 
    $('#Email_Address').val(''); 
    $('#Telephone_Number').val(''); 
    $('#Postal_Address').val(''); 
    $('#Contact_Group').val(''); 

    } 
    }); 
    } 
    return false; 
    }); 
    }); 

科爾cted更新的Ajax版本

//Displays the user contact summmary 
function showContact(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtSummary").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtSummary").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","php/group_list.php?q="+str,true); 
xmlhttp.send(); 
} 

//Displays the detailed user contact description 
function showContactDetail(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtSummaryDetails").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtSummaryDetails").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","php/contact_details.php?q="+str,true); 
xmlhttp.send(); 
} 

// Checkbox select and delete with loop 
jQuery(function($) { 
    $("form input[id='check_all']").click(function() { // triggred check 

     var inputs = $("form input[type='checkbox']"); // get the checkbox 

     for(var i = 0; i < inputs.length; i++) { // count input tag in the form 
      var type = inputs[i].getAttribute("type"); // get the type attribute 
       if(type == "checkbox") { 
        if(this.checked) { 
         inputs[i].checked = true; // checked 
        } else { 
         inputs[i].checked = false; // unchecked 

        } 
       } 
     } 
    }); 

    $("form input[id='submit']").click(function() { // triggred submit 

     var count_checked = $("[name='data[]']:checked").length; // count the checked 
     if(count_checked == 0) { 
      alert("Please select a product(s) to delete."); 
      return false; 
     } 
     if(count_checked == 1) { 
      return confirm("Are you sure you want to delete these product?"); 
     } else { 
      return confirm("Are you sure you want to delete these products?"); 
      }  
    }); 
}); // jquery end 

//Submit form 
$(function() { 
$(".contact").click(function() { 
var First_Name = $("#First_Name").val(); 
var Last_Name = $("#Last_Name").val(); 
var Email_Address = $("#Email_Address").val(); 
var Telephone_Number = $("#Telephone_Number").val(); 
var Postal_Address = $("#Postal_Address").val(); 
var Contact_Group = $("#Contact_Group").val(); 

var dataString = 'First_Name='+ First_Name + '&Last_Name=' + Last_Name + '&Email_Address=' + Email_Address + '&Telephone_Number=' + Telephone_Number + '&Postal_Address=' + Postal_Address + '&Contact_Group=' + Contact_Group; 

if(First_Name=='' || Last_Name=='' || Email_Address=='' || Telephone_Number=='' || Postal_Address=='' || Contact_Group=='') 
{ 
$('.success').fadeOut(200).hide(); 
$('.error').fadeOut(200).show(); 
} 
else 
{ 
$.ajax({ 
type: "POST", 
url: "php/new_contact.php", 
data: dataString, 

success: function(){ 

$(document).ready(function() { 
    $("#formSearch").submit(function() { 
     var options = { 
      /* target:"#divResult", */ 

      success: function(html) { 
       $("#txtSummary").replaceWith($('#txtSummary', $(html))); 
      }, 

      url: "http://localhost/example/comp333assn1/php/group_list.php?q=all_contacts" 
     } 

     $(this).ajax(options); 
     return false; 

    }); 
}); 

$('.success').fadeIn(200).show(); 
$('.error').fadeOut(200).hide(); 

//Newly added 
$('#First_Name').val(''); 
$('#Last_Name').val(''); 
$('#Email_Address').val(''); 
$('#Telephone_Number').val(''); 
$('#Postal_Address').val(''); 
$('#Contact_Group').val(''); 

} 



}); 
} 
return false; 
}); 
}); 

Answer 1

我的建議是使用jQuery.form插件，它把你的形式轉化爲Ajax表單很少的工作和代碼。它會讓你的代碼變得更加簡單。

從jQuery Form Plugin下載.js文件，並且只需添加這行代碼：

<script src="jquery.form.3.10.js"></script> 

刪除除了你的一切形式（但添加一個「身份證」和「行動」的說法吧），然後添加：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#yourform').ajaxForm({ 
       beforeSubmit: checkForm, 
       type: 'post', 
      dataType: 'json', 
       cache: false, 
       beforeSend: function() { 
        $("#formstatus").addClass("ui-autocomplete-loading"); 
       }, 
       success: function(data, status, xhr, myForm) { 
        if (data.usersfound !== undefined) { 
         $('#output').html('ok'); 
         // ### todo: do something with data 
        } 
        if (data.erroruser !== undefined) { 
         $('#output').html('error: ' + data.erroruser.msg); 
         // ### your code returned an error 
        } 
       }, 
       error: function(xhr ,status ,error) { 
        $('#output').html(xhr.responseText); 
        // ### status != 200 
        }, 
       complete: function() { 
        $("#formstatus").removeClass("ui-autocomplete-loading"); 
       } 


     }); 
    }); 
    function checkForm() { 
     // ### todo: check the input of the form; return(false) if something is wrong, else return(true) 
    } 
</script> 

注：
- UI的自動完成加載是jQuery UI的一類，它顯示了一個「做，一些裝載」動畫。這是可選的
- 保存數據的結果應返回json數據。這可能是（usersfound：[{「id」：「1」，「name」：「john」}]）或（erroruser：{「msg」：「bla」}）

更多示例可以在jQuery表單插件頁面！

Answer 2

沒有直接的解決方案或特定的解決方案。這只是需要你使用JavaScript。

檢查：

Ajax - How refresh after submit