Skip to main content
M
matthew stuart
Inspiring
June 11, 2018
Answered

Change text based on select menu option

  • June 11, 2018
  • 1 reply
  • 4655 views

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.

    This topic has been closed for replies.
    Correct answer BenPleysier

    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.


    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.

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    June 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    M
    matthew stuartAuthor
    Inspiring
    June 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.

    M
    matthew stuartAuthor
    Inspiring
    June 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>

    <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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices