How to use the same JavaScript Function on Multiple Select elements with different ID's

Question

I have these JavaScript functions that I need to use for 4 select elements that each use a unique ID.

1) How can I use these functions to make all 4 select drop downs function right?

Here are the 2 JavaScript functions and 4 html select drop downs for reference.

1st Script

$(document).ready(function () {
    $(".addToCart").on("click", function () {
        var quant = $("#getquantity");
        console.log(quant.val());
        if (!quant.val()) {
            alert("Select Quantity!");
        } else {
            var productCode = quant.val();
            window.location.href = "url.com/2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname;
        }
    });
});

2nd Script

function select_options() {
    var textBlocks = [
        'Retail Price: $45.00
Sales Price: $35.00',
        'Retail Price: $45.00
Sales Price: $35.00',
        'Retail Price: $90.00
Sales Price: $70.00',
        'Retail Price: $180.00
Sales Price: $120.00'];

    document.getElementById('getquantity').onchange = function () {
        var ind = document.getElementById('getquantity').selectedIndex;
        document.getElementById('showprice').innerHTML = ' ' + textBlocks[ind];
    }
}

1st Select drop down (uses id="showprice" and id="getquantity")

2nd Select drop down (uses id="showprice2" and id="getquantity2")

3rd Select drop down (uses id="showprice3" and id="getquantity3")

4th Select drop down (uses id="showprice4" and id="getquantity4")

Edit

Updated code

On my site when I select the drop down the alert pops up. It should only pop up when nothing is selected and the button is clicked.

These are the two references to jquery I'm using.

Updated Script

$(document).ready(function () {
$("form").on("click", ".addToCart", function (e) {
    // e.delegateTarget is the form whose addToCart descendant was clicked
    var quantVal = $(e.delegateTarget).find(".getquantity").val();

    console.log(quantVal);

    if (!quantVal) {
        alert("Select Quantity!");
    } else {
        var productCode = quantVal;
        window.location.href = "customer_appkit2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname;
    }
});

var textBlocks = [
    'Retail Price: $45.00
Sales Price: $35.00',
    'Retail Price: $45.00
Sales Price: $35.00',
    'Retail Price: $90.00
Sales Price: $70.00',
    'Retail Price: $180.00
Sales Price: $120.00'];

$('form').on('change', '.getquantity', function (e) {
    var ind = this.selectedIndex;
    $(e.delegateTarget).find(".showprice").html(textBlocks[ind]);
});
});

Updated select drop down


   
    
      
    
    Retail Price: $45.00

    Sales Price: $35.00
     Qty:

Edit

The edit code above works now because I updated to latest jQuery

But now my hightlight effect isn't working.

//-->

//

Edit

I included the highlight effect in the above script as suggested by @JLRishe. Doing that enabled the highlight effect to work normally again. I also updated jQuery and the UI to stable versions.

Here is the updated script

cdn jQuery and UI

Updated Script with included highlight effect

$(document).ready(function () {
$("form").on("click", ".addToCart", function (e) {
    // e.delegateTarget is the form whose addToCart descendant was clicked
    var quantVal = $(e.delegateTarget).find(".getquantity").val();

    console.log(quantVal);

    if (!quantVal) {
        alert("Select Quantity!");
    } else {
        var productCode = quantVal;
        window.location.href = "url.com/2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname;
    }
});

var textBlocks = [
    'Retail Price: $45.00
Sales Price: $35.00',
    'Retail Price: $45.00
Sales Price: $35.00',
    'Retail Price: $90.00
Sales Price: $70.00',
    'Retail Price: $180.00
Sales Price: $120.00'];

$('form').on('change', '.getquantity', function (e) {
    var ind = this.selectedIndex;
    $(e.delegateTarget).find(".showprice").html(textBlocks[ind]);

$('.salesprice').effect("highlight", {},  3000);

});
});

JLRishe · Accepted Answer

You should be able to do something like the following:

$(document).ready(function () {
    $("form").on("click", ".addToCart", function (e) {
        // e.delegateTarget is the form whose addToCart descendant was clicked
        var quantVal = $(e.delegateTarget).find(".getquantity").val();

        console.log(quantVal);

        if (!quantVal) {
            alert("Select Quantity!");
        } else {
            var productCode = quantVal;
            window.location.href = "url.com/2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname;
        }
    });

    var textBlocks = [
        'Retail Price: $45.00
Sales Price: $35.00',
        'Retail Price: $45.00
Sales Price: $35.00',
        'Retail Price: $90.00
Sales Price: $70.00',
        'Retail Price: $180.00
Sales Price: $120.00'];

    $('form').on('change', '.getquantity', function (e) {
        var ind = this.selectedIndex;
        $(e.delegateTarget).find(".showprice").html(textBlocks[ind]);

        $('.salesprice').effect("highlight", {},  3000);
    });
});

Working fiddle (a bit modified to work in JSFiddle without your images):

http://jsfiddle.net/DDNLe/3/

I should point out that all of your forms have unclosed div elements, and I would recommend closing your img and area tags, though that's not strictly necessary in HTML.

How to use the same JavaScript Function on Multiple Select elements with different ID's

Answers (1)

Related Questions

How to use the same JavaScript Function on Multiple Select elements with different ID&#39;s

Answers (1)

Related Questions

How to use the same JavaScript Function on Multiple Select elements with different ID's