Question

i found on the Internet a plugin and add some new lines to form this:

    (function($){

 $countForms = 1;
 $countFormsA = 1;

      $.fn.addForms = function(idform){

          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>";

          var myform2 = "<table>"+
          "  <tr>"+
          "     <td>Field C</td>"+
          "     <td><input type='text' name='fieldc["+$countFormsA+"]'></td>"+
          "     <td>Field D ("+$countFormsA+"):</td>"+
          "     <td><textarea name='fieldd["+$countFormsA+"]'></textarea></td>"+
          "     <td><button>remove</button></td>"+
          "  </tr>"+
          "</table>";

    if(idform=='mybutton'){
       alert(idform);
       myform = $("<div>"+myform+"</div>");
$("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform);
$countForms++;
}
    else{

    if(idform=='mybutton1'){
       alert(idform);
    myform2 = $("<div>"+myform2+"</div>");
$("button", $(myform2)).click(function(){ $(this).parent().parent().remove(); });
    $(this).append(myform2);

    $countFormsA++;

                        }
                    }                     
      };

})(jQuery);         

 $(function(){
    $("#mybutton1").bind("click", function(){

    var idform=this.id;

        if($countFormsA<3){
            $("#container1").addForms(idform);
        }       
    });
});

$(function(){
    $("#mybutton").bind("click", function(){

    var idform=this.id;

        if($countForms<3){
            $("#container").addForms(idform);
        }       
    });
});

However i’m having a problem. If i click “add form” everything works, but when i click “add form 1” the new form is added but after 1 second it disappears. Any hint how can i solve this? Thank you!

The html code:

<button id="mybutton">add form</button>
<div id="container"><div>
<form method="post" name="b" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='dadoA'></td>
        <td>Field B</td>
        <td><textarea name="dadoB"></textarea></td>
                             <td><button>remove</button></td>
                          </tr>
                         </table></div></div>

                         <div align="center">
<p><input type="submit" value="Registar" name="registar"></p>
</div>
<!-- -->

<button id="mybutton1">add form1</button>
<div id="container1"><div>
<form method="post" name="a" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='dadoA'></td>
        <td>Field B</td>
        <td><textarea name="dadoB"></textarea></td>
                             <td><button>remove</button></td>
                          </tr>
                         </table></div></div>

                         <div align="center">
<p><input type="submit" value="Registar1" name="registar1"></p>
</div>

Answer 1

The form will disappear because the page is being refreshed by that button’s default behaviour.

You will need to prevent that behaviour in your click binding. I would suggest passing the event object through and using preventDefault() ie:

$("#mybutton1").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;

    if($countFormsA<3){
        $("#container1").addForms(idform);
    }       
});