javascript htcontents does not show in html correctly
-
11-11-2019 - |
문제
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?
올바른 솔루션이 없습니다
제휴하지 않습니다 StackOverflow