带输入和选择的动态表单

时间:2014-04-03 10:30:25

标签: javascript jquery html ajax

我需要一个可以添加包含SELECT和INPUT的新行的表单。这对我有用,但是当我提交表单时,没有发布SELECT的变量。

我的HTML代码:

<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<button id='add'>Add</button>
<form action="test.php" method="get">
<div class='container'>
    <select>
    <option name='service[]' value=1>HDD Recovery</option>
    <option name='service[]' value=2>PC Clean</option>
    <option name='service[]' value=3>Other</option>
    </select>
    Description<input type='text' name='desc[]'>
    Price<input type='text' name='price[]'>


</div>
<input type="submit" value="Send">
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var removeButton = "<button id='remove'>Remove</button>";
    $('#add').click(function() {
        $('div.container:last').after($('div.container:first').clone());
        $('div.container:last').append(removeButton);
        $('div.container:last input').each(function(){
           this.value = ''; 
        });

    });
    $('#remove').live('click', function() {
        $(this).closest('div.container').remove();
    });
});
</script>
<br>
</html>

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

你必须命名选择,而不是它所拥有的选项。

<select name="service[]">
    <option value="1">HDD Recovery</option>
    <option value=2>PC Clean</option>
    <option value=3>Other</option>
</select>

答案 1 :(得分:0)

使用

<select name='service[]'>

而不是为选项

命名
<option name='service[]' value=1>HDD Recovery</option>