Interact With a Form

Discussion in 'JavaScript' started by hiyatran, Oct 25, 2012.

0
  1. #1
    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:
    <!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>
    Code (markup):

    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
     
    hiyatran, Oct 25, 2012 IP
  2. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #2
    For adding this bit of javascript can be called on the click of the add button
    
 // creates the elements
var 1stname = document.createElement('input');
var 2ndname = document.createElement('input');

// Add the elements into the form.
document.getElementById('myForm').appendChild(1stname);
document.getElementById('myForm').appendChild(2ndname);
    Code (markup):
    For remove this piece of code might be helpful
    
document.getElementById('myForm').removeChild(selectedElement);
    Code (markup):
     
    Unni krishnan, Oct 25, 2012 IP