i have a form with two fields such as phone, email like below image.
when i click on the plus button , i want to append one extra text field in form below the button. and i want to remove the text field when clicking the minus button.
dynamically add the fields and set name for unique for that. i need these data to insert into table.
my html code is showed in below..
<div class="RegSpLeft"><input type="text" value="Phone"></div>
<div class="RegSpRight"> <a href="#"><img src="images/plus.png"></a> <a href="#"><img src="images/minus.png"></a> </div>
This might help you.
<div class="RegSpLeft" id="phone">
<input type="text" value="Phone">
</div>
<div class="RegSpRight">
<a href="#" class="pl">+
</a>
<br/>
<a href="#" class="mi">-
</a>
</div>
<script type="text/javascript" src="dist/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('a.pl').click(function(e) {
e.preventDefault();
$('#phone').append('<input type="text" value="Phone">');
});
$('a.mi').click(function (e) {
e.preventDefault();
if ($('#phone input').length > 1) {
$('#phone').children().last().remove();
}
});
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With