我有一个有效的表单和一切。但是我想在用户能够添加多个项目的地方更改它。目前我有一个带有选择语句的表单,然后选择后,他们可以在选择语句下方的文本字段中选择数量。完成此操作后,我想给他们一个选项,以添加具有相同选项和数量的另一个项目。我将如何处理下面的表单代码:
<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">
应该为此使用 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">