- Forums
- Javascipt
- Javascript - Add More Fields To A Form Dynamically
this simple javascript code shows you how you can add or duplicate a field in html and javascript and even using php in your forms [829], Last Updated: Sat May 18, 2024
sugzr
Tue May 17, 2011
3 Comments
2805 Visits
ok, so you have a form and you want to dynamically add more of the same fields.
for example, i had a form and i wanted to add more users so instead of adding one by one, i could just add all of them at the same time, depending on how many i needed to add, all i had to do was click on the add fields button and the code will insert more fields into my form. well, this is how i did it.
here is the complete code. if you want to create your own, just open your favorite text editor, like notepad. i am using windows, so i will use notepad. so copy and paste the following code into a blank notepad:
<?php
# WWW.WALLPAPERAMA.COM
if($_POST){
echo '<h1>SUBMITTED RESULTS:</h1>';
echo '<PRE>';print_r($_POST);echo '</PRE>';
}else{
echo '<h1>Add More Fields</h1>To add more fields in this form. Click on the Add Button<hr>';
}
?>
<script type="text/javascript">
var counter = 0;
function add_user(FieldName) {
counter++;
var newFields = document.getElementById(FieldName).cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById(FieldName);
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>
<form name="add_a_user" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<div id="user"> Enter User Names:<br> <input type="text" name="user[]" value="" /><br></div>
<div id="add_user" style="display: none;"><input type="text" name="user[]" value="" /><br></div>
<input type="button" id="add_user()" onclick="add_user('add_user')" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</form>
now save the file as
add-fields.php and upload to your PHP website and see it in action.
below i will provide a demo: