在表格上添加更多行按鈕點擊事件表單

Question

我有一行id聯繫人列表。我想在按鈕點擊事件的基礎上再添加兩行（追加到）。我有id addmorecontacts的按鈕。

我的代碼結構...

<?php $contacts=mysql_query("SELECT cntctnum, cntcttype FROM contacts WHERE rfrnc='".$pgid."'") or die(mysql_error()); 
while ($resultcontacts=mysql_fetch_assoc($contacts)) { 
$contactnumber = explode("-", $resultcontacts["cntctnum"]); ?> 
    <tr > 
     <td class="spacing1">Contact Number:</td> 
     <td class="spacing1" > 
     <input type="text" id="a" tabindex="5" name="txtphone" value="<?php echo $contactnumber[0]; ?>" onKeyUp="next()" onChange="change2()" class="a" maxlength="3" size="2"/> 
     <b>-</b> 
     <input type="text" id="b" name="txtphone1" tabindex="6" value="<?php echo $contactnumber[1]; ?>" onKeyUp="next(); next2()" onChange="change2()" class="a" maxlength="3" size="2"/> 
     <b>-</b> 
     <input type="text" id="c" name="txtphone2" tabindex="7" value="<?php echo $contactnumber[2]; ?>" onKeyUp="next1()" onChange="change2()" class="a" maxlength="4" size="3"/></td> 
    </tr> 
    <tr id="contactlist"> 
     <td class="spacing1" >Contact Type:</td> 
     <td class="spacing1" ><select name="cntcttype" id="cntcttype" tabindex="8" class="select" onChange="change2()"> 
     <?php getcontacttype($resultcontacts["cntcttype"]); ?> 
     </select></td> 
    </tr> 
    <?php } ?> 

我布頓行...

<tr> 
      <td class="spacing1" >&nbsp;</td> 
       <td class="spacing1" >&nbsp;</td> 
       <td class="spacing1" ><input name="addmorecontacts" type="button" value="Add More"></td> 
</tr> 

Answer 1

的第一件事要說一下上面的代碼，你將最終獲得更多的比具有相同ID的一個元素，即從來沒有有效。您正在循環生成<input>，其靜態ID爲a,b,c - 您需要刪除這些ID或使其對每行都是唯一的。您可以使用數據庫主鍵來執行此操作。

爲了添加更多的聯繫人，您需要一個表單來允許用戶輸入詳細信息，因此當您單擊按鈕時，您需要將用戶帶到一個帶有表單的新頁面，或者表單會顯示在您現有的頁面上。當用戶對新聯繫人的詳細信息感到滿意時，他們需要讓你知道 - 所以你需要一個鏈接/按鈕讓他們點擊Add this contact或類似的東西。

點擊此按鈕後，需要將數據發送到服務器，以便輸入數據庫。您可以通過以傳統方式提交表單來完成此操作，以便重新加載頁面，或者您可以使用AJAX--您選擇哪種方法取決於您。

如果您以傳統的方式提交表單，您需要將提交的數據傳遞給mysql_real_escape_string()，並將其輸入到數據庫中，然後將用戶重定向回原始頁面（正確的HTTP響應代碼表單提交後的重定向類型爲303 See Other）。

如果您使用AJAX，過程將與上述相同，但不是以重定向結束，您只需exit，然後使用客戶端腳本更新顯示。

表單提交方法對編程來說可以說比較簡單，但AJAX方法可以用來給用戶帶來更流暢的體驗，並且（在某些情況下）可以減少服務器負載，因爲您不必完全重新生成頁面服務器端。

在構建一些代碼來完成上述過程的過程中，如果遇到任何問題，我們很樂意提供幫助 - 但請嘗試提出有關特定位代碼的問題你不能上班，而不是通用的「我該怎麼做？」有點問題。