一次添加两个输入字段的效果很好,但是如何根据需要删除两个输入字段。
参考:https://phppot.com/php/php-contact-form-with-custom-fields/
示例代码
<div id="custom-box">
<label class="custom-input-label">Custom Fields</label>
<div id="custom-input-container">
<div class="input-row">
<input style="width:49%!important; float:left;" type="text" placeholder="Option name" required class="custom-input-field" name="custom_name[]" />
<input style="width:49%!important; float:right;" type="number" placeholder="Price" min="0" step="0.01" required class="custom-input-field float-right" name="custom_value[]" />
</div>
</div>
<input type="button" class="btn-add-more" value="Add More" onClick="addMore()" />
</div>
和Java脚本添加更多字段
function addMore() {
$("<DIV>").load("input.php", function() {
$("#custom-input-container").append($(this).html());
});
}
input.php页面内容
<div class="input-row">
<input style="width:49%!important; float:left;" type="text" placeholder="Option name" required class="custom-input-field" name="custom_name[]" />
<input style="width:49%!important; float:right;" type="number" placeholder="Price" min="0" step="0.01" required class="custom-input-field float-right" name="custom_value[]" />
</div>
答案 0 :(得分:1)
我正在删除类名称“ input-row”的最后一个选择器,它确实起作用。 解决方法如下:
Javascript:
function deleteMore() {
$("<DIV>").load("input.php", function() {
$(".input-row:last").remove();
});
}
HTML
<input type="button" class="btn-add-more" value="Delete More" onClick="deleteMore()"
/>