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

Can HTML return different values based on other ID’s?

So I am creating a form that has a drop down for years, it currently has 3 options:

2021-2022
2022-2023
2023-2024

This element has the ID value of AidYear

Later on in the form we ask the question "Where you born before January 1, YYYY"

I need the YYYY to populate with a different value depending on what option they chose for the original drop down:

  • IF 2021-2022 was selected then YYYY should display a valye of 1998
  • IF 2022-2023 was selected then YYYY should display a valye of 1999
  • IF 2023-2024 was selected then YYYY should display a valye of 2000

So the final result is that the person using the form should see the question like:
"Where you born before January 1, 1999"

And prior to them selecting an option in the dropdown I need it to default to 1998 like:
"Where you born before January 1, 1998"

and simply update to the new year once they select an option.

Because of the nature of the form I need to do this all in a single line.

So far I have not had luck getting it to return anything.

Were you born before January 1,

<strong id="birthbefore1"></strong>  
<script> 
var birthdate2 = document.getElementById("AidYear");
if (birthdate2 = "") {"1998";}
if (birthdate2 = "2021-2022") {"1998";}
if (birthdate2 = "2022-2023") {"1999";}
if (birthdate2 = "2023-2024") {"2000";}
var p = document.getElementById("birthbefore1");
p.innerHTML = birthdate2;
</script>

I get zero results or when playing with some differences it sometimes results in
[object HTMLSelectElement]

Tags:

3

Answers


  1. 0

    the values in the if statements aren’t being returned or assigned to any value. if you change your code to this:

    function getBirthdate(birthdate2) {
    if (birthdate2 = "") {return "1998";}
    if (birthdate2 = "2021-2022") {return "1998";}
    if (birthdate2 = "2022-2023") {return "1999";}
    if (birthdate2 = "2023-2024") {return "2000";}
}
var p = document.getElementById("birthbefore1");
p.innerHTML = getBirthdate(document.getElementById("AidYear"));

    you should get the expected result

    Login or Signup to reply.
  2. 0

    You’re on the right track. You just need to add onchange event to AidYear, to trigger the updateBirthYear.

    <label for="AidYear">Select Aid Year:</label>
<select id="AidYear" onchange="updateBirthYear(this.value)">
  <option value="2021-2022">2021-2022</option>
  <option value="2022-2023">2022-2023</option>
  <option value="2023-2024">2023-2024</option>
</select>

<p>Were you born before January 1, <strong id="birthbefore1">1998</strong>?</p>

<script>
function updateBirthYear(birthdate2) {
  var birthYear;

  switch (birthdate2) {
    case "2021-2022":
      birthYear = "1998";
      break;
    case "2022-2023":
      birthYear = "1999";
      break;
    case "2023-2024":
      birthYear = "2000";
      break;
    default:
      birthYear = "1998";
  }

  document.getElementById("birthbefore1").innerHTML = birthYear;
}
</script>
    Login or Signup to reply.
  3. 0

    You are comparing the strings using the asigning operator = instead of the using comparison operator == or ===, also I included an onchange event listener that calls updateYear(this.value), which passes the currently selected value to the function

    <p>Were you born before January 1, <strong id="birthbefore1">1998</strong></p>
    
    <select id="AidYear" onchange="updateYear(this.value)">
      <option value="2021-2022">2021-2022</option>
      <option value="2022-2023">2022-2023</option>
      <option value="2023-2024">2023-2024</option>
    </select>
    
    <script>
    function updateYear(birthdate2) {
      var year;
    
      if (birthdate2 == "2021-2022") {
        year = "1998";
      } else if (birthdate2 == "2022-2023") {
        year = "1999";
      } else if (birthdate2 == "2023-2024") {
        year = "2000";
      }
    
      document.getElementById("birthbefore1").innerHTML = year;
    }
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search