添加使用JavaScript和PHP

字段項場數量
-------- 動態文本字段---- -
-------- ------
-------- -----
------- - ------
添加更多添加使用JavaScript和PHP

項目領域和數量由用戶手動輸入，如果他們需要更多的項目進入，他們會點擊添加更多按鈕

我有5形式每列有兩列，如上所述。

我想動態添加更多的文本字段，onclick添加更多按鈕，我需要通過POST使用PHP獲取值。

我看過類似的帖子，但是他們一次只添加一個輸入字段或一堆字段。

我希望這兩個字段的項目和數量被添加在一個單一的點擊。

<form id="quick_post" method="post"> 
<table id="input_fields"> 
<tr> 
    <td><input class="orderinput" type="text" name="product[]">   
    </td> 
    <td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3"> 
    </td> 
</tr> 
    <tr> 
     <td> 
      //In here i want to add more Input Text product fields 
     </td> 
     <td> 
      //In here i want to add more Input Text Quantity fields 
     </td> 
    </tr> 
    <tr> 
     <td><input class="more" type="submit" value="Addmore" name="addmore"></td> 
    </tr> 
</table> </form>

來源

2013-05-11 Raja Mohammed

將所有輸入爲輸入文本？ – Mehmet 2013-05-11 12:38:32

如果您是初學者，那麼您可能需要查看[Knockout.js]（http://knockoutjs.com/）JavaScript庫。它有關創建交互式用戶界面的所有問題的解決方案。它也有大量的在線教程。學習新的圖書館總是優點。 – akash4eva 2013-05-11 12:39:39

您應該找到您找到的其他示例，並對其進行修改以適合您的需求。換句話說，首先嚐試一下自己。 ...並且不要像其他人建議的那樣立即使用圖書館。首先了解基礎知識。 – 2013-05-11 12:39:46

Working jsFiddle Demo

[!]這種解決方案需要jQuery。

把Add More按鈕form外：

<form id="quick_post" method="post"> 
    <table id="input_fields"> 
     <tr> 
      <td><input class="orderinput" type="text" name="product[]" /></td> 
      <td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td> 
     </tr> 
    </table> 
</form> 

<input class="more" type="button" value="Addmore" name="addmore" />

，並添加一個click處理您的按鈕：

$(function() { 
    $('input.more').on('click', function() { 
     var $table = $('#input_fields'); 
     var $tr = $table.find('tr').eq(0).clone(); 
     $tr.appendTo($table).find('input').val(''); 
    }); 
});

注意，這需要jQuery。不要忘記檢查jsFiddle demo。

[BONUS]如何jQuery的包括在您的項目：

把jQuery文件和<head>標籤內的上述功能。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    $(function() { 
     $('input.more').on('click', function() { 
      var $table = $('#input_fields'); 
      var $tr = $table.find('tr').eq(0).clone(); 
      $tr.appendTo($table).find('input').val(''); 
     }); 
    }); 
</script>

來源

2013-05-11 13:24:11

我沒有關於Jquery的知識如何在頁面中調用這個函數來粘貼Jquery腳本？ – 2013-05-11 13:46:31

這是工作在jsfiddle演示，我如何獲得值的形式文本字段使用後應該我使用foreach（）？或任何其他方法。我更喜歡它是foreach。 – 2013-05-11 13:48:33

@RajaMOhammed我已經更新了我的答案：如何在項目中包含jQuery。如何在PHP中獲取數據是另一個問題。我建議你爲'添加更多'按鈕留下這個問題，並提出另一個問題：'如何在PHP中以數組的形式檢索文本字段。 – 2013-05-11 13:52:57

添加使用JavaScript和PHP

回答

相關問題