javascript – HTML How do I show output for multiple selection?-ThrowExceptions

Exception or error:

I am creating an enquiry form for which user can input their information and display all the data in pop up windows.

Everything can show up except for multiple choice selection which only show a single output.

I want to show all the output which I select.

For example: When I select Green and Blue as the color, It only show 1 color which is Green.

Look at this image screenshot here:

enter image description here

Hoping someone can help me, here is my HTML and Javascript code.

<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {


  DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')

 message = "<b>Your form has been submitted! </b>"


  message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
  message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
  message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
  message += "<li><b>Address: </b>" + document.form1.address.value;
  message += "<li><b>Email: </b>" + document.form1.email.value;
  message += "<li><b>Favourite Color: </b>" + document.form1.eyeColor.value;
  
  message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
  DispWin.document.write(message);
}
</script>







</head>
<body>
<h1>Enquiry Form</h1>

<form name="form1">

<table> 

<tr>
 <td valign="top">
  <label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
 </td>
 <td valign="top">
    <select name="enquiryType" id="enquiryType" >
      <option value="General Infomation">General Information</option>
      <option value="Reservations">Reservations</option>
      <option value="Rates">Rates</option>
 </td>
</tr>

<tr>
 <td valign="top">
  <label for="Salutation">Salutation</label>
 </td>
 <td valign="top">
    <label for="Mr">Mr</label>
      <input type="radio" name="salutation" id="Mr" value="Mr">
      <label for="Mrs">Mrs</label>
      <input type="radio" name="salutation" id="Mrs" value="Mrs">
    <label for="Miss">Miss</label>
      <input type="radio" name="salutation" id="Miss" value="Miss">
      <label for="male">Dr</label>
      <input type="radio" name="salutation" id="Dr" value="Dr">      

 </td>
</tr>

<tr>
 <td valign="top">
  <label for="full_name">Full Name *</label>
 </td>
 <td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
 </td>
</tr>


<tr>
 <td valign="top">
  <label for="full_name">Adress: </label>
 </td>
 <td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
 </td>
</tr>


<tr>
 <td valign="top">
  <label for="full_name">Phone Number: </label>
 </td>
 <td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
 </td>
</tr>




<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>


<tr>
 <td valign="top">
  <label for="FavColor">Favourite Color</label>
 </td>
 <td valign="top">
      <select name="eyeColor" id="eyeColor" multiple>
      <option value="Green">Green</option>
     <option value="Red">Red</option>
     <option value="Blue">Blue</option>
     <option value="Black">Black</option>
     <option value="Red">Yellow</option>
   </option>
    </select>
 </td>
</tr>




</table>



</p>
<p><input TYPE="BUTTON" VALUE="Submit" onClick="display();"></p>



</form>
</body>
</html>
How to solve:

You need to replace document.form1.eyeColor.value; by Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value); then you can got selected value. From this map() method to get whole selected value.

Note: window.open() method is not working in this editor so I used alert() method for render fill-up result.

<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
  DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
  message = "<b>Your form has been submitted! </b>"
  message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
  message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
  message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
  message += "<li><b>Address: </b>" + document.form1.address.value;
  message += "<li><b>Email: </b>" + document.form1.email.value;
  message += "<li><b>Favourite Color: </b>" + Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value);
  message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
  alert(message);
  DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
  <table> 
    <tr>
      <td valign="top">
        <label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
      </td>
      <td valign="top">
        <select name="enquiryType" id="enquiryType" >
          <option value="General Infomation">General Information</option>
          <option value="Reservations">Reservations</option>
          <option value="Rates">Rates</option>
        </select>
      </td>
    </tr>
  <tr>
    <td valign="top">
      <label for="Salutation">Salutation</label>
    </td>
    <td valign="top">
      <label for="Mr">Mr</label>
      <input type="radio" name="salutation" id="Mr" value="Mr">
      <label for="Mrs">Mrs</label>
      <input type="radio" name="salutation" id="Mrs" value="Mrs">
      <label for="Miss">Miss</label>
      <input type="radio" name="salutation" id="Miss" value="Miss">
      <label for="male">Dr</label>
      <input type="radio" name="salutation" id="Dr" value="Dr">
    </td>
  </tr>
  <tr>
    <td valign="top">
      <label for="full_name">Full Name *</label>
    </td>
    <td valign="top">
      <input TYPE="TEXT" SIZE="20" NAME="yourname">
    </td>
  </tr>
  <tr>
    <td valign="top">
      <label for="full_name">Adress: </label>
    </td>
    <td valign="top">
      <input TYPE="TEXT" SIZE="30" NAME="address">
    </td>
  </tr>
  <tr>
    <td valign="top">
      <label for="full_name">Phone Number: </label>
    </td>
    <td valign="top">
      <input TYPE="TEXT" SIZE="15" NAME="phone">
    </td>
  </tr>
  <tr>
    <td valign="top">
      <label for="email">Email Address *</label>
    </td>
    <td valign="top">
      <input  type="text" name="email" maxlength="80" size="30">
    </td>
  </tr>
  <tr>
    <td valign="top">
      <label for="FavColor">Favourite Color</label>
    </td>
    <td valign="top">
      <select name="eyeColor" id="eyeColor" multiple="multiple">
        <option value="Green">Green</option>
        <option value="Red">Red</option>
        <option value="Blue">Blue</option>
        <option value="Black">Black</option>
        <option value="Red">Yellow</option>
      </select>
    </td>
  </tr>
</table>

<p><input type="button" value="Submit" onclick="display()"></p>

</form>

</body>
</html>

###

You can use selected option to get selected options.

let selectedOptions= document.form1.eyeColor.selectedOptions;
let selectedValues = [];
for (let i=0; i < selectedOptions.length; i++) {
    selectedValues[i] = selectedOptions[i].value;
}
console.log(selectedValues);

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *