Thread: Creating a Form

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    46
    Rep Power
    5

    Creating a Form


    When I click on an "Add" button, it would create a new form with the "First Name", "Last Name" field and 2 textboxes, just like the original.
    So if I click on the "Add" button 5 times, it would create 5 new forms for me. Same idea applies for the "Delete" button.

    Here's my code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
       <FORM NAME="myForm" id="facebookAcc" onsubmit="return false">
       First Name: <input type="text" name="1stName" ><br />
       Last Name: <input type="text" name="lastName" ><br /><br />
       <input id="bu_add" type="button" value="Add" >
       <input id="bu_delete" type="button" value="Delete">
       </FORM>
    </body>
    </html>

    If you can help me out, I would greatly appreciated. Or if you know what this is call, I can just look it up.

    tks
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,127
    Rep Power
    119
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    
    <script>
    
    var formCount = 1;
    
    function newForms()
    {
    formCount++;
    var newform = document.createElement("form");
    var newfield = document.createElement("input");
    var newfield2 = document.createElement("input");
    var newlabel = document.createTextNode("First Name");
    var newlabel2 = document.createTextNode("Last Name");
    newform.setAttribute("name","myForm"+formCount);
    newform.setAttribute("id","facebookAcc"+formCount);
    newform.setAttribute("onsubmit","return false");
    newfield.setAttribute("type","text");
    newfield.setAttribute("class","txtField");
    newfield.setAttribute("name","1stName"+formCount);
    newfield2.setAttribute("type","text");
    newfield2.setAttribute("class","txtField");
    newfield2.setAttribute("name","lastName"+formCount);
    if (formCount >= 1) {
    document.getElementsByTagName("body")[0].appendChild(newform);
    document.getElementsByTagName("form")[formCount-1].appendChild(newlabel);
    document.getElementsByTagName("form")[formCount-1].appendChild(newfield);
    document.getElementsByTagName("form")[formCount-1].appendChild(newlabel2);
    document.getElementsByTagName("form")[formCount-1].appendChild(newfield2);
    }
    }
    
    function removeForm()
    {
    if (formCount >= 2) {
    formCount--;
    var oldform = document.getElementById("facebookAcc"+(formCount+1));
    document.getElementsByTagName("body")[0].removeChild(oldform);
    }
    else {
    formCount = 1;
    }
    }
    
    </script>
    
    <style>
    form {
    margin-top:25px;
    }
    form[name=myForm] {
    margin-top:0px;
    }
    .txtField {
    display:block;
    width:150px;
    margin-bottom:5px;
    }
    </style>
    
    </head>
    <body>
       <FORM NAME="myForm" id="facebookAcc" onsubmit="return false">
       First Name: <input class="txtField" type="text" name="1stName"/>
       Last Name: <input class="txtField" type="text" name="lastName"/>
       <input id="bu_add" type="button" value="Add" onclick="newForms()">
       <input id="bu_delete" type="button" value="Delete" onclick="removeForm()">
       </FORM>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo