javascript htcontents не отображается в html правильно - PullRequest
Новая
       18

javascript htcontents не отображается в html правильно

0 голосов
/ 23 февраля 2012

У меня есть HTML-форма, пользователь должен иметь возможность добавлять другие текстовые поля для данного вопроса.но перед любым вводом текста есть выпадающее меню, текстовые поля становятся видимыми после каждого выбора (также зависит от выбора, видимого изменения количества текстовых полей).вот 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;
               }

, но при добавлении дополнительного поля вместо; 

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

это создается (неправильное расположение в двойных кавычках) 

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

и из-за этой проблемы поле 2-3-4 не видно ..

что делать?

вот функция отображения 

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,

Я хочу иметь раскрывающееся меню; 

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

, если пользователь выбирает выбор 1; 

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

, если пользователь выбирает выбор 1; 

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

когда пользователь заканчивает заполнять поля, он может захотеть добавить еще; 

addReference();

, затем он снова видит, 

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

и так далее ... это ясно?сейчас?

Ответы [ 3 ]

0 голосов
/ 23 февраля 2012

Я не был уверен, что вы там сделали, потому что в addAffiliation рядом со строкой были синтаксические ошибки.Вы должны использовать одинарные кавычки для всей строки, двойные кавычки для значений атрибутов и использовать + для объединения переменных js, где это необходимо.Вы должны избегать любых кавычек, которые совпадают с кавычками, которые определены в строке \.

Кроме того, я думаю, что ni должно читаться var2.В общем, никогда не называйте переменную как variableX, потому что она нам ничего не говорит (мы знаем, что это переменная!).Также я хотел бы рассмотреть возможность использования jQuery для простого взаимодействия с элементами.

См. http://jsfiddle.net/ntCGc/.

var var1=1;
function addAffiliation(){
    var newArea = addNew();
    var htcontents ='<input placeholder="categories.." class="input_box" type="textbox" name="categories" onchange="javascript: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);
    var2.appendChild(newdiv);
    return divIDName;
}

addAffiliation();
​

0 голосов
/ 28 февраля 2012

решение очень близко подошло к тому, что предложил ManseUK, 

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

должно быть 

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

надеюсь, что это помогает кому-либо ..

0 голосов
/ 23 февраля 2012

Изменение 

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

до 

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

то есть экранировать двойные кавычки в строке.

...