Highlighted

Change text based on select menu option

Enthusiast ,
Jun 11, 2018

Copy link to clipboard

Copied

Hi all, I can't believe I can't find what I am looking for, so it would seem I am not using the correct search terms because I don't actually know what it's called! I'm hoping somebody can point me in the right direction.

I want a select menu with options that will be database driven... easy enough... but when the option is changed, I want it to update a price elsewhere on the page.

The options in the select menu will be text only pertaining to rental periods. E.g.:

1 year

2 years

3 years

And depending upon which is selected the price elsewhere changes to reflect that it's cheaper per month over three years than it is for one year. Does that make sense?

So, what should I be looking for? Have you got any links that or tuts that I could learn from? I assume it's jQuery based, but I looked at WC3 jQuery section and didn't find anything that related to what I am trying to achieve, yet this kind of thing is so common place! I've googled but am getting nothing.

Thanks in advance.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

I'll try to explain. The example uses jQuery (a JavaScript library) because it is easier to understand and implement than JavaScript.

$("#rate-value").change(function()

The function is triggered when there is a change in value of an element with an ID of rate-value.

var rate

Declare our variable to use in our function

switch($('#rate-value').val()) {

    case '1':

        rate = 179;

        break;

    case '2':

        rate = 169;

        break;

    case '3':

        rate = 159;

        break;

    default:

        rate = 199;

    }

This is the SWITCH statement that we use to assign a value to our variable rate.

$("#value").val(rate)

We apply the value of our variable to an input element.

If we are to apply the value of our variable to a paragraph we would have to change the above to

$("#value").text(rate)

and the paragraph would look like

<p id="value")></p>

Because the value of an ID can only be used once per document, you will have to delete <input type="text" id="value" value=""> or give the paragraph or input ID a different value with a corresponding change in the script.

What you have shown in your example is JavaScript. If you feel comfortable using JS, then it is the better way to go.

I have no idea what this process is called.

Views

512

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change text based on select menu option

Enthusiast ,
Jun 11, 2018

Copy link to clipboard

Copied

Hi all, I can't believe I can't find what I am looking for, so it would seem I am not using the correct search terms because I don't actually know what it's called! I'm hoping somebody can point me in the right direction.

I want a select menu with options that will be database driven... easy enough... but when the option is changed, I want it to update a price elsewhere on the page.

The options in the select menu will be text only pertaining to rental periods. E.g.:

1 year

2 years

3 years

And depending upon which is selected the price elsewhere changes to reflect that it's cheaper per month over three years than it is for one year. Does that make sense?

So, what should I be looking for? Have you got any links that or tuts that I could learn from? I assume it's jQuery based, but I looked at WC3 jQuery section and didn't find anything that related to what I am trying to achieve, yet this kind of thing is so common place! I've googled but am getting nothing.

Thanks in advance.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

I'll try to explain. The example uses jQuery (a JavaScript library) because it is easier to understand and implement than JavaScript.

$("#rate-value").change(function()

The function is triggered when there is a change in value of an element with an ID of rate-value.

var rate

Declare our variable to use in our function

switch($('#rate-value').val()) {

    case '1':

        rate = 179;

        break;

    case '2':

        rate = 169;

        break;

    case '3':

        rate = 159;

        break;

    default:

        rate = 199;

    }

This is the SWITCH statement that we use to assign a value to our variable rate.

$("#value").val(rate)

We apply the value of our variable to an input element.

If we are to apply the value of our variable to a paragraph we would have to change the above to

$("#value").text(rate)

and the paragraph would look like

<p id="value")></p>

Because the value of an ID can only be used once per document, you will have to delete <input type="text" id="value" value=""> or give the paragraph or input ID a different value with a corresponding change in the script.

What you have shown in your example is JavaScript. If you feel comfortable using JS, then it is the better way to go.

I have no idea what this process is called.

Views

513

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 11, 2018 0
Adobe Community Professional ,
Jun 11, 2018

Copy link to clipboard

Copied

Try

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha384-rY/jv8mMhqDabXSo+UCggqKtdmBfd3qC2/KvyTDNQ6PcUJXaxK1tMepoQda4g5vB" crossorigin="anonymous"></script>

</head>

<body>

<form id="account" action="" method="post">

  <select id="rate-value">

    <option value="0">Please Choose &hellip;</option>

    <option value="1">1 year</option>

    <option value="2">2 years</option>

    <option value="3">3 years</option>

  </select>

  <input type="text" id="value" value="">

</form>

<script>

  $("#rate-value").change(function() {

    var rate;

    switch($('#rate-value').val()) {

    case '1':

        rate = 179;

        break;

    case '2':

        rate = 169;

        break;

    case '3':

        rate = 159;

        break;

    default:

        rate = 199;

    }

    $("#value").val(rate);

  });

</script>

</body>

</html>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 11, 2018 1
Enthusiast ,
Jun 12, 2018

Copy link to clipboard

Copied

OK, that's helpful. Thanks Ben.

I was hoping to apply it to a <p> tag or similar for visual feedback, and possibly also apply it to a hidden field within a form -- it depends if I can make the insert work with the value directly from the menu. With a <p> tag it would prevent users from changing the value manually.

I've just tested it and having duplicate value IDs has broken it, and adding it to a <p> alone did nothing. So, what am I missing?

Also, for future reference, what is this called so I know what to search for?

Thanks again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2018 0
Enthusiast ,
Jun 12, 2018

Copy link to clipboard

Copied

I found this based on the .change(function()... ) within your code. So I am assuming this is called jquery or javascript change function for innerHTML. Is that right?

<!DOCTYPE html>

<html>

<body>

<p>Select a number of years from the list.</p>

<select id="mySelect" onchange="price()">

  <option value="0">Please choose</option>

  <option value="1 year">1 year</option>

  <option value="2 years">2 years</option>

  <option value="3 years">3 years</option>

</select>

<p>Rental period: <span id="rental"></span></p>

<script>

function price() {

    var x = document.getElementById("mySelect").value;

    document.getElementById("rental").innerHTML = x;

}

</script>

</body>

</html>

Thanks again Ben.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2018 0
Adobe Community Professional ,
Jun 12, 2018

Copy link to clipboard

Copied

I'll try to explain. The example uses jQuery (a JavaScript library) because it is easier to understand and implement than JavaScript.

$("#rate-value").change(function()

The function is triggered when there is a change in value of an element with an ID of rate-value.

var rate

Declare our variable to use in our function

switch($('#rate-value').val()) {

    case '1':

        rate = 179;

        break;

    case '2':

        rate = 169;

        break;

    case '3':

        rate = 159;

        break;

    default:

        rate = 199;

    }

This is the SWITCH statement that we use to assign a value to our variable rate.

$("#value").val(rate)

We apply the value of our variable to an input element.

If we are to apply the value of our variable to a paragraph we would have to change the above to

$("#value").text(rate)

and the paragraph would look like

<p id="value")></p>

Because the value of an ID can only be used once per document, you will have to delete <input type="text" id="value" value=""> or give the paragraph or input ID a different value with a corresponding change in the script.

What you have shown in your example is JavaScript. If you feel comfortable using JS, then it is the better way to go.

I have no idea what this process is called.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2018 1