CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Hanny
Hanny

Reputation: 2159

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

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?

Upvotes: 0

Views: 70

Answers (1)

Coder anonymous
Coder anonymous

Reputation: 927

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.

Upvotes: 2

Related Questions