HTML表格多個表單Ajax提交

我有一個表具有多行和多個表單，我試圖將每個表單發送到我的PHP腳本。HTML表格多個表單Ajax提交

當不使用Ajax時，所有表格都會正確更新。但是，使用Ajax我無法讓PHP腳本正常工作。我怎樣才能讓Ajax工作？

在HTML部分，我有多行屬於一個窗體（在下面的例子中，所有的行都屬於一個窗體，我有多個窗體）。我確實已經讀過FORM標籤不能在TR標籤下，甚至不知道當我看到代碼時它看起來非常難看，但我不知道我該如何構建表格。

阿賈克斯

$(document).ready(function(){ 
     // click on button submit 
     $("#submit").on('click', function(){ 
      // send ajax 
      $.ajax({ 
       url: 'post.php', // url where to submit the request 
       type : "POST", // type of action POST || GET 
       dataType : 'json', // data type 
       data : $(this).serialize(), // post data || get data 
      }) 
     }); 
    });

HTML

<tbody> 
<tr> 
    <form id="form1" method="POST" action=""></form> 
    <input type="hidden" name="ID" value=""> 
    <td rowspan="6">bls</td> 
    <td rowspan="6">[email protected]</td> 
    <td>Records</td> 
    <td>10</td> 
    <td>1</td> 
    <td><input type="text" size="1" value="" name="Records"></td> 
    <td>Contact</td> 
    <td></td> 
    <td><input type="text" size="1" value="" name="Contact"></td> 
    <td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td> 
    <td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td> 
</tr> 
<tr> 
    <td>Centers</td> 
    <td>15</td> 
    <td>1</td> 
    <td><input type="text" size="1" value="" name="Centers"></td> 
    <td>Company</td> 
    <td>Tadas</td> 
    <td><input type="text" size="1" value="" name="Company"></td> 
</tr> 
<tr> 
    <td>Duration</td> 
    <td>10</td> 
    <td>0</td> 
    <td><input type="text" size="1" value="" name="Duration"></td> 
    <td>Address</td> 
    <td></td> 
    <td><input type="text" size="1" value="" name="Address"></td> 
    <td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td> 
</tr> 
<tr> 
    <td>GCP</td> 
    <td>0</td> 
    <td></td> 
    <td><input type="text" size="1" value="" name="GCP"></td> 
    <td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td> 
    <td><a target="_blank" href="mailto:[email protected]" class="btn btn-success>Email</a></td> 
</tr> 
<tr> 
    <td>RAND</td> 
    <td>0</td> 
    <td>0</td> 
    <td><input type="text" size="1" value="" name="RAND"></td> 
    <td>City</td> 
    <td>Amsterdam</td> 
    <td><input type="text" size="1" value="" name="City"></td> 
</tr> 
<tr> 
    <td>Price</td> 
    <td>€39</td> 
    <td>€18</td> 
    <td><input type="text" size="1" value="" name="Price"></td> 
    <td>Departm</td> 
    <td>IT</td> 
    <td><input type="text" size="1" value="" name="Departm"></td> 
</tr>

來源

2015-11-09 tadalendas

您有無效的HTML標記。

只有td和th元素被允許爲tr的子元素。

然後您立即關閉您的form標記。這意味着您的表單中沒有任何字段。

你應該把你的整個table放在你的form之內。

<form id="form1" method="POST" action=""> 
    <input type="hidden" name="ID" value=""> 
    <table> 
     <tbody> 
      <tr> 
       <td rowspan="6">bls</td> 
       <td rowspan="6">[email protected]</td> 
       <td>Records</td> 
       <td>10</td> 
       <td>1</td> 
       <td><input type="text" size="1" value="" name="Records"></td> 
       <td>Contact</td> 
       <td></td> 
       <td><input type="text" size="1" value="" name="Contact"></td> 
       <td rowspan="6"><textarea id="usrform" name="comment">Tadas</textarea></td> 
       <td><button type="submit" id="submit" value="approve" class="btn btn-warning">Approve</button></td> 
      </tr> 
      <tr> 
       <td>Centers</td> 
       <td>15</td> 
       <td>1</td> 
       <td><input type="text" size="1" value="" name="Centers"></td> 
       <td>Company</td> 
       <td>Tadas</td> 
       <td><input type="text" size="1" value="" name="Company"></td> 
      </tr> 
      <tr> 
       <td>Duration</td> 
       <td>10</td> 
       <td>0</td> 
       <td><input type="text" size="1" value="" name="Duration"></td> 
       <td>Address</td> 
       <td></td> 
       <td><input type="text" size="1" value="" name="Address"></td> 
       <td><button type="submit" formaction="" class="btn btn-info btn-xs btn-block">Invoice</button></td> 
      </tr> 
      <tr> 
       <td>GCP</td> 
       <td>0</td> 
       <td></td> 
       <td><input type="text" size="1" value="" name="GCP"></td> 
       <td>Zip</td><td>10</td><td><input type="text" size="1" value="" name="Zip"></td> 
       <td><a target="_blank" href="mailto:[email protected]" class="btn btn-success>Email</a></td> 
      </tr> 
      <tr> 
       <td>RAND</td> 
       <td>0</td> 
       <td>0</td> 
       <td><input type="text" size="1" value="" name="RAND"></td> 
       <td>City</td> 
       <td>Amsterdam</td> 
       <td><input type="text" size="1" value="" name="City"></td> 
      </tr> 
      <tr> 
       <td>Price</td> 
       <td>€39</td> 
       <td>€18</td> 
       <td><input type="text" size="1" value="" name="Price"></td> 
       <td>Departm</td> 
       <td>IT</td> 
       <td><input type="text" size="1" value="" name="Departm"></td> 
      </tr> 
     </tbody> 
    </table> 
</form>

您還需要處理表單上的submit事件或你的頁面將重新加載。
您可以通過在處理程序中調用e.preventDefault()來完成此操作。

$(function(){ 
    // click on button submit 
    $("#form1").on("submit", function(e){ 
     e.preventDefault(); // prevent page reload on submit 
     // send ajax 
     $.ajax({ 
      url: 'post.php', // url where to submit the request 
      type : "POST", // type of action POST || GET 
      dataType : 'json', // data type 
      data : $(this).serialize(), // post data || get data 
     }) 
    }); 
});

來源

2015-11-10 00:07:07

HTML表格多個表單Ajax提交

回答

相關問題