CODEWITHSUNDEEP
javascriptjquery
kunal
kunal

Reputation: 4248

Add more input fields when user press button in jquery

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. enter image description here

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 :)

Upvotes: 0

Views: 8800

Answers (2)

Hitesh Jangid
Hitesh Jangid

Reputation: 210

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

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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

Upvotes: 2

Related Questions