Home/ Questions/Q 372599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T14:13:35+00:00

For instance, I want to have a html form that looks like this: <table>

  • 0

For instance, I want to have a html form that looks like this:

<table>
  <tr>
     <td>Field A:</td>
     <td><input type='text' name='fielda[1]'></td>
     <td>Field B:</td>
     <td><textarea name='fieldb[1]'></textarea></td>
  </tr>
</table>

What I want is to add a button that duplicates my entire above form, but changes the 1 to a 2 for all of the fields. Not just one field, but the entire section of code, including the table.There will be more/different fields than the ones I posted as well.

I’ve already tried this solution, which does exactly what I need:

http://www.quirksmode.org/dom/domform.html

But for some reason, could not duplicate the functionality when copying the code examples to test. I even tried literally copying the entire page source to get it to work, with no avail.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

    (function($){
          $countForms = 1;
          $.fn.addForms = function(){
                var myform = "<table>"+
                 "  <tr>"+
                 "     <td>Field A ("+$countForms+"):</td>"+
                 "     <td><input type='text' name='fielda["+$countForms+"]'></td>"+
                 "     <td>Field B ("+$countForms+"):</td>"+
                 "     <td><textarea name='fieldb["+$countForms+"]'></textarea></td>"+
                 "     <td><button>remove</button></td>"+
                 "  </tr>"+
                 "</table>";

                 myform = $("<div>"+myform+"</div>");
                 $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });

                 $(this).append(myform);
                 $countForms++;
          };
    })(jQuery);     

    $(function(){
        $("#mybutton").bind("click", function(){
            $("#container").addForms();
        });
    });

</script>
</head>
<body>
<button id="mybutton">add form</button>
<div id="container"></div>
</body>
</html>
    • 0