Javascript在按钮单击时创建新文本框

Question

我有一个javascript函数，我试图在按钮点击时创建一个新的文本框。但是新行正在当前行下面创建，而来自顶行的数据正在传输到下面的行。  我正在尝试一种方法，第一行不设置为null，第一行的数据按原样重新计算，第二行创建为空白。 任何人都可以帮助我。

我的代码

 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;
    }