homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Please Help in Dynamic Adding of Input Field
I have used a dynamic adding java script but having some trouble with it

5+ Year Member

Msg#: 4062503 posted 7:24 pm on Jan 17, 2010 (gmt 0)

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='' />";



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4062503 posted 11:41 pm on Jan 17, 2010 (gmt 0)

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


5+ Year Member

Msg#: 4062503 posted 11:44 pm on Jan 17, 2010 (gmt 0)

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+ Year Member

Msg#: 4062503 posted 5:25 am on Jan 18, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved