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

Question

I have a static form that looks like this:

<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>

I need to 'clone' the item based on the number that is in a 'quantity_wanted' field on the page.

I'd like to do this with jquery.

I have the existing 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;
    }
});

As you can see there is a radio selector that when it is checked, the inputs need to match the quantity the user has currently input.

With the code as it is - it clones the form inputs appropriately, but in the event that the user adds to the quantity or takes away from the quantity a clone is created.

I.e.: if a user adds 1, there should be two forms (and the existing code does that), but then if the user removes 1, a third form is added (instead of removing the last form cloned).

How is this best accomplished?

why are you calling clone() twice in var item = itemTemplate.clone().find(':input').each(function() { — Coder anonymous
– Coder anonymous, Commented Dec 21, 2015 at 19:59
also do you want your form cloned or items(input fields only), since your current code is cloning items only, but you mentioned you need to clone your form? — Coder anonymous
– Coder anonymous, Commented Dec 21, 2015 at 20:08
You're never removing the old items. So every time the user edits the number, you append that many new items. — Barmar
– Barmar, Commented Dec 21, 2015 at 20:48
I just need the input items duplicated really. I'm not sure why I'm calling clone() twice - but I see what you're saying. I was working off a tutorial I had found online and adjusting it to fit my needs. Obviously I have some more learning to do. Barmar, what is the best way to remove the old items? — Hanny
– Hanny, Commented Dec 22, 2015 at 1:05

Coder anonymous · Accepted Answer · 2015-12-23 11:07:36Z

2

There are few things..

You can add events like onfocus, and onblur on the quantity_wanted input field in addition to what you are using.

var inputCode is unused so you can use it, as var inputCode = $('input[name=engraving]:checked').val(), check if it is empty or not, if its empty simply delete the elements you have cloned..

for deleting purpose what you can do is, try adding the elements within a div or some tag, for eg, like this..

<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..

so suppose if user input 3, but later on chooses 2, then then you can simply call jQuery("#cloneditems3").remove() or you can remove all the existing cloneditems and clone the items again based on the input by user. This way things will be simpler and easier, and structured too.

and to keep track of what number of elements you have cloned earlier you can use a global javascript variable say var cloneditemcount = 0 (initially) and update it based on user selection and, use and compare to know how many items you have cloned previously.

Hope this helps.

answered Dec 23, 2015 at 11:07

Coder anonymous

9271 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hanny Over a year ago

Thanks! I didn't use your code specifically - but it sent me down the right path and now I have it working as intended. I appreciate your input! I ended up using a data-position attribute and enclosing the inputs in a div as you suggested. Then I just increment/decrement as needed and update the form accordingly. Thanks again!

Coder anonymous Over a year ago

I am Glad, i could help..:)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related