javascript - 尝试添加新项目以存储发布前第一个项目的值

Question

我有一个可以正常工作的表格以及一切。但我想改变它，让用户能够添加多个项目。目前，我有带有选择语句的表单，然后选择后，他们可以在选择语句下方的文本字段中选择数量。完成此操作后，我想给他们一个选项来添加具有相同选项和数量的另一个项目。我将如何处理下面的表单代码:

<form method="post">
<p>Team:</p>
<div class="move_val">
    <select name="team">
        <option value="m1">M1</option>
        <option value="m2">M2</option>
        <option value="m3">M3</option>
    </select>
</div>
<p>Item Name / Description:</p>
<div class="move_val">
    <select name="itemName">
        {% for val in users %}
            <option value='{{ val.number }}_{{ val.name }}_{{ val.description }}'>
                {{ val.name }},
                {{ val.description }}</option>
        {% endfor %}
    </select>
</div>
<p>Quantity:</p>
<input type="text" class="text" name="quantity" placeholder="3" required="">
<p>Date:</p>
<input type="text" class="text" name="singledate1" placeholder="Click here" required="">
<p>Type:</p>
<div class="move_val">
    <select name="type">
        <option value="Return">Return</option>
    </select>
</div>
<input type="submit" value="Submit">

Answer 1

应该使用 JavaScript，只需复制最后的输入并将它们添加到包装器

请注意，您需要更改输入名称以发布多个值，例如 name="quantity 变为 name="quantity[]"

	$(function() {
	$(document).on('blur', '.elements .element:last-child input[name="quantity[]"]', function() {
             // Force current values into DOM so you can copy them
	     $(this).parent().find('input, select').each(function() {
                 $(this).attr('value', $(this).val());
             });
             //Duplicate last inputs
             $('.elements').append($(this).parent()[0].outerHTML);
	});
});

.elements .element {
  border : 1px solid #A2A2A2;
  margin: 15px 0;
  padding : 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<p>Team:</p>
<div class="move_val">
    <select name="team">
        <option value="m1">M1</option>
        <option value="m2">M2</option>
        <option value="m3">M3</option>
    </select>
</div>
<p>Item Name / Description:</p>
<div class="elements">
	<div class="element">
		<div class="move_val">
			<select name="itemName[]">
				{% for val in users %}
					<option value='{{ val.number }}_{{ val.name }}_{{ val.description }}'>
						{{ val.name }},
						{{ val.description }}</option>
				{% endfor %}
			</select>
		</div>
		<p>Quantity:</p>
		<input type="text" class="text" name="quantity[]" placeholder="3" required="">		
	</div>
</div>
<p>Date:</p>
<input type="text" class="text" name="singledate1" placeholder="Click here" required="">
<p>Type:</p>
<div class="move_val">
    <select name="type">
        <option value="Return">Return</option>
    </select>
</div>
<input type="submit" value="Submit">