фев 182010
След написах предната статия за дублиране на input полета, се сблъсках с по-сериозен проблем – дублиране на select полета. Разбира се можех да изброя опциите от select полето в javascript-а, но това изобщо не е добра идея. Още повече, че моите полета са 5-6 с по 10тина опции и се зареждат от базата. След още малко ровене стигнах до нещо, което е по-красиво от предното:
-
function duplicate_select(parent_id, select_id) {
-
var parentDiv = document.getElementById(parent_id);
-
var obj = document.getElementById(select_id).cloneNode(true);
-
parentDiv.appendChild(obj);
-
}
Любовта ми към javascript се задълбочава…
тагове: appendChild • cloneNode • DOM • dropdown • form • javascript • option • select • динамично • дублиране • форма • формуляр
фев 092010
Когато ми се наложи да пиша javascript, обикновено гледам да свърша възможно най-бързо и да се върна на приятелска PHP-територия. Затова когато трябваше да напиша динамично добавяне на input елементи, набързо написах първото, което ми хрумна:
-
<div id="band_container'>
-
<div class="label">Favourite band(s):</div>
-
<div class="text-box"><input type="text" name="bands[]" /></div>
-
<div class="add-button"><a onclick="add_band_input();">add another</a></div>
-
<div class="clear"></div>
-
</div>
-
и съответно в js-файла:
-
function add_band_input() {
-
document.getElementById("band_container").innerHTML += '<div class="label"> </div><div class="text-box"><input type="text" name="bands[]" /></div><div class="clear"></div>';
-
}
Проработи и забравих за него. Няколко дни по-късно забелязах, че ако въведа нещо в input полето и след това натисна линка add another, въведеното от мен изчезва. Това беше проблем. След известно проучване – главно ровене из stackoverflow.com – намерих решение:
-
function add_band_input() {
-
var parentDiv = document.getElementById("band_container");
-
var newDiv1 = document.createElement("div");
-
var newDiv2 = document.createElement("div");
-
var newDiv3 = document.createElement("div");
-
newDiv1.innerHTML = '<div class="label"> </div>';
-
parentDiv.appendChild(newDiv1);
-
newDiv2.innerHTML = '<div class="text-box"><input type="text" name="bands[]" /></div>';
-
parentDiv.appendChild(newDiv2);
-
newDiv3.innerHTML = '<div class="clear"></div>';
-
parentDiv.appendChild(newDiv3);
-
}
Оказа се, че като използвам DOM, кодът е не само по-красив, но и по-стабилен. Това някак ме накара да почувствам непозната до този момент близост с javascript.
тагове: DOM • form • html • innerHTML • input • javascript
