Tips for displaying specific information using Javascript depending on the input value of an HTML form

Question

Tips for displaying specific information using Javascript depending on the input value of an HTML form

I am working on an HTML form that includes a dropdown list with four different names to choose from.

    window.onload = function(){
        document.getElementById("submit").onclick = displaySelectedStudent;
    }

    function displaySelectedStudent(){
        if(document.getElementById("mary jones").value == "mary jones"){
            document.getElementById("students").innerHTML = "Mary Jones";
        }
        else if(document.getElementById("jane doe").value == "jane doe"){
            document.getElementById("students").innerHTML = "Jane Doe";
        }
        else if(document.getElementById("henry miller").value == "henry miller"){
            document.getElementById("students").innerHTML = "Henry Miller";
        }
        else if(document.getElementById("john smith").value == "john smith"){
            document.getElementById("students").innerHTML = "John Smith";
        }
    }

<div id="students">
<form id="getStudent" action="" method="GET">
    <select name="students">
        <option value="john smith" id="john smith">John Smith</option>
        <option value="jane doe" id="jane doe">Jane Doe</option>
        <option value="henry miller" id="henry miller">Henry Miller</option>
        <option value="mary jones" id="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

Upon clicking the submit button, a JavaScript function is called to display the name of the selected student. However, only the result of the first if statement is currently being displayed. I suspect that I need to pass the form data value into the function, but I am unsure how to accomplish this. Here is the current JavaScript code I have developed for this purpose.

javascript html css string forms

Answer 1

Answer №1

To ensure the correct option is selected, make sure to utilize the value property instead of just setting it as "Mary Jones". By accessing the .value property of the <select> element, you can obtain the actual value of the selected option:

function displayStudent() {
    var chosen = document.getElementById("chooseStudent")["students"].value;
    var result = document.getElementById("selectedStudent");
    if (chosen == "mary jones") {
        result.innerHTML = "Mary Jones";
    } else if (chosen == "jane doe") {
        result.innerHTML = "Jane Doe";
    } else if (chosen == "henry miller") {
        result.innerHTML = "Henry Miller";
    } else {
        result.innerHTML = "John Smith";
    }
}

It's worth noting that ID names should not contain spaces - modify your <option> elements accordingly:

<option value="mary jones" id="maryJones">Mary Jones</option>

Answer 2

To ensure the correct option is selected, make sure to utilize the value property instead of just setting it as "Mary Jones". By accessing the .value property of the <select> element, you can obtain the actual value of the selected option:

function displayStudent() {
    var chosen = document.getElementById("chooseStudent")["students"].value;
    var result = document.getElementById("selectedStudent");
    if (chosen == "mary jones") {
        result.innerHTML = "Mary Jones";
    } else if (chosen == "jane doe") {
        result.innerHTML = "Jane Doe";
    } else if (chosen == "henry miller") {
        result.innerHTML = "Henry Miller";
    } else {
        result.innerHTML = "John Smith";
    }
}

It's worth noting that ID names should not contain spaces - modify your <option> elements accordingly:

<option value="mary jones" id="maryJones">Mary Jones</option>

Answer 3

Answer №2

To obtain the chosen option from the list of options within the select element, extract the text content and display it.

window.onload = function() {
  document.getElementById("submit").onclick = showStudents;
}

function showStudents( e ) {
  e.preventDefault();
  var selectField = document.querySelector("select");
  var displayText = selectField.options[ selectField.selectedIndex ].innerText;
  document.getElementById("students").innerText = displayText;
}

<div id="students"></div>
<form id="getStudent" action="" method="GET">
  <select name="students">
    <option value="john smith" id="john smith">John Smith</option>
    <option value="jane doe" id="jane doe">Jane Doe</option>
    <option value="henry miller" id="henry miller">Henry Miller</option>
    <option value="mary jones" id="mary jones">Mary Jones</option>
  </select>
  <br><br>
  <input id="submit" type="submit">
</form>

Answer 4

To obtain the chosen option from the list of options within the select element, extract the text content and display it.

window.onload = function() {
  document.getElementById("submit").onclick = showStudents;
}

function showStudents( e ) {
  e.preventDefault();
  var selectField = document.querySelector("select");
  var displayText = selectField.options[ selectField.selectedIndex ].innerText;
  document.getElementById("students").innerText = displayText;
}

<div id="students"></div>
<form id="getStudent" action="" method="GET">
  <select name="students">
    <option value="john smith" id="john smith">John Smith</option>
    <option value="jane doe" id="jane doe">Jane Doe</option>
    <option value="henry miller" id="henry miller">Henry Miller</option>
    <option value="mary jones" id="mary jones">Mary Jones</option>
  </select>
  <br><br>
  <input id="submit" type="submit">
</form>

Answer 5

Answer №3

There are several issues in your code that need to be addressed:

First of all, it is crucial to avoid assigning duplicate IDs to different elements within your HTML code. Each ID should be unique across the entire document to prevent unexpected errors when using functions like .getElementById().

Secondly, there is no necessity to provide IDs for <option> elements unless it serves a specific purpose. In this case, assigning IDs does not offer any benefits.

Thirdly, if you do decide to give IDs to <option> elements, avoid including spaces in the ID names as it can lead to undesirable outcomes.

Moreover, if your goal is simply to display the selected value, there is no need to use multiple if-else statements to handle each possibility individually. Utilizing a switch statement instead will improve the readability and conciseness of your code.

I have implemented some changes to your code based on these recommendations:

window.onload = function() {
  document.getElementById("submit").onclick = showStudents;
}

function showStudents() {

  var n = document.getElementById("sel_students");
  var name = n.options[n.selectedIndex].value;
  var output = document.getElementById("div_students");

  output.innerHTML = name;

  switch (name) {
    case "mary jones":
      output.innerHTML += "<br> Hi Mary..";
      break;
    case "jane doe":
      output.innerHTML += "<br> Goodbye Jane";
      break;
    case "henry miller":
      output.innerHTML += "<br> Good afternoon";
      break;
    case "john smith":
      output.innerHTML += "<br> No Pokahontis here";
      break;
  }


}

<div id="div_students">
  <form id="form_students" action="" method="GET">
    <select name="students" id="sel_students">
      <option value="john smith">John Smith</option>
      <option value="jane doe">Jane Doe</option>
      <option value="henry miller">Henry Miller</option>
      <option value="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
  </form>
</div>

Answer 6

There are several issues in your code that need to be addressed:

First of all, it is crucial to avoid assigning duplicate IDs to different elements within your HTML code. Each ID should be unique across the entire document to prevent unexpected errors when using functions like .getElementById().

Secondly, there is no necessity to provide IDs for <option> elements unless it serves a specific purpose. In this case, assigning IDs does not offer any benefits.

Thirdly, if you do decide to give IDs to <option> elements, avoid including spaces in the ID names as it can lead to undesirable outcomes.

Moreover, if your goal is simply to display the selected value, there is no need to use multiple if-else statements to handle each possibility individually. Utilizing a switch statement instead will improve the readability and conciseness of your code.

I have implemented some changes to your code based on these recommendations:

window.onload = function() {
  document.getElementById("submit").onclick = showStudents;
}

function showStudents() {

  var n = document.getElementById("sel_students");
  var name = n.options[n.selectedIndex].value;
  var output = document.getElementById("div_students");

  output.innerHTML = name;

  switch (name) {
    case "mary jones":
      output.innerHTML += "<br> Hi Mary..";
      break;
    case "jane doe":
      output.innerHTML += "<br> Goodbye Jane";
      break;
    case "henry miller":
      output.innerHTML += "<br> Good afternoon";
      break;
    case "john smith":
      output.innerHTML += "<br> No Pokahontis here";
      break;
  }


}

<div id="div_students">
  <form id="form_students" action="" method="GET">
    <select name="students" id="sel_students">
      <option value="john smith">John Smith</option>
      <option value="jane doe">Jane Doe</option>
      <option value="henry miller">Henry Miller</option>
      <option value="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
  </form>
</div>

Answer 7

Answer №4

Please follow these steps

    window.onload = function(){
        document.getElementById("submit").onclick = displayStudents;
    }

    function displayStudents(){
        document.getElementById("students").innerHTML = document.getElementById("student-list").value;
    }

<div id="students">
<form id="getStudent" action="" method="GET">
    <select name="students" id="student-list">
        <option value="john smith" id="john smith">John Smith</option>
        <option value="jane doe" id="jane doe">Jane Doe</option>
        <option value="henry miller" id="henry miller">Henry Miller</option>
        <option value="mary jones" id="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

Answer 8

Please follow these steps

    window.onload = function(){
        document.getElementById("submit").onclick = displayStudents;
    }

    function displayStudents(){
        document.getElementById("students").innerHTML = document.getElementById("student-list").value;
    }

<div id="students">
<form id="getStudent" action="" method="GET">
    <select name="students" id="student-list">
        <option value="john smith" id="john smith">John Smith</option>
        <option value="jane doe" id="jane doe">Jane Doe</option>
        <option value="henry miller" id="henry miller">Henry Miller</option>
        <option value="mary jones" id="mary jones">Mary Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

Answer 9

Answer №5

What is the reason for not utilizing jQuery?

Retrieve it through id

var result = $('select#dropDownId option:selected').val();

Answer 10

What is the reason for not utilizing jQuery?

Retrieve it through id

var result = $('select#dropDownId option:selected').val();

Answer 11

Answer №6

<div id="classmates">
<form id="getClassmate" action="" method="GET">
    <select name="classmates" id="classmates_value">
        <option value="alex smith">Alex Smith</option>
        <option value="sarah doe">Sarah Doe</option>
        <option value="david miller">David Miller</option>
        <option value="lucy jones">Lucy Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

function displayClassmates(){
    var selected = document.getElementById("classmates_value");
    document.getElementById("classmates").innerHTML = selected;
}

Answer 12

<div id="classmates">
<form id="getClassmate" action="" method="GET">
    <select name="classmates" id="classmates_value">
        <option value="alex smith">Alex Smith</option>
        <option value="sarah doe">Sarah Doe</option>
        <option value="david miller">David Miller</option>
        <option value="lucy jones">Lucy Jones</option>
    </select>
    <br><br>
    <input id="submit" type="submit">
</form>

function displayClassmates(){
    var selected = document.getElementById("classmates_value");
    document.getElementById("classmates").innerHTML = selected;
}

Tips for displaying specific information using Javascript depending on the input value of an HTML form

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Issue at hand: Unexpected error 500 encountered while sending AJAX request to PHP script through

obtain the string representation of the decimal HTML entity value

Is it possible to have scope inherit from an object in AngularJS?

Accessing JSON object with Javascript

How can you securely transfer the ARRAY OBJECT from JavaScript to PHP using Ajax?

Issue with JavaScript-generated dropdown menu malfunctioning in WebView on Android devices

Creating a div that functions as a scrollbar controller

Troubleshooting server-side sorting issues with AJAX implementation, encountering problems with headers functionality

Guide to changing the class of a particular child element when the parent element is clicked with vanilla JavaScript

Tips for displaying buttons and images on the same line using CSS

Is there a way to modify Style Properties in JavaScript by targeting elements with a specific class name using document.getElementsByClassName("Class_Name")?

Implementing a Timer on an HTML Page with JavaScript

Is it possible to display multiple qTips for the same target using jQuery qTip2?

"The boundary of suspense was updated before completing hydration." This error occurs when utilizing suspense and dynamic import within Next.js

Is it possible to track keystrokes without the use of text input fields?

Detecting Unflushed Requests in Jasmine and AngularJS

Hide the menu by clicking anywhere outside the React component

What steps can I take to ensure that the browser prints out a PDF copy of a webpage?

leveraging array elements in the data and label properties of a chart.js chart

Converting CSS colors from RGBA to hexadecimal format: A step-by-step guide