HTML How do I show output for multiple selection?

Question

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:

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>

This thread should answer your question: https://stackoverflow.com/q/11821261/5733078 — devamat, Feb 22 '20 at 03:43

Raeesh Alam · Accepted Answer · 2020-02-22T04:42:54.677

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>

score 1 · Answer 2 · answered Feb 22 '20 at 04:30

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.

HTML How do I show output for multiple selection?

2 Answers2