Question 161298 in Html Question posted in
Some basic documentation can be found here.

Can HTML & JS change a hidden field’s value based on a dropdown?

I’m working with the following form. I can’t edit the html. This is built in a landing page builder.

<select id="how_many_players" name="how_many_players">
<option value=""></option>
<option value="1 to 10">1 to 10</option>
<option value="11 to 20">11 to 20</option>
<option value="21 to 30">21 to 30</option>
<option value="31 to 40">31 to 40</option>
<option value="41 to 50">41 to 50</option>
<option value="50+">50+</option>
</select>
<input id="Price" name="Price" type="hidden" class="hidden" value="$0.00">

I’m looking for JS (?) to change the value in the hidden "price" field based on the option dropdown.

Example: option value 1 to 10 = $100

Tags:

2

Answers


  1. 0

    You get the hidden element through its id and then change the value to the selected option’s value like this:

    document.getElementById('Price').value = document.getElementById('how_many_players').value

    EDIT:

    You probably want to put it into a change event listener for the select, so that the value get’s changed, when the select has changed.

    const selector = document.getElementById('how_many_players')
selector.addEventListener('change', function() {
    document.getElementById('Price').value = selector.value
})
    Login or Signup to reply.
  2. 0

    Yes you need to use a little javascript for that, here I put some code to do that.

    I would recommend to not used formatted values as input values

    Split data values with display values, only format values to display them, not in your functions or real value data

    const select = document.getElementById("how_many_players");
const price = document.getElementById("Price");
const formattedValue = document.getElementById("formattedValue");

select.addEventListener("change", () => {
    switch (select.value) {
        case "1 to 10":
            price.value = "$100";
            formattedValue.innerText = "$100";
        break;
        case "11 to 20":
            price.value = "$200";
            formattedValue.innerText = "$200";
        break;
        case "21 to 30":
            price.value = "$300";
            formattedValue.innerText = "$300";
        break;
        case "31 to 40":
            price.value = "$400";
            formattedValue.innerText = "$400";
        break;
        case "41 to 50":
            price.value = "$500";
            formattedValue.innerText = "$500";
        break;
        case "50+":
            price.value = "$700";
            formattedValue.innerText = "$700";
        break;
        default:
            price.value = "null";
            formattedValue.innerText = "not valid";
        break;
    }
});
    <select id="how_many_players" name="how_many_players">
<option value=""></option>
<option value="1 to 10">1 to 10</option>
<option value="11 to 20">11 to 20</option>
<option value="21 to 30">21 to 30</option>
<option value="31 to 40">31 to 40</option>
<option value="41 to 50">41 to 50</option>
<option value="50+">50+</option>
</select>
<input id="Price" name="Price" type="hidden" class="hidden" value="$0.00">

<p id="formattedValue"></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search