如何使用jquery复制表单中的文本字段

时间:2015-02-23 12:07:25

标签: jquery html

<form action="TrailUi" method="post" class="styled_form"
		onsubmit="return validateForm()" name="myForm">
		<div id="smallBox">
			Step <select name="option">
				<option value="">Select your Option</option>
				<option value="Click">Click</option>
				<option value="Select">Select</option>
			</select> <br>
			<input type="text" name="area1" value="" placeholder="object1" /> 
			<br><input type="text" name="area2" value="" placeholder="object2" />
			</div><br> 
			<input type="button" id="cloneButton1" class="styled-button-5" value="+" />
			<br><br><input type="submit" class="styled-button-5" value="Generate" />
	</form>

请帮助我。在上面的代码中按一下+按钮。文本字段必须是dulicated。

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
$(document).ready(function () {
index = 1;
        $('#cloneButton1').click(function(){
            index++;
            $('#input-holder').append('<input type="text" name="area'+ index +'" value="" placeholder="object'+ index +'" /><br>');
        });
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <form action="TrailUi" method="post" class="styled_form"
		onsubmit="return validateForm()" name="myForm">
		<div id="smallBox">
			Step <select name="option">
				<option value="">Select your Option</option>
				<option value="Click">Click</option>
				<option value="Select">Select</option>
			</select> 
            <br>
            <div id="input-holder">
			<input type="text" name="area1" value="" placeholder="object1" /> <br>
			</div>
			</div>
            <br> 
			<input type="button" id="cloneButton1" class="styled-button-5" value="+" />
			<br><br><input type="submit" class="styled-button-5" value="Generate" />
	</form>
&#13;
&#13;
&#13;

我希望这会有所帮助