添加使用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>

将所有输入为输入文本？ – 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>

我没有关于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

相关推荐