Javascript, создающий новое текстовое поле при нажатии кнопки

Question

У меня есть функция javascript, в которой я пытаюсь создать новое текстовое поле при нажатии кнопки. Но новая строка создается под текущей строкой, а данные из верхней строки передаются в строку ниже. Я пытаюсь, чтобы первая строка не была установлена ​​в нуль, а данные из первой строки reamins как есть, и вторая новая строка создается пустым. Может кто-нибудь помочь мне PLS.

Мой код

function GetDynamicTextBox() { 
      var value1 = document.getElementById("txtName").value; 
      var value2 = document.getElementById("txtEmail").value; 
      var value3 = document.getElementById("txtPhone").value; 
      return '<div> <input name="txtdynamicname" class="textboxSmall" id="txtdynamicname" type="text" value= "' + value1 + '" />&nbsp;' + 
       '<input name = "txtdynamicemail" class="textboxSmall" id="txtdynamicemail" type="text" value = "' + value2 + '" />&nbsp;' + 
        '<input name = "txtdynamicphone" class="textboxSmall" id="txtdynamicphone" type="text" value = "' + value3 + '" />&nbsp;' + 
         '<input type="Image" id="txtdynamicbutton" src="Images/Minus.jpg" CausesValidation="false" onclick = "javascript:return RemoveTextBox(this)" /> </div>'; 
     } 

     //Add Textboxes in the div - New Data + Existing Data 
     function AddTextBox() { 
      if (document.getElementById("txtName").value != "") { 
       if (PassengerLimit > 1) { 
        PassengerLimit = PassengerLimit - 1; 
        //Get Text 

        var ExistingData = document.createElement('DIV'); 
        ExistingData.innerHTML = Container.innerHTML; 

        var NewData = document.createElement('DIV'); 
        // NewData.innerHTML = GetDynamicTextBox() + Container.innerHTML; 
        NewData.innerHTML = Container.innerHTML + GetDynamicTextBox(); 



        //Clear All Data 
        Container.innerHTML = ""; 

        //append New Data 
        Container.innerHTML = NewData.innerHTML; 

        //append existing Data 
        // Container.appendChild(ExistingData); 


        document.getElementById("txtName").value = ""; 
        document.getElementById("txtEmail").value = ""; 
        document.getElementById("txtPhone").value = ""; 
       } 
       else { 
        alert("Sorry! You can add only 10 Passengers detail"); 
       } 


      } 
      else 
      { 
       alert("Sorry! Please fill passengers details."); 
      // return true; 
      } return false; 
     } 

Первое изображение

---

---

Второе изображение

Answer 1

В GetDynamicTextBox() вы можете попробовать получить простую структуру html, что бы вы хотели, без значений init и использовать ее.

функция GetDynamicTextBox() {

 return '<div> <input name="txtdynamicname" class="textboxSmall" id="txtdynamicname" type="text" value="" />&nbsp;' + 
      '<input name = "txtdynamicemail" class="textboxSmall" id="txtdynamicemail" type="text" value ="" />&nbsp;' + 
       '<input name = "txtdynamicphone" class="textboxSmall" id="txtdynamicphone" type="text" value ="" />&nbsp;' + 
        '<input type="Image" id="txtdynamicbutton" src="Images/Plus.jpg" CausesValidation="false" onclick = "javascript:return AddTextBox()" /> </div>'; 
    } 

    //Add Textboxes in the div - New Data + Existing Data 
    function AddTextBox() { 
     if (document.getElementById("txtName").value != "") { 
      if (PassengerLimit > 1) { 
       PassengerLimit = PassengerLimit - 1; 
       //Get Text 

       var ExistingData = document.createElement('DIV'); 
       ExistingData.innerHTML = Container.innerHTML; 

       var NewData = document.createElement('DIV'); 
       // NewData.innerHTML = GetDynamicTextBox() + Container.innerHTML; 
       NewData.innerHTML = Container.innerHTML + GetDynamicTextBox(); 



       //Clear All Data 
       Container.innerHTML = ""; 

       //append New Data 
       Container.innerHTML = NewData.innerHTML; 

       //append existing Data 
       // Container.appendChild(ExistingData); 


      } 
      else { 
       alert("Sorry! You can add only 10 Passengers detail"); 
      } 


     } 
     else 
     { 
      alert("Sorry! Please fill passengers details."); 
     // return true; 
     } return false; 
    }