使用jQuery动态添加/删除输入字段

更新时间：2023-10-05 21:48:40

我冒昧地把jsFiddle放在一起，使用jQuery构建自定义表单的功能。这里是...

编辑：更新了jsFiddle，为每个字段添加删除按钮。

编辑：根据最后评论中的请求，来自jsFiddle的代码如下。

编辑：根据Abhishek的评论，我更新了jsFiddle（以及下面的代码），以满足可能出现重复字段ID的情况。

HTML：

< fieldset id =buildyourform> < legend>建立您自己的表单！< / legend> < / fieldset> < input type =buttonvalue =Preview formclass =addid =preview/> < input type =buttonvalue =Add a fieldclass =addid =add/>

JavaScript：

  $（document）.ready（function（）{
 $（＃add）。click（function（）{
 var lastField = $ #buildyourform div：last）; 
 var intId =（lastField&& lastField.length&&& lastField.data（idx）+ 1）|| 1; 
 var fieldWrapper = $（< div class = \fieldwrapper \id = \field+ intId +\/>）; 
 fieldWrapper.data（idx，intId） ; 
 var fName = $（< input type = \text \class = \fieldname \/>）; 
 var fType = $（<选择class = \fieldtype \>< option value = \checkbox \> Checked< / option>< option value = \textbox \> Text< / option> < option value = \textarea \>段落< / option>< / select>）; 
 var removeButton = $（< input type = \button \class = \remove \value = \-\/&g （）; 
 removeButton.click（function（）{
 $（this）.parent（）。remove（）; 
}）; 
 fieldWrapper.append（fName）; 
 fieldWrapper.append（fType）; 
 fieldWrapper.append（removeButton）; 
 $（＃buildyourform）。append（fieldWrapper）; 
}）; 
 $（＃preview）。click（function（）{
 $（＃yourform）。remove（）; 
 var fieldSet = $（< fieldset id = \\ \\yourform \>< legend>您的表单< / legend>< / fieldset>）; 
 $（＃buildyourform div）。each（function（）{
 var替换（field，）; 
 var label = $（< label for = \+ id + \>+ $（this）.find（input.fieldname）。first（）.val（）+< / label>）; 
 var input; 
 switch（$（this）.find（select.fieldtype）。first（）。val（））{
 casecheckbox：
 input = $（< input type = \ checkbox\id = \+ id +\name = \+ id +\/>）; 
 break; 
 casetextbox ：
 input = $（< input type = \text \id = \+ id +\name = \+ id +\/ >）; 
 break; 
 casetextarea：
 input = $（< textarea id = \+ id +\name = \+ id +\> ;&LT; / textarea的>中）; 
休息; 
} 
 fieldSet.append（label）; 
 fieldSet.append（input）; 
}）; 
 $（body）。append（fieldSet）; 
}）; 
}）;

CSS：

  body 
 {
 font-family：Gill Sans MT; 
 padding：10px; 
} 
 fieldset 
 {
 border：solid 1px＃000; 
 padding：10px; 
 display：block; 
明确：两者; 
 margin：5px 0px; 
} 
 legend 
 {
 padding：0px 10px; 
背景：黑色; 
颜色：#FFF; 
} 
 input.add 
 {
 float：right; 
} 
 input.fieldname 
 {
 float：left; 
 clear：left; 
 display：block; 
 margin：5px; 
} 
 select.fieldtype 
 {
 float：left; 
 display：block; 
 margin：5px; 
} 
 input.remove 
 {
 float：left; 
 display：block; 
 margin：5px; 
} 
 #yourform标签
 {
 float：left; 
 clear：left; 
 display：block; 
 margin：5px; 
} 
 #yourform input，#yourform textarea 
 {
 float：left; 
 display：block; 
 margin：5px; 
}

I would like to use jquery to build a dynamic add/ remove form. IT should look like:

Name Type Required?

The example input :

Name Type Required?
Tony Admin checked (checkbox) Delete <==press the button will delete the row

What i have got is a example of add/ remove input box how can it convert to my idea? Do i have to use multi coloumn table? Thank you for kindly help

    <html>
<head>
<title>jQuery add / remove textbox example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
    </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

I took the liberty of putting together a jsFiddle illustrating the functionality of building a custom form using jQuery. Here it is...

EDIT: Updated the jsFiddle to include remove buttons for each field.

EDIT: As per the request in the last comment, code from the jsFiddle is below.

EDIT: As per Abhishek's comment, I have updated the jsFiddle (and code below) to cater for scenarios where duplicate field IDs might arise.

HTML:

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a field" class="add" id="add" />

JavaScript:

$(document).ready(function() {
    $("#add").click(function() {
        var lastField = $("#buildyourform div:last");
        var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        fieldWrapper.data("idx", intId);
        var fName = $("<input type=\"text\" class=\"fieldname\" />");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
    $("#preview").click(function() {
        $("#yourform").remove();
        var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
        $("#buildyourform div").each(function() {
            var id = "input" + $(this).attr("id").replace("field","");
            var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
            var input;
            switch ($(this).find("select.fieldtype").first().val()) {
                case "checkbox":
                    input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textbox":
                    input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
                    break;
                case "textarea":
                    input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
                    break;    
            }
            fieldSet.append(label);
            fieldSet.append(input);
        });
        $("body").append(fieldSet);
    });
});

CSS:

body
{
    font-family:Gill Sans MT;
    padding:10px;
}
fieldset
{
    border: solid 1px #000;
    padding:10px;
    display:block;
    clear:both;
    margin:5px 0px;
}
legend
{
    padding:0px 10px;
    background:black;
    color:#FFF;
}
input.add
{
    float:right;
}
input.fieldname
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
select.fieldtype
{
    float:left;
    display:block;
    margin:5px;
}
input.remove
{
    float:left;
    display:block;
    margin:5px;
}
#yourform label
{
    float:left;
    clear:left;
    display:block;
    margin:5px;
}
#yourform input, #yourform textarea
{
    float:left;
    display:block;
    margin:5px;
}

上一篇 : ：JSP Bean通信下一篇 : JAX-RS将实体作为JAXB对象和String进行获取

使用jQuery动态添加/删除输入字段

相关阅读

推荐文章