Jump to content

Processing multiple selects


ameliabob
 Share

Recommended Posts

I cannot find an example of how to process multiple selections from an option

[code]

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
     <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/dunes.css" media="screen" />
</head>
<script type="text/javascript">

function DoCustomSearch(){
    n = document.getElementById("fieldNames").value;
alert("selected fieldNames are "+n);    
 alert(s);
}

function ShowAdvancedQueryWindow(){

        s += "<select id='fieldNames' name='fieldNames' size='10' multiple >";
            s +=    "<option value='recNo'>Record Number</option>";
            s +=    "<option value='oName'>Listing Name</option>";
            s +=    "<option value='stNumber'>Street Number</option>";
            s +=    "<option value='stName'>Street Name</option>";
            s +=    "<option value='telno'>Telephone number</option>";
            s +=     "<option value='email'>email</option>";
            s +=    "<option value='showTel'>Show Telno</option>";
            s +=    "<option value='showEmail'>Show email</option>";
            s +=    "<option value='blastEmail'>BlastEmail</option>";
            s +=    "<option value='password'>Password</option>";
        s += "</select>"

        s += "<button type=button onclick='DoCustomSearch()'>Do Search</button>";
      
    document.getElementById('mainBody').innerHTML = s;
      }

</script>
<body onload="ShowAdvancedQueryWindow()">
   
    
<div id="mainBody" >

</div>

</body>
</html>

[\code]

If I select multiple options how do I know which of these are selected when I go to  "DoCustomSearch()"?

 

Link to comment
Share on other sites

See if you can modify this to your needs:

 <!DOCTYPE HTML
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- From: https://w3schools.invisionzone.com/topic/62669-processing-multiple-selects/ -->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/dunes.css" media="screen" />
</head>
<body onload="ShowAdvancedQueryWindow()">
   
<div id="mainBody" >
</div>

<script type="text/javascript">
function DoCustomSearch(){
  var values = [];
  n = document.getElementById("fieldNames");
  for (let i=0; i<n.options.length; i++) { 
    if (n[i].selected) { values.push(n[i].value || n[i].text); }
  }        
  alert("selected fieldNames are\n"+values.join('\n'));    
}

function ShowAdvancedQueryWindow(){
  var s  = "<select id='fieldNames' name='fieldNames' size='10' multiple >";
      s += "<option value='recNo'>Record Number</option>";
      s += "<option value='oName'>Listing Name</option>";
      s += "<option value='stNumber'>Street Number</option>";
      s += "<option value='stName'>Street Name</option>";
      s += "<option value='telno'>Telephone number</option>";
      s += "<option value='email'>email</option>";
      s += "<option value='showTel'>Show Telno</option>";
      s += "<option value='showEmail'>Show email</option>";
      s += "<option value='blastEmail'>BlastEmail</option>";
      s += "<option value='password'>Password</option>";
      s += "</select>"
      s += "<button type=button onclick='DoCustomSearch()'>Do Search</button>";
  document.getElementById('mainBody').innerHTML = s;
}
</script>

</body>
</html> 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...