Change text based on select menu option

Report · Jun 11, 2018

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.

Report · Jun 11, 2018

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>

Wappler, the only real Dreamweaver alternative.

Report · Jun 12, 2018

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.

Report · Jun 12, 2018

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>

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

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

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

</select>

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

function price() {

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

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

}

</script>

</body>

</html>

Thanks again Ben.

Report · Jun 12, 2018

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.

Wappler, the only real Dreamweaver alternative.

Change text based on select menu option

1 Correct answer