Category: >> JavaScript >> Add more fields to a form dynamically Bookmark and Share

<< lastnext >>

Snippet Name: Add more fields to a form dynamically

Description: Shows how to add more fields to a form by clicking a link or button.

Also see:
» Add a hidden field to a form dynam...
» Validate file extensions in upload...
» Add and Remove classes in Javascri...
» Easy way to break apart an email a...
» Date Picker Form in ASP
» Check for a Valid Email Address (V...
» Check For A Valid Email Address
» Getting Values Submitted From A Fo...
» Add PSOUG Search to SQL Developer
» Format money as millions, billions...
» Dynamically add and remove elements
» Convert UK Dates To mySQL Format D...
» Add a period at the end of a strin...
» Calculate the difference between t...
» Dynamically Add/Remove rows in HTM...
» RMAN: Format Directives
» USER - connection information
» USER - User Information 2
» USER Information
» SQL*Plus formatting
» Create string by formatting an amo...
» Check email address
» Date Functions: ADD_MONTHS
» Date Functions: Add and Subtract f...
» List security related profile info...
» Currency display formatting functi...
» Nicely Format File Size
» GET and POST variables in hidden f...
» Add dashes to credit card numbers

Comment: (none)

Highlight Mode: HTML4STRICT
Last Modified: January 30th, 2011

 var id = 2;
 function add_phone_field()
  var obj = document.getElementById("phone");
  var data = obj.innerHTML;
  data += "<input type='text' name='person_phone[]' id='person_phone"+id+"' /><br />";
  obj.innerHTML = data;
 <form method="post" action="" enctype="multipart/form-data">
  <table width="800" border="0" dir="rtl" style="direction:ltr;">
      <td scope="col" style="direction:rtl;"><label for="textfield"> name</label>
        <div align="right">
          <input type="text" name="person_name" id="person_name"/>
      <td style="direction:rtl;"><label for="textfield">job</label>
        <div align="right">
          <input type="text" name="person_job" id="person_job" />
      <td style="direction:rtl;"><label for="label">mobile</label>
        <div align="right">
          <input type="text" name="person_mobile" id="person_mobile" />
      <td style="direction:rtl;"><label for="label2" >phone</label>
        <span style="color:#00f;font-size:20px;font-weight:bold;cursor:pointer;" onclick="add_phone_field()">[+]</span>
        <div id="phone" align="right">
          <input type="text" name="person_phone[]" id="person_phone1" /><br />
      <td style="direction:rtl;"><label for="label3">email</label>
        <div align="right">
          <input name="person_email" type="text" id="person_email"   />
      <td><label for="label4"></label>
        <div align="right"></div></td>
          <td colspan="2"><p align="right">
              <input name="add" type="submit" id="add" value="add" />
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© | users online: 9