Question

i have a HTML form, user should be able to add other text boxes for a given question. but before any text input, there is a selection of dropdown menu, textboxes become visible after each selection(also depends on the selection, visible textbox count change). here is the javascript;

    var var1=1;
        function addAffiliation(){
                    var newArea = addNew();
                    var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 
                        + "<br/><br/>"; 
                    document.getElementById(newArea).innerHTML = htcontents;             
                }
        function addNew() {
                    var1=var1+1;       
                    var var2 = document.getElementById('area');
                    var newdiv = document.createElement('div');
                    var divIDName = 'Div #'+ var1;
                    newdiv.setAttribute('id',divIDName);
                    ni.appendChild(newdiv);
                    return divIDName;
               }

but when extra field is added, instead of;

<input placeholder="categories.."
    class="input_box" type="textbox" name="categories[]"
    onchange="display(this, 'field2', 'field3', 'field4');"/>

this is created (double quote location is wrong)

<input placeholder="categories.."  
        class="input_box' type="textbox" name="categories[]" 
        onchange="display(this, "field2', 'field3', 'field4');'/>

and because of that problem, field2-3-4 is not visible..

what to do?

here is the display function

function display(obj,id1,id2,id3) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    document.getElementById(id3).style.display = 'none';
    if ( txt.match(id1) ) {
        document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
        document.getElementById(id2).style.display = 'block';
    }
    if ( txt.match(id3) ) {
        document.getElementById(id3).style.display = 'block';
    }
}

@Aram,

I want to have a dropdown menu;

<option name="first">selection 1</option>
<option name="second">selection 2</option>

if user selects selection 1;

field1:< input name="field1".....>
field2:< input name="field2".....>

if user selects selection 1;

field3:< input name="field3".....>
field4:< input name="field4".....>
field5:< input name="field5".....>

when user finishes filling in the boxes, he might want to add more;

addReference();

then again he sees,

<option name="first">selection 1</option>
    <option name="second">selection 2</option>

and so on.. is that clear now?

Answer 1

solution came very close to what ManseUK suggested,

var htcontents ="<input placeholder='categories..'  
class='input_box' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>"

should be

var htcontents ="<input placeholder=\'categories..\'  //notice slashes
class=\'input_box\' name=\'categories[]\' //notice slashes
onchange=\'display(this, \'field2\', \'field3\', \'field4\');\'/>" //notice slashes

hope that helps anyone..