auto rows in jquery

Some times, the situation requires additional rows of input data. In such case, we have to design the form in a dynamic way so that the rows may be appended as per the requirement. Here, I have designed the form in a simple and logical manner. The demo is given below.

Social net work login details


Hope you enjoyed best the source code is given below. If you have confusion, kindly mail me so that I will try to rectify the code.
<html> <head> <style type="text/css"> .k input { width:95px; margin: 2px; } </style> <script src=""></script> <script> $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e){ //on add input button click e.preventDefault(); if(x < max_fields){ //max input box allowed x++; //text box increment $(wrapper).append('<div class="k"><input type="text" name="net_work[]"><input type="text" name="user_login[]"><input type="text" name="pass_word[]"/>&nbsp;<a href="#" class="remove_field">X</a></div>'); //add input box } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); </script> </head> <body> <h3> Social net work login details</h3> <form method="post" action=""> NAME: <input type="text" size="20" name="name"> <br/> PLACE: <input type="text" size="20" name="place"> <br/> MOBILE: <input type="text" size="20" name="mobile"> <br/><br/> <div class="input_fields_wrap"> NET_WORK &nbsp; USER_LOGIN &nbsp; PASS_WORD <div class="k"><input type="text" name="net_work[]"> <input type="text" name="user_login[]"><input type="text" name="pass_word[]"> <button class="add_field_button">+</button> </div> </div> <input type="submit" name='submit' onclick="show_confirm()" value="SUBMIT"> &nbsp;<input type="reset" value="CLEAR"> </form> </body> </html>

No comments:

Click Here To add Comment

Post a Comment