CODEWITHSUNDEEP
jqueryhtml
Si8
Si8

Reputation: 9225

Why JQuery function works for only the first textbox

I have two modal popup that I display at different time. Everything is same except the popup parent div ID.

<div id="modalNew">
    <div class="modal-content">
        <div class="header">
            <h2>Add Item to Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice"></span><br /><br />

            <label>Quantity:</label>
            <input type="text" id="quantity" name="quantity" placeholder="10">

            <label>Price:</label>
            <input type="text" id="price" name="price" placeholder="$10.00">

        </div>
        <div class="cf footer">
            <input type="button" value="Cancel" id="cancelAdd"><input type="button" value="Add Item" id="addToTable">
        </div>
    </div>
    <div class="overlay"></div>
</div>

<div id="modalUpdate">
    <div class="modal-content">
        <div class="header">
            <h2>Update Item in Your Shopping Cart</h2>
        </div>
        <div class="copy">
            <label>Item:</label>
            <select id="itemChoice">
                <option value="Wine" selected>Wine</option>
                <option value="Shot">Shot</option>
                <option value="Beer">Beer</option>
            </select>
            <br /><span id="spanPrice"></span><br /><br />

            <label>Quantity:</label>
            <input type="text" id="quantity" name="quantity" placeholder="10">

            <label>Price:</label>
            <input type="text" id="price" name="price" placeholder="$10.00">

        </div>
        <div class="cf footer">
            <input type="button" value="Cancel" id="cancelUpdate"><input type="button" value="Delete Item" id="deleteItem"><input type="button" value="Update Item" id="updateTable">
        </div>
    </div>
    <div class="overlay"></div>
</div>

The following JQuery which changes the price textbox based on the quantity textbox:

$('#quantity').blur(function (){
        var optSelect = $("#itemChoice option:selected").text();
        if (optSelect == "Wine") {
            var ftPrice = (parseInt($("#quantity").val()) * 9.00);
            $("#price").val(ftPrice);
        }
        else if (optSelect == "Shot") {
            var ftPrice = (parseInt($("#quantity").val()) * 4.00);
            $("#price").val(ftPrice);
        }
        else if (optSelect == "Beer") {
            var ftPrice = (parseInt($("#quantity").val()) * 2.50);
            $("#price").val(ftPrice);
        }
    });

$('#itemChoice').change(function() {
        //alert('Value change to ' + $(this).attr('value'));
        if ($(this).attr('value') == "Wine") {
            $("#spanPrice").text("Each: $9.00");
        }
        if ($(this).attr('value') == "Shot") {
            $("#spanPrice").text("Each: $4.00");
        }
        if ($(this).attr('value') == "Beer") {
            $("#spanPrice").text("Each: $2.50");
        }
    });

The above JQuery only works when the first pop up is displayed but doesn't work when the second popup is displayed.

Why am I having the issue and how can I fix it?

Upvotes: 0

Views: 238

Answers (3)

David Barker
David Barker

Reputation: 14620

Id's in HTML are unique. That goes for everything in the DOM, visible or not. The two bindings you have target an id, which is probably the first one it comes two when traversing the DOM.

May I suggest you stop using Id's in this case and give them either data-* attributes, the normal attributes or class names, and query for them using these instead. For example as you have a name on the input you can target with that :

$('input[name="quantity"]');

As a side note, if the content has been loaded after the DOM finished loading (i.e. because an async event caused it to be there, ajax or another click event for example), you will need to bind your events to a lower level unchanged element and use bubbling to target the elements.

$(document).on('blur', 'input[name="quantity"]', function(event) { ... };

An example using your code to work out cost of a drink (untested)

var drinks = { wine : 9, shot : 4, beer : 2.5 };

$('div.modal-content').on('blur', 'input[name="quantity"]', function (event) {
    // Create jQuery element from the delegated target and 
    // work out data based on information in THIS form only.
    // ( 'this' in context will be the input element for quantity )
    var $delegate = $(event.delegateTarget),
        selected = $delegate.find('select').val(),
        quantity = parseInt(this.value, 10),
        price = drinks[selected.toLowerCase()] * quantity;

    $delegate .find('#price').val(price.toFixed(2));
});

I would recommend as per original answer that you remove all the id's and replace with classes as they are not unique.

Upvotes: 2

Inder
Inder

Reputation: 170

The issue is in the price id. When you want to update both the Price input fields simultaneously, use class instead of id. This way both will get updated using jQuery.

The input fields become:

<input type="text" class="price" name="price" placeholder="$10.00">

and the jQuery statement changes to:

$(".price").val(ftPrice);

Upvotes: 1

Mukul Bhardwaj
Mukul Bhardwaj

Reputation: 303

You need to use jquery ON or LIVE mehtod

Hope it will help you

thanks

Upvotes: 1

Related Questions