Dynamically adding HTML form field using jQuery - Mostlikers

07 January, 2015

Dynamically adding HTML form field using jQuery

Today we are going to see about Dynamically adding HTML form  field using jQuery. this concept is very simple, just i have written form element clone() script. its automatically create html form field. follow below code and live demo also is there. 


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
     $('#addRow').click(function() {
        var curMaxInput = $('#rows ul li').length;   
        $('#rows li:first')
            .insertAfter($('#rows ul li:last'))
            .attr({'id': 'firstname' + (curMaxInput + 1),
                   'name': 'firstname' + (curMaxInput + 1)
          return false;
     $(document).on("click", '.close-gift', function(event) { 

.clone() - Create a deep copy of the set of matched elements.
.find('#firstname').val('') - Clear the value of new element.


<form  action="#" method="POST">
  <div id="rows">
      <li class="borad">
        <div class="text-danger close-gift">
          <span class="fa fa-times-circle">close X</span>
          <input type="text" required  placeholder="Enter your first name" 
            id="firstname" name="firstname" />
        <input type="submit" name="send" value="Submit">
  <div class="clearfix"></div>
  <h3 id="addRow"><a href="#">[+] Add another person details</a></h3>

I hope this post help for you. if you any suggestion about above share your comments below.

No comments:

Post a Comment