Add more input fields when user press button in jquery

Question

I am new in jquery i need some help. I have modal where user enters the title. when user enters the title new div will be display that div contains one input filed or one addmore button when user click on addmore button new input fields will be open. I want user add upto 18 more fileds after user shows the alert message.

Here is my html code:-

enter code here
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Add Category</h4>
        </div>
        <div class="modal-body">
            <h4>Enter Your Title</h4>
            <input type="text" name="title" class="getvalue">
            <button type="submit"  class="submitdata"> Submit</button>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>

And My Jquery code

enter code here
$(document).ready(function() {
    var room= 1;
    $(".submitdata").on('click',function(){
        var value= $(".getvalue").val();
        $(".submitdata").attr('disabled');
        $(".modal-body").after(
            '<br><center><div id="contain"> 
            Choose Your Own service <br> <br>
            <input type="text" name='+value+'[]>
            <button type="button" class="addService">Add More</button>
            </div></center>'
            );
        $(".addService").on('click',function(){
              //Please anyone do coding here
        });
    });

Thanks ina davance :)

Mayank Pandeyz · Accepted Answer · 2016-11-10 11:20:23Z

2

Try something like this:

HTML

<div id="contain"> 
  Choose Your Own service <br> <br>
  <div>
  <input type="text" name='+value+'[]>
  <button type="button" class="addService">Add More</button>
  </div>
</div>

JS

$(document).on('click', '.addService', function(){
    var html = '<div><input type="text" name="myInput"><button type="button" class="addService">Add More</button></div>';
  $(this).parent().append(html);
});

Working Fiddle

answered Nov 10, 2016 at 11:20

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kunal Over a year ago

Mayank thank you for reaply the js you have added is working fine i want Remove button instead of add button. Can you please write code for that

kunal Over a year ago

Thank you working fine. One thing left i want user can't add more that 5 inputs Can you please update your fiddle again. Thanks once again

kunal Over a year ago

Mayank ceck your fiddle firstly add 5 input fields and remove all the created fields and then try adding new fileds its gives me alert you canno add more

Hitesh Jangid · Accepted Answer · 2016-11-10 11:37:50Z

0

$('.submitdata').on('click',function(){
      $(this).before($(this).closest('.getvalue').clone());
      $(this).closest('.getvalue').val('');
})

answered Nov 10, 2016 at 11:37

Hitesh Jangid

2103 silver badges10 bronze badges

Collectives™ on Stack Overflow

Add more input fields when user press button in jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related