动态重复表单元素 [英] Dynamically Repeating Form Elements

问题描述

我建立一个在线的CV应用程序，允许用户以添加由多个文本框和标签的新的教育部分

I building an online CV application that allows the user to add new education sections that consist of a number of text boxes and labels.

什么是动态创建表单元素和阅读他们根据用户是否击中的[添加另一个]按钮的最佳方式。

What is the best way of dynamically creating the form elements and reading them depending on whether the user hits an [Add another] button.

推荐答案

1）服务器端：在你的asp.net按钮的单击事件，创建所需的控件（文本框，下拉等）动态地添加到一个conainer像面板。

1) server side :In your asp.net button click event , Create the required controls (text box, drop down etc..) dynamically and add that to a conainer like a Panel.

2）客户端：使用JavaScript创建元素，并追加到现有的容器（DIV）。在这种方法中，您可以节省服务器往返，因为你是在客户端做的。

2)Client Side : Using javascript create elements and append to an existing container (div). In this approach, you save a server round trip because you are doing it in the client side.

下面是使用jQuery，这将给你一个想法，一个JavaScript样本。

Here is a javascript sample using jquery which will give you an idea.

HTML

<div id="divContainer">    
   Education 1 <input id="txt1" type="text" class="txtBox"/>
</div>
<input id="btn1" type="button" value="Add Another" />

的JavaScript

var counter=1;
$("#btn1").click(function(){
    counter++;    
    $("#divContainer").append("<br/> Education "+counter + " <input type='text' id='txt"+counter+"' class='txtBox' />");              
 });

下面是工作示例： http://jsfiddle.net/huYMT/13/

这篇关于动态重复表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！