Question

我正在为我的网站制作表单，如果用户点击 + 图标，我基本上想要在表单中添加新字段。

以下是代码：

<div class='form-group'>
    <div class='form-group'>
        <label>Product Image 1:</label>
        <input type='file' name='product_img1' class='form-control my-colorpicker1'>
    </div>
</div>
<div class='form-group'>
    <div class='form-group'>
        <label>Product Image 2:</label>
        <input type='file' name='product_img2' class='form-control my-colorpicker1'>
    </div>
</div>
<div class='form-group'>
    <div class='form-group'>
        <label>Product Image 3:</label>
        <input type='file' name='product_img3' class='form-control my-colorpicker1'>
    </div>
</div>

<p>Add more images: <a href='' title='click this icon in order to add more images'><span class='glyphicon glyphicon-plus'></span></a></p>

因此，如果用户点击此加唱歌，则应在表单中添加另一个字段而不刷新页面。所以代码就是这样：

<div class='form-group'>
        <div class='form-group'>
            <label>Product Image 1:</label>
            <input type='file' name='product_img1' class='form-control my-colorpicker1'>
        </div>
    </div>
    <div class='form-group'>
        <div class='form-group'>
            <label>Product Image 2:</label>
            <input type='file' name='product_img2' class='form-control my-colorpicker1'>
        </div>
    </div>
    <div class='form-group'>
        <div class='form-group'>
            <label>Product Image 3:</label>
            <input type='file' name='product_img3' class='form-control my-colorpicker1'>
        </div>
    </div>
    <div class='form-group'>
        <div class='form-group'>
            <label>Product Image 4:</label>
            <input type='file' name='product_img1' class='form-control my-colorpicker1'>
        </div>
    </div>
    <p>Add more images: <a href='' title='click this icon in order to add more images'><span class='glyphicon glyphicon-plus'></span></a></p>

因为我不熟悉jQuery的东西，我在这里问了这个问题，希望有人帮助我。谢谢！

Answer 1

阅读jQuery clone和append

if($b['goodNoodle'] = $request->goodNoodle])

$('#add').click(function() {
  $('#clone-field').clone().appendTo('#form');
});

Answer 2

您可以创建一个隐藏字段，用于计算当前总字段数。然后使用jquery APPEND函数。见下文：

＆＃13;

$("#addbtn").click(function(){
		var next = parseInt($('#counter').val()) + 1;
		$("#group1").append("<div class='form-group'><div class='form-group'><label>Product Image "+next+":</label><input type='file' name='product_img"+next+"' class='form-control my-colorpicker1'></div></div>");
		$('#counter').val(next);
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="group1">

	<div class='form-group'>
	    <div class='form-group'>
	        <label>Product Image 1:</label>
	        <input type='file' name='product_img1' class='form-control my-colorpicker1'>
	    </div>
	</div>
	<div class='form-group'>
	    <div class='form-group'>
	        <label>Product Image 2:</label>
	        <input type='file' name='product_img2' class='form-control my-colorpicker1'>
	    </div>
	</div>
	<div class='form-group'>
	    <div class='form-group'>
	        <label>Product Image 3:</label>
	        <input type='file' name='product_img3' class='form-control my-colorpicker1'>
	    </div>
	</div>

</div>
<input type="hidden" name="counter" id="counter" value="3">
<p>Add more images: <a href='#' title='click this icon in order to add more images' id="addbtn">test<span class='glyphicon glyphicon-plus'></span></a></p>

＆＃13;

Answer 3

我认为你应该看一下jQuery文档。或者你应该看一些jQuery教程。

在任何情况下，因为我知道jQuery最初可能会令人生畏，所以这是一个更新版本，可以实现您想要实现的目标：https://codepen.io/adelriosantiago/pen/KZaxdG。

基本上我添加了jQuery库和这段代码片段：

$('#extra-q').hide(0); //Hide the extra question

$('#add-more').off().on('click', function() { //Set the plus button click trigger
  $('#extra-q').show(0); //Show the extra question
})

请注意，这不附加新元素，它只显示隐藏元素。我认为最好这样做，这样你的后端代码就会更容易。

如何在不刷新页面的情况下向html表单添加新字段

3 个答案: