提交表單提交客戶端HTML表格數據到服務器端PHP腳本

我有一個帶有多個元素的html表單。現在，特別是我希望您關注的是兩個Dropbox，除此之外還有一個「添加」按鈕。因此，一旦用戶從下拉列表中選擇並按下「添加」按鈕，它就會將數據添加到表格中，然後該表將顯示在這些下拉框下方。因此，基本上用戶可以通過下拉列表添加多個數據並在表格中查看它。現在，當表單提交時，我想從該表中檢索數據時出現問題。我不確定$ _PHP ['']是否可以從我創建的表中獲取數據。提交表單提交客戶端HTML表格數據到服務器端PHP腳本

因此，作爲替代方案，我試圖在表單提交時使用AJAX傳遞數據！
HTML：

<form name="input" id="formToSubmit" action="process-host.php" method="post" enctype="multipart/form-data"> 
    /* Form data goes here*/ 
<input type="button" class="submit" value="Submit Request" onclick="valField(this.form); "/>

valField（）方法驗證並提交表單。
JS：

function valField(form)  //field validation for the form before submit 

{ 
    /*Validation code goes here*/ 

     //if(validated){ 
    $("#formToSubmit").submit(function(e) {  //this.submit(function(e)){ 
      e.preventDefault(); 

     var tableForNew = new Array(); //to store the infoDisplayTable data 

     $('#infoDisplayTable1l tr').each(function() { 
     tableForNew.push($(this).find("td:first").html()); 
     tableForNew.push($(this).find("td:second").html()); 
     }); 



     // Get all INPUT form data and organize as array 
     var formData = $(this).serializeArray(); 

     // Encode with JSON 
     var tableForNew1 = JSON.stringify(tableForNew); 


     // Add to formData array 
     formData.push({name: 'tableForNew', value: tableForNew1}); 




     // Submit with AJAX 
     $.ajax({ 
      url: "./process-host.php", 
      data: formData, 
      type: 'post', 
      success: function() { 
       alert("BOOM! IT WORKED;"); 
      } 
     }); 



    });

在服務器端，在過程host.php，
$tableForNew = json_decode($_POST['tableForNew']);

這顯然是不工作了，所以當我使用Firebug的調試，我可以看到它不在提交函數中。它只是提交表單，而不需要通過內部代碼！這就是爲什麼它不發佈任何表數據到服務器，並給出錯誤通知未定義的索引：tableForNew。

那麼，我能在這裏做些什麼來使它工作？有什麼建議麼？

來源

2013-10-11 D4RK_PA5SENGER

你不需要爲此使用AJAX。如果您將字段添加到表單中，則在您提交表單時將會發送這些字段。就瀏覽器而言，初始源代碼中的元素與使用Javascript添加的元素沒有區別。 – Barmar

那麼，我將如何訪問表中的數據？導致$ _POST ['infoDisplayTable1l']不會鍛鍊！ –

將數據放在窗體的隱藏輸入字段中。 – Barmar

好吧，在提交表單的時候進行AJAX調用畢竟沒有鍛鍊，但是我確實成功地以某種方式從服務器端的HTML表中獲取數據！現在爲我工作的解決方案是向表單中添加隱藏字段。基本上，我添加隱藏的<input>字段，以便在用戶輸入值並按下「添加」按鈕時形成，因此它位於「添加」按鈕的onClick事件處理程序中！下面是函數的樣子，

function addData1(){ 

if($("#consumerDropDown").val() != "" && $("#authenticationTypeDropDown").val() != "") 
{ 
    $("#infoDisplayTable1").show(); 
    $("#infoDisplayTable1").attr("disabled", false); 

    $("#infoDisplayTable1").append("<tr><td >"+$("#consumerDropDown").val()+"</td><td>"+ 
      $("#authenticationTypeDropDown").val()+"</td></tr>"); 
      $("#tester").append("<input type='text' value='" +$("#consumerDropDown").val() + "----->"+$("#authenticationTypeDropDown").val() + "' name='dTable1"+ counter1+ "'>"); 

     counter1++; 
} 
else 
{ 
    alert("Please make a valid selection from a drop-down before adding it to the list!"); 
}}

這裏，我定義C1的在JS文件globel變量註釋。 測試儀被分配到<div>標識，其屬性爲display：none。更多的，我正在分配名稱屬性<input>動態標記（例如，這裏是dTable10，dTable11等），所以它會更容易在服務器端訪問它！
最後只提交我傳遞的形式之前C1的變量來隱藏字段，就像我做到了上面，
$("#tester").append("<input type='text' name='counter1' value='"+counter1+"'>"); form.submit();

服務器端：

$counterA = intval($_POST['counter1']); 

       for($i=0;$i<$counterA;$i++) 
       { 
       $createReq['comment'] .= $_POST["dTable1"."{$i}"]."\n"; 
       }

這裏基本上我將這個值附加到一個字符串變量。它會遍歷每個項目，並將追加到變量。
因此，這對我來說已經成爲現在的解決方案！但是，如果AJAX調用在提交表單（我之前想要做的）中工作，我會更加滿意！

來源

2013-10-16 17:50:51

當您使用內聯onclick處理程序時，您需要返回false，否則會觸發默認操作（提交表單）。

但是，您現在擁有此設置的方式valField函數將只定義提交處理程序並返回 - 這意味着即使您返回false，也必須再次單擊該按鈕才能觸發提交事件，它也會觸發valField函數並重新定義提交處理程序（初始！）。

您應該刪除onclick處理程序上的按鈕元素，將提交處理程序移出valField函數，並且只有在窗體有效時才執行ajax調用。

來源

2013-10-11 17:43:56 markle976

嘿，所以我試着按照你所說的做，並且從** valField（）**方法中獲得'$（'form'）。submit（function（））'函數，並且爲提交按鈕返回false ，以便它在按下時不會提交表單。 –

但是，仍然存在相同的問題，我可以在調試時看到Firebug中代碼不通過submit（）方法的內部** AJAX調用函數（）**。它只是來到方法調用，然後從** jq-ui **文件執行幾行，然後退出submit（）方法。我不明白爲什麼它沒有通過內部函數，因爲在技術上，一切似乎都是正確的！有關於此的任何想法？ –

ajax方法是異步的，所以它只設置一個函數來成功調用。嘗試添加一個錯誤：函數處理程序。另外，你看看螢火蟲（網絡標籤）中的網絡活動，看看ajax請求是否正在解僱？ – markle976

提交表單提交客戶端HTML表格數據到服務器端PHP腳本

回答

相關問題