2014-01-21 42 views
-1

我需要使用AJAX來編輯數據庫中的某些文本。使用AJAX發佈html表單字段

默認情況下,我有一個HTML表單輸入字段,所有的輸入字段都與數據庫中的數據一起存檔。所以如果用戶想要編輯這些數據,他必須在相同的輸入框中輸入新的數據。並且在他點擊編輯鏈接表單之後,數據必須張貼到另一個頁面。之後我可以處理所有的流程。只是我不知道如何通過AJAX發佈表格

<form id="test_form" name="test_form"> 
       <div style="width: 300px; height: auto; float: left; margin-top: 15px;"> 
        <input name="sub_cat_two_name" id="sub_cat_two_name" value="<?php echo $row['sub_cat_two_name'] ?>"/> 
       </div> 
       <div style="width: 300px; height: auto; float: left; margin-top: 15px;"> 
        <input name="cat_name" id="cat_name" value="<?php echo $row['cat_name'] ?>" /> 
       </div> 
       <div style="width: 300px; height: auto; float: left; margin-top: 15px;"> 
        <span> 
         <a onclick="send_edit_sub_cat()" href="<?php echo 'edit_sub_cat/' . $row['sub_cat_two_id'] ?>">Edit</a>/
         <a href="<?php echo 'delete_sub_cat/' . $row['sub_cat_two_id'] ?>">Delete</a> 
        </span> 
       </div> 
      </form> 



var xmlhttp; 
       function loadXMLDoc(url, cfunc) 
       { 
        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 = cfunc; 
        xmlhttp.open("POST", url, true); 
        xmlhttp.send(); 
       } 

function any_function_for_post_my_form_data(str) 
       { 

        loadXMLDoc("http://localhost/ajax_showbrdep_admin/" + str, function() 
        { 
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
         { 
          document.getElementById("myDivAdmn").innerHTML = xmlhttp.responseText; 
         } 
        }); 
       } 

我用上面的ajax編碼爲我做了一些其他的作品。我可以使用此代碼模式進行表單提交嗎?

+0

可能的重複http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form – user2936213

+1

我不這麼認爲。因爲我想知道如何使用我已經擁有的功能來做到這一點。 – Yasitha

+1

你也可以看到這個教程:http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ – user2936213

回答

-1

這jQuery代碼現在做我的工作。儘管如此,我還沒有在早期的互聯網探索者中嘗試過。它適用於Firefox,IE10和Chrome。

$(document).ready(function() { 
        var frm = $('#test_form'); 
        $("input").change(function(event) { 
         // frm.submit(function(event) { 
         $.ajax({ 
          cache: false, 
          type: frm.attr('method'), 
          url: frm.attr('action'), 
          data: $("#test_form").serialize(), 
          complete: function(r) { 
           //alert(r.responseText); 
           $("#myDivAdmn").html(r.responseText); 
          } 
         }); 
         event.preventDefault(); 
        }); 
       });