Функция Javascript для добавления / удаления полей - PullRequest
Новая
       26

Функция Javascript для добавления / удаления полей

3 голосов
/ 22 марта 2012

Я не очень разбираюсь в JavaScript, но этот код был похож на то, что я искал, особенно там, где он содержит ссылку «Удалить поле».Вот функция Javscript: 

//Add more fields dynamically.
function addField(field,area,limit) {
    if(!document.getElementById) return; //Prevent older browsers from getting any further.
    var field_area = document.getElementById(area);
    var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
    //Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
    //      field given in the argument is 'friend_' the last id will be 'friend_4'.
    var last_item = all_inputs.length - 1;
    var last = all_inputs[last_item].id;
    var count = Number(last.split("_")[1]) + 1;

    //If the maximum number of elements have been reached, exit the function.
    //      If the given limit is lower than 0, infinite number of fields can be created.
    if(count > limit && limit > 0) return;

    if(document.createElement) { //W3C Dom method.
        var li = document.createElement("li");
        var input = document.createElement("input");
        input.id = field+count;
        input.name = field+count;
        input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
        li.appendChild(input);
        field_area.appendChild(li);
    } else { //Older Method
        field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
    }
}

Вот HTML-код для формы: 

<form name="frm" method="POST">
<strong>Neutral List</strong><br />
<ol id="neutrals_area">
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
</ol>
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
</form>

Однако я хотел бы, чтобы дополнительные поля были сгенерированы с помощью кода «Удалить ссылку»,не только с кодом в скрипте.Я понимаю, что пользовательские функции должны быть скорректированы, чтобы включить это поведение, но я испытываю всевозможные проблемы, пытаясь заставить эту функцию работать.Это кажется простым сделать в старом методе, следуя "} else {" в нижней части функции addField, отредактировав код для чтения: 

} else { //Older Method
    field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>";
}

Однако я озадачен тем, каквключить его в метод W3C DOM?

Ответы [ 3 ]

1 голос
/ 22 марта 2012

Удалить те условия if(!document.getElementById) и if(document.createElement).Каждый браузер поддерживает их, и те, которые не заслуживают поддержки (пусть они выдают свои ошибки).

Чтобы добавить метод remove к элементам, созданным DOM, просто используйте свойство onclick.Вы также можете использовать стандартно-совместимую addEventListner () , но это требует некоторых обходных путей для IE.См. Разделы Legacy Internet Explorer и attachEvent и Старый способ регистрации прослушивателей событий .

Таким образом, код будет 

...
li.appendChild(document.createTextNode(" ");
var a = document.createElement("a");
a.appendChild(document.createTextNode("Remove Field"));
a.style = "cursor:pointer;color:blue;";
a.onclick = function() {
    // this.parentNode.parentNode.removeChild(this.parentNode);
    // nay. we have better references to those objects:
    field_area.removeChild(li);
};
li.appendChild(a);

http://jsfiddle.net/wtX7Y/2/

1 голос
/ 22 марта 2012

Я собираюсь расходиться с Каппой и настоятельно рекомендую вам продолжать делать то, что вы делаете. JQUery отлично подходит для того, что это такое, но это слишком часто, и очень важно знать, что вы делаете и почему вы делаете это при работе с javascript. Особенно, если вы учитесь, чтобы получить работу в этом секторе, вам понадобится прямой JavaScript.

Хорошие новости, то, что вы пытаетесь сделать, на самом деле довольно просто! 

    var li = document.createElement("li");
    var input = document.createElement("input");
    input.id = field+count;
    input.name = field+count;
    input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
    li.appendChild(input);
    field_area.appendChild(li);
    //create the removal link
    removalLink = document.createElement('a');
    removalLink.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode)
    }
    removalText = document.createTextNode('Remove Field');
    removalLink.appendChild(removalText);
    li.appendChild(removalLink);

Вот код на JSFiddle: http://jsfiddle.net/r9bRT/

0 голосов
/ 22 марта 2012

Я настоятельно рекомендую вам взглянуть на jQuery (или похожий: прототип, motools и т. Д.)

Они имеют полнофункциональные функции манипулирования DOM, что делает сложным то, что вы спрашиваете, как написание 1 строки js.

...