Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Please Help in Dynamic Adding of Input Field

I have used a dynamic adding java script but having some trouble with it



7:24 pm on Jan 17, 2010 (gmt 0)

5+ Year Member

I have made two fields , each is for dynamic adding of fields. I like that if user inputs in one field then its given number of fields is show in specified location and user input from another input field then its desired results output on the location but if user again submits the query then I have to remove that old number of fields and add new given number of field. I have a script working in first field but failing in second field.

In first field user input many times and all of the time it works but in second field first time desired result is shown but next time not removing the fields as well as not adding new ones

Can anyone please help in this , thanks in advance

I used HTML coding

<head><script src='javascripts/extra.js' type='text/javascript'></script></head>

<form name='form1' enctype='multipart/form-data' method='post' action=''>
<input id='NoofFunnyImages' type='text' name='imagesfield' value='' />
<input id='FunnyImagesCount' type='hidden' name='countfield' value='0' />
<input type='button' value='Submit' onclick='AddFields("FunnyImage")' />
<div id='MyDivFunnyImages'></div>

<form name='form2' enctype='multipart/form-data' method='post' action=''>
<input id='NoofGalleryImages' type='text' name='imagesfield2' value='' />
<input id='GalleryImagesCount' type='hidden' name='countfield2' value='0' />
<input type='button' value='Submit' onclick='AddFields("GalleryImage")' />
<div id='MyDivGalleryImages'></div>


and javascript is


function AddFields(fieldType) {
if (fieldType == "FunnyImage") {
var MainDiv = document.getElementById('MyDivFunnyImages');
var AddFields = document.getElementById('NoofFunnyImages').value;
var PreviousNoOfFields = document.getElementById('FunnyImagesCount');
var NewDivIdName = document.getElementById("divFunnyImage");
else if (fieldType == "GalleryImage") {
var MainDiv = document.getElementById('MyDivGalleryImages');
var AddFields = document.getElementById('NoofGalleryImages').value;
var PreviousNoOfFields = document.getElementById('GalleryImagesCount');
var NewDivIdName = document.getElementById("divGalleryImage");

for (j=1;j<=PreviousNoOfFields.value;j++) {
var OldDiv = document.getElementById(NewDivIdName+j);
PreviousNoOfFields.value = AddFields;

if (AddFields && AddFields > 0) {
for (i=1;i<=AddFields;i++) {
var NewDiv = document.createElement('div');
NewDiv.innerHTML = "<input type='text' name='alt"+i+"' value='' />";


11:41 pm on Jan 17, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

Try changing
NewDiv.innerHTML = "<input type='text' name='alt"+i+"' value='' />";
NewDiv.innerHTML = "<input type='text' name='"+fieldType+"alt"+i+"' value='' />";

having two fields named 'alt1' etc likely to cause problems


11:44 pm on Jan 17, 2010 (gmt 0)

5+ Year Member

1. Don't name variables inside of functions same name as function it's self, change the variable "AddFields" to "AddFieldsVal" or something.
2. In the loops, use j <= parseInt(PreviousNoOfFields.value) and i <= parseInt(AddFieldsVal) to ensure they are used as numbers -remember they (PreviousNoOfFields.value and AddFieldsVal [formerly AddFields]) are coming from form inputs and are treated as strings otherwise.


5:25 am on Jan 18, 2010 (gmt 0)

5+ Year Member

Hey daveVk and astupidname Thanks for your replies...

I tries both of your ideas but my problem is not solved...

I post same on other forum and get the correct answer from their but I am also thankful to both of you for trying to help me out.. World needs person like you thanks


Featured Threads

Hot Threads This Week

Hot Threads This Month