需要使用jquery更新基于数字输入的表单输入


Need to update a forms inputs based on a number input with jquery

我有一个静态表单,如下所示:

<form id="engraving_selection">
    <h3>Engraving Options</h3>
    <input type="radio" name="engraving" value="Engrave-Different" id="engrave_different" checked="checked">Unique engraving for each item<br />
    <input type="radio" name="engraving" value="Engrave-Same" id="engrave_same">The engraving would the same on each item<br />
    <input type="radio" name="engraving" value="No-Engraving" id="no_engraving">I would not like engraving on this item<br />
</form>
<form id="engraving_options">
    <h4>Engraving Text</h4>
    <div id="items">
    <div class="item">
            <br />
            <label>Engraving Line 1: </label>
            <input type="text" class="engraving-input" name="line1-trophies" id="line1-tag0"> 
            <br />
            <label>Engraving Line 2: </label>
            <input type="text" class="engraving-input" name="line2-trophies" id="line2-tag0">
            <br />
            <label>Engraving Line 3: </label>
            <input type="text" class="engraving-input" name="line3-trophies" id="line3-tag0">
            <br />
    </div>
    </div>
</form>

我需要根据页面上"quantity_wanted"字段中的编号"克隆"项目。

我想用jquery来做这件事。

我有现有的jquery:

//define template
var formTemplate = $('#engaving_options #items').clone();
var itemTemplate = $('#items .item:first').clone();

$("#quantity_wanted").bind('keyup oninput mouseup', function () {
    //get the new value
    var currentValue = $("#quantity_wanted").val();
    var inputCode = '';
    switch ($('input[name=engraving]:checked').val()) {
        case 'Engrave-Different':
        alert ('value ='+currentValue);
        for (i=1; i<currentValue; i++) {
            alert ('this is how many');
                //loop through each input
                var item = itemTemplate.clone().find(':input').each(function(){
                    //set id to store the updated section number
                    var newId = this.id + currentValue;
                    //update for label
                    $(this).prev().attr('for', newId);
                    //update id
                    this.id = newId;
                }).end()
                //inject new section
                .appendTo('#items');
                return false;
            };      
        break;
    }
}); 

正如你所看到的,有一个无线电选择器,当它被选中时,输入需要与用户当前输入的数量相匹配。

按照代码的原样,它会适当地克隆表单输入,但如果用户添加到数量中或从数量中删除,则会创建一个克隆。

即:如果用户添加1,则应该有两个表单(现有代码就是这样做的),但如果用户删除1,则会添加第三个表单(而不是删除克隆的最后一个表单)。

这是如何最好地完成的?

有一些东西。。

除了正在使用的内容之外,您还可以在quantity_wanted输入字段上添加onfocus和onblur等事件。

var inputCode未使用,因此您可以将其用作var inputCode = $('input[name=engraving]:checked').val(),检查它是否为空,如果为空,只需删除已克隆的元素即可。。

为了进行删除,您可以尝试在div或某个标记中添加元素,例如,如下所示。。

<div class="item" id="initialitems">
        <br />
        <label>Engraving Line 1: </label>
        <input type="text" class="engraving-input" name="line1-trophies" id="line1-tag0"> 
        <br />
        <label>Engraving Line 2: </label>
        <input type="text" class="engraving-input" name="line2-trophies" id="line2-tag0">
        <br />
        <label>Engraving Line 3: </label>
        <input type="text" class="engraving-input" name="line3-trophies" id="line3-tag0">
        <br />
</div>
//items cloned when user input 1
<div class="item" id="cloneditems1">
        <br />
        <label>Engraving Line 1: </label>
        <input type="text" class="engraving-input" name="line1-trophies" id="line1-tag0"> 
        <br />
        <label>Engraving Line 2: </label>
        <input type="text" class="engraving-input" name="line2-trophies" id="line2-tag0">
        <br />
        <label>Engraving Line 3: </label>
        <input type="text" class="engraving-input" name="line3-trophies" id="line3-tag0">
        <br />
</div>
then cloneditems2, cloneditems3 and so on..

因此,假设用户输入3,但后来选择2,那么您可以简单地调用jQuery("#cloneditems3").remove(),或者您可以删除所有现有的cloneditem,并根据用户的输入再次克隆项目。这样一来,事情就会变得更简单、更容易,也更有条理。

为了跟踪您之前克隆的元素数量,您可以使用全局javascript变量var cloneditemcount = 0 (initially)并根据用户选择进行更新,还可以使用和比较来了解您之前克隆了多少个项目。

希望这能有所帮助。