Подскажите как можно в загруженную страницу добавить например по нажатию (+) нe oграниченое количество дополнительных полей, а по нажатию например (-) удалять те возле которых нажат символ? Это как в яндекс или гмаил почте реализованы строки загрузки изображений...
HTML: <html><body> <script type="text/javascript" language="javascript"> var count = 1; function AddElement() { var arr = new Array(); for(var e=1; e<count+1; e++) arr[e] = document.getElementById('name'+e).value; arr[e] = ''; count++; var element = document.getElementById('paste'); element.innerHTML = ''; for(var e=1; e<count+1; e++) element.innerHTML += '<input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" /><br /><br />'; } </script> <form action=""> <div id="paste"> <input type="text" name="name1" id="name1" /><br /><br /> </div> <a href="javascript:AddElement();">Добавить поле</a><br /><br /> </form> </body></html> Такое вот набросал. Можно было бы DOM использовать, но он то криво то по-разному на браузерах работает. Думаю удаление сам напишешь.
Спасибо большое! Я пробовал без массива делать просто значение писал в невидимое поле и с ним работал типа: [js]function add_pole() { var i = document.table.pole.value; i = i + 1; document.getElementById('add_phone').innerHTML += '<input type="text" name="name'+i+'" value=""><br>'; document.table.pole.value = i; }[/js] Ваш способ намного аккуратнее и добаляется только одно поле, у меня обновлялись все, даже уже заполненные. Во торой части я столкнулся проблемой удаления куска кода из массива так как -= с кодом не работает [js]document.getElementById('add_phone').innerHTML -= '<input type="text" name="name'+i+'" value=""><br>'[/js] Подскажите как удалять поля поштучно?
Для таблицы - элемента table есть коллекции cells & rows. Если просто из дива удалять, то [js] var parent = document.getElementById("inputdiv"); var inputs = parent.getElementsByTagName("input"); parent.removeChild(divarr[0]); // для первого инпута parent.removeChild(divarr[(inputs.length-1)]); // для последнего [/js]
DZEN Не могу разобраться — подскажите как в обратном порядке можно по одной удалить строки созданные при помощи вашего кода?
HTML: <html><body> <script type="text/javascript" language="javascript"> var count = 1; function AddElement() { var arr = new Array(); for(var e=1; e<count+1; e++) arr[e] = document.getElementById('name'+e).value; arr[e] = ''; count++; var element = document.getElementById('paste'); element.innerHTML = ''; for(var e=1; e<count+1; e++) element.innerHTML += '<input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" /><br /><br />'; } function RemElement() { if (count == 1) return; var arr = new Array(); for(var e=1; e<count; e++) arr[e] = document.getElementById('name'+e).value; arr[e] = ''; count-=1; var element = document.getElementById('paste'); element.innerHTML = ''; for(var e=1; e<count+1; e++) element.innerHTML += '<input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" /><br /><br />'; } </script> <form action=""> <div id="paste"> <input type="text" name="name1" id="name1" /><br /><br /> </div> <a href="javascript:AddElement();">Добавить поле</a><br /><br /> <a href="javascript:RemElement();">Удалить поле</a><br /><br /> </form> </body></html>
DZEN А если например сразу по три поля добавлять, как передать value и других полей в var arr ? HTML: <html><body> <script type="text/javascript" language="javascript"> var count = 1; function AddElement() { var arr = new Array(); for(var e=1; e<count+1; e++) arr[e] = document.getElementById('name'+e).value; arr[e] = ''; count++; var element = document.getElementById('paste'); element.innerHTML = ''; for(var e=1; e<count+1; e++) element.innerHTML += '<div><input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" ><input type="text" name="dva'+e+'" id="dva'+e+'" ><input type="text" name="tri'+e+'" id="tri'+e+'" /></div>'; } function RemElement() { if (count == 1) return; var arr = new Array(); for(var e=1; e<count; e++) arr[e] = document.getElementById('name'+e).value; arr[e] = ''; count-=1; var element = document.getElementById('paste'); element.innerHTML = ''; for(var e=1; e<count+1; e++) element.innerHTML += '<div><input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" ><input type="text" name="dva'+e+'" id="dva'+e+'" ><input type="text" name="tri'+e+'" id="tri'+e+'" /></div>'; } </script> <form action=""> <div id="paste"> <div><input type="text" name="name1" id="name1" ><input type="text" name="dva1" id="dva1" ><input type="text" name="tri1" id="tri1" /></div> </div> <a href="javascript:AddElement();">Добавить поле</a><br /><br /> <a href="javascript:RemElement();">Удалить поле</a><br /><br /> </form> </body></html> Пробовал вот так, не работает: HTML: function AddElement() { var arr = new Array(); var dva_arr = new Array(); var tri_arr = new Array(); for(var e=1; e<count+1; e++) arr[e] = document.getElementById('name'+e).value; arr[e] = ''; dva_arr[e] = document.getElementById('dva'+e).value; dva_arr[e] = ''; tri_arr[e] = document.getElementById('tri'+e).value; tri_arr[e] = ''; count++; var element = document.getElementById('paste'); element.innerHTML = ''; for(var e=1; e<count+1; e++) element.innerHTML += '<div><input type="text" name="name'+e+'" value="'+arr[e]+'" id="name'+e+'" ><input type="text" name="dva'+e+'" id="dva'+e+'" value="'+dva_arr[e]+'"><input type="text" name="tri'+e+'" id="tri'+e+'" value="'+tri_arr[e]+'" /></div>'; }