Please Help in Dynamic Adding of Input Field

Discussion in 'JavaScript' started by sweetguyzzz, Jan 17, 2010.

0
  1. #1
    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

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

<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>

<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>
</form>
</body>
</html>
    HTML:
    ==================================================================

    .

    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);
MainDiv.removeChild(OldDiv);
}
PreviousNoOfFields.value = AddFields;

if (AddFields && AddFields > 0) {
for (i=1;i<=AddFields;i++) {
var NewDiv = document.createElement('div');
NewDiv.setAttribute("id",NewDivIdName+i);
NewDiv.setAttribute("class","EachLineDiv");
NewDiv.innerHTML = "Field "+i+":<input type='text' name='alt"+i+"' value='' />";
MainDiv.appendChild(NewDiv);
}
}
}
    Code (markup):
    =====================================================================
     
    sweetguyzzz, Jan 17, 2010 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    Replace the code of the extra.js file to

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

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

if (AddFields && AddFields > 0) {
for (i=1;i<=AddFields;i++) {
var NewDiv = document.createElement('div');
NewDiv.setAttribute("id",NewDivIdName+i);
NewDiv.setAttribute("class","EachLineDiv");
NewDiv.innerHTML = "Field "+i+":<input type='text' name='alt"+i+"' value='' />";
MainDiv.appendChild(NewDiv);
}
}
}
    Code (markup):
     
    s_ruben, Jan 17, 2010 IP
  3. sweetguyzzz

    sweetguyzzz Active Member

    Messages:
    35
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    66
    #3
    Hey s_ruben thanks

    You got my mistake and I have corrected it and it works...

    Thanks for your help
     
    sweetguyzzz, Jan 17, 2010 IP