InnerHTML стирает значение при добавлении нескольких текстовых полей

0

Я следую этой ссылке

для добавления динамических текстовых полей. Но моя проблема заключается в том, что когда я вставляю значения во второе текстовое поле и затем нажимаю кнопку для следующего текстового поля, значения во втором поле стираются. Поэтому я не могу использовать форму отправки. Есть ли способ исправить это?

HTML

<table style="width:500px;height:auto;">
<tr>
<th>Code-1</th>
<td><input type="text" name="code1" id="code"></td><td><input type="button" value="Add New Code" onClick="insert()"></td>
</tr>
<tr>
<th>Custom Markup-1</th><td>
<input type="text" name="markup1" id="markup"></td></tr>
<tr><th>Vendor-1</th><td>
<select id="v" name="v1">
<option value="0">Please Select..</option>
<?
while($v= mysql_fetch_array($vendor))
{
    echo "<option value=".$v['id'].">".$v['name']."</option>";
}
?>
</select></td>
</tr>
</table>

JS

<script language="javascript">
var i = 1;
function insert()
{
new_div.innerHTML = new_div.innerHTML +"<tr><th>Code-"+(i+1)+"</th><td><input type='text' id='code"+(i+1)+"' name='code"+(i+1)+"'></td></tr>";
new_div.innerHTML = new_div.innerHTML +"<tr><th>Custom Markup-"+(i+1)+"</th><td><input type='text' name='markup"+(i+1)+"'/></td></tr>";
new_div.innerHTML = new_div.innerHTML +"<tr><th>Vendor-"+(i+1)+"</th><td><select id='v'+i name='v"+(i+1)+"'><option value='0'>Please Select..</option><?php while($v= mysql_fetch_array($vendorInfo)){?><option value='<?php echo $v['id']; ?>'><?php echo $v['name']; ?></option><?php }?></select></td></tr>";
new_div.innerHTML = new_div.innerHTML +"<tr><td><hr></td><td><hr></td></tr>";
//document.getElementById('code2').value=document.getElementById('code2').value;
i++;
}
</script>
  • 0
    Разместите свой код. Вы присваиваете innerHTML или объединяете его?
  • 0
    Это тот же код, что и в ответе по ссылке выше. Я присваиваю innerhtml, а не объединяю. Поэтому я думаю, что когда я нажимаю кнопку, innerhtml будет обновлять
Показать ещё 2 комментария
Теги:

3 ответа

1
Лучший ответ

Попробуйте это:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            var txtBId=1;
            function addTB(){
                var div=document.getElementById("tbSet");
                var txt=document.createElement("input");
                txt.setAttribute("type","text");
                txt.setAttribute("id","tb"+(txtBId++));  
                // div.innerHTML=div.innerHTML +"<br>";    <------------------  
                var br=document.createElement("br");
                div.appendChild(br);         
                div.appendChild(txt);
            }
        </script>
    </head>
    <body>
        <form id="myform">

            <div id="tbSet">

            </div>
            <input type="button" value="New TextBox" onclick="addTB();">
            <input type="submit" value="Submit">

        </form>

    </body>
</html>
Поделиться
  • 0
    Спасибо за ваш ответ. У меня все еще есть проблемы с кодом. Если я добавлю три или более текстовых поля, данные будут удалены из всех текстовых полей перед отправкой
  • 0
    Удалить закомментированную строку. Смотрите код выше.
Показать ещё 2 комментария
0

Не добавлять текстовое поле по innerHtml ,. Если вы добавите его, после удаления трех данных. Сделайте это bu createElement, а затем добавьте его.

 function addTB(){
                var div=document.getElementById("tbSet");
                var txt=document.createElement("input");
                txt.setAttribute("type","text");
                txt.setAttribute("id","tb"+(txtBId++));                
                var br=document.createElement("br");
                div.appendChild(br);         
                div.appendChild(txt);
     }
Поделиться
  • 0
    Спасибо за Ваш ответ. Я не знаком с createElement. Позволь мне попробовать. Можем ли мы создать табличные, дианамические выпадающие блоки, используя этот createElement?
  • 1
    createElement может использоваться для любого HTML-тега.
0

Для раскрывающегося списка:

var slId=1;
            function options(name,value){

                 var o=document.createElement("option");
                 o.setAttribute("value",value);
                 o.innerHTML=name;
                 return o;

            }
            function addDropDown(){
                  var div=document.getElementById("tbSet");
                var sl=document.createElement("select");                 
                 var o=options("Hello","hi");            
                 sl.setAttribute("id","sl"+(slId++));
                 sl.appendChild(o);                 
                 div.appendChild(sl);
            }
Поделиться
  • 0
    Могу ли я использовать свой PHP-код (цикл while) для динамического раскрывающегося списка?
  • 0
    Да, ты можешь сделать это.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню