用jQuery创建新的表单域 [英] Create new form fields with jQuery

问题描述

我有一个表单，从2个文本输入开始。标准场景是用户在一个字段中输入一个数字，并在另一个字段中输入他/她的名字，然后该页面将被更新（不重新加载）。但是在某些情况下，用户可能希望输入连接到同一个名称的多个数字，并且通过用户单击文本框旁边的添加另一个链接将实现该方式。

当用户单击添加另一个链接时，需要将文本框中的值插入到新的（动态创建的）文本字段中，文本字段用户输入的号码应该重置为默认值。用户可以在发出警报之前输入10个号码，通知他/她提供更有效的方法来执行此操作。

我对这是如何完成（可以完成）jQuery，如果有人可以帮忙，这将是很棒的。

这是我正在使用的html：

 < div id =searchFieldsclass =control-group inlineForm> 
< label for =regNr> Regnr< / label> < input type =textid =regNrclass =uprCaseplaceholder =Regnr。 size =6maxlength =6> 
< span class =addRegNr>< a href =＃>添加另一个< / a>< / div> 
< label for =poNr> PO.nr< / label> < input type =textid =poNrplaceholder =PO.nr。 size =12maxlength =12> 
< input type =buttonvalue =GET INFOclass =lastid =getBaseInf> 
< / div> 
  

http://jsfiddle.net/RgKV9/

干杯！

编辑更新

我喜欢Aske G的例子，并对其进行了一些修改。这是我正在使用的新代码， jsfiddle.net/SDpfy 虽然我设法做了一些小的更改AskeG的代码我不知道如何添加唯一的ID和每个生成的字段的个别删除链接，最终在篮子里。另外，如何将生成的字段设置为只读方式，并将其显示在购物篮中，并将其动画化？

解决方案

这个博客文章 jQuery - 动态添加表单元素 Charlie Griefer ，您可以尝试以下操作：

标记：

 < div id =searchFields class =control-group inlineForm> 
< form id =myForm> 
< div id =input1style =margin-bottom：4px;类= clonedInput > 
< label for =regNr> Regnr< / label> ;:< input type =textname =regNrplaceholder =Regnr。 size =6maxlength =6/> 
< label for =poNr> PO.nr< / label> ;:< input type =textid =poNrplaceholder =PO.nr size =12maxlength =12> 
< / div> 
 
< div> 
< input type =buttonid =btnAddvalue =添加另一个Reg字段/> 
< input type =buttonid =btnDelvalue =remove fields/> 
< / div> 
< input type =buttonvalue =GET INFOclass =lastid =getBaseInf> 
< / form> 
< / div> 
  

Javascript 点击（function（）{
var num = $（'。clonedInput'）$（

$ b

 .length; //我们目前有多少可复制输入字段
 var newNum = new Number（num + 1）; //添加新输入字段的数字ID 
 
 //通过clone（）创建新元素，并使用newNum值操作它的ID 
 var newElem = $（'＃input'+ num）.clone（）。attr（'id'，'input'+ newNum ）; 
 
 //操作新元素中输入的name / id值
 newElem.children（'：first'）。attr（'id'，'regNr'+ newNum ）.attr（'regNr'，'regNr'+ newNum）; 
 
 //在最后一个可复制输入字段后插入新元素
 $（'＃input'+ num） .after（newElem）; 
 
 //启用删除按钮
 $（'＃btnDel'）。removeAttr（'disabled'）; 
 
 / / busin ess规则：只能添加5个名字
 if（newNum == 5）
 $（'＃btnAdd'）。attr（'disabled'，'disabled'）; 
}）; 
 
 
 $（'＃btnDel'）。click（function（）{
 var num = $（'。clonedInput'）。length; 
 
 $（'＃input'+ num）.remove（）; //删除最后一个元素
 
 $（'＃btnAdd'）。attr（'disabled'，''）; // enable 添加按钮
 
 //如果只剩下一个元素，禁用删除按钮
 if（num-1 == 1）
 $（'＃btnDel' ）.attr（'disabled'，'disabled'）; 
}）; 
 
 $（'＃btnDel'）。attr（'disabled'，'disabled'）; 
  

DEMO ： http://jsfiddle.net/chridam/ qW9ra /

I have a form which starts out with 2 text inputs. The standard scenario is the user enters a number in one field and his/her name in the other and then the page will be updated (not reloaded). But in some cases the user may want to enter several numbers which are connected to the same name and the way this will be implemented is by the user clicking an "add another" link next to the text box.

When the user clicks the "add another" link, the value from the textbox needs to be inserted into a new (dynamically created) text field and the text field where the user entered the number should be reset to default value. The user can enter 10 numbers this way before an alert is presented informing him/her about more efficient ways to do this operation.

I'm clueless as to how this is done (can it be done) jQuery and it would be great if someone can help out.

Here is the html I'm working with:

<div id="searchFields" class="control-group inlineForm">
    <label for="regNr">Regnr</label> <input type="text" id="regNr" class="uprCase" placeholder="Regnr." size="6" maxlength="6">
    <span class="addRegNr"><a href="#">add another</a></div>
    <label for="poNr">PO.nr</label> <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    <input type="button" value="GET INFO" class="last" id="getBaseInf">
</div>

http://jsfiddle.net/RgKV9/

Cheers!

EDIT UPDATE

I've taken a liking to Aske G's example and have made some changes to it. Here is the new code I'm working with, jsfiddle.net/SDpfy Although I managed to do some minor changes to AskeG's code I cant figure out how to add unique ID's and individual delete links for each generated field that ends up in the basket. Also, how can I set the generated fields to readonly and animate them when they show up in the basket?

解决方案

Basing solution on this blog post jQuery – Dynamically Adding Form Elements by Charlie Griefer, you could try the following:

Markup:

<div id="searchFields" class="control-group inlineForm">
<form id="myForm">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        <label for="regNr">Regnr</label>: <input type="text" name="regNr" placeholder="Regnr." size="6" maxlength="6" />
        <label for="poNr">PO.nr</label>: <input type="text" id="poNr" placeholder="PO.nr." size="12" maxlength="12">
    </div>

    <div>
        <input type="button" id="btnAdd" value="add another Reg field" />
        <input type="button" id="btnDel" value="remove fields" />
    </div>
    <input type="button" value="GET INFO" class="last" id="getBaseInf">
</form>
</div>​

Javascript:

$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum  = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value  
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'regNr' + newNum).attr('regNr', 'regNr' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').removeAttr('disabled');

    // business rule: you can only add 5 names
    if (newNum == 5)
        $('#btnAdd').attr('disabled','disabled');
});


$('#btnDel').click(function() {
     var num = $('.clonedInput').length;

    $('#input' + num).remove();     // remove the last element

    $('#btnAdd').attr('disabled',''); // enable the "add" button

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
          $('#btnDel').attr('disabled','disabled');
});

$('#btnDel').attr('disabled','disabled');​

DEMO: http://jsfiddle.net/chridam/qW9ra/

这篇关于用jQuery创建新的表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！