KyLim0211 Ответов: 2

JQuery динамически добавляет текстовое поле


Мой код ниже способен создавать текстовое поле, когда пользователь нажимает на него добавлять кнопка, но я понятия не имею, как добавить 4 текстовых поля вертикально всякий раз, когда пользователь нажимает на кнопку. добавлять Баттон, пожалуйста, помоги мне..

<input class="btn btn-primary" id="btnAdd" type="button" value="Input" onclick="AddTextBox()">
    <br />
    <br />
    <div id="TextBoxContainer">
    </div>
    <br />
    <asp:Button ID="btnPost" Text="Submit" CssClass="btn btn-success" runat="server" OnClick="Post" />


<script type="text/javascript">
       function GetDynamicTextBox(value) {
           return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
                   '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
       }
       function AddTextBox() {
           var div = document.createElement('DIV');
           div.innerHTML = GetDynamicTextBox("");
           document.getElementById("TextBoxContainer").appendChild(div);
       }

       function RemoveTextBox(div) {
           document.getElementById("TextBoxContainer").removeChild(div.parentNode);
       }

       function RecreateDynamicTextboxes() {
           var values = eval('<%=Values%>');
           if (values != null) {
               var html = "";
               for (var i = 0; i < values.length; i++) {
                   html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
               }
               document.getElementById("TextBoxContainer").innerHTML = html;
           }
       }
       window.onload = RecreateDynamicTextboxes;
   </script>


protected void Post(object sender, EventArgs e)
    {
        string[] textboxValues = Request.Form.GetValues("DynamicTextBox");
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        this.Values = serializer.Serialize(textboxValues);
        string message = "";
        foreach (string textboxValue in textboxValues)
        {
            message += textboxValue + "\\n";
        }
        ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);
    }


Что я уже пробовал:

а как c# читает текстовое поле 4 по вертикали? действительно понятия не имею, как это закодировать.

2 Ответов

Рейтинг:
2

Karthik_Mahalingam

просто добавьте к нему петлю.

function AddTextBox() {
          for (var i = 0; i < 4; i++) {
              var div = document.createElement('DIV');
              div.innerHTML = GetDynamicTextBox("");
              document.getElementById("TextBoxContainer").appendChild(div);
          }
       }


Рейтинг:
0

Karankumar Shah

Используйте приведенный ниже код, когда пользователь нажимает кнопку Добавить.

$масштаб.AddBookDiv = функция () {
ClearFields();
$масштаб.Действие = " Добавить";
$область действия.divBook = истина;
}

где AddBookDiv-это функция привязки к add с помощью ng-click= " AddBookDiv()" в представлении (. cshtml).