Multiple Drop Menu Query

[deleted-user-K_IRAXrpGKsG]

I'm trying to create 2 drop menus that will run just one query. In other words, if the user wants to know conferences within 3 weeks, they could choose both events and date from two drop menus.

Here is the JavaScript code that  seems to be working fine:

function queryEvents() {
  // get current dropdown values
  var dateRangeDD = document.getElementById("dateRange");
  var dateRange = dateRangeDD.options[dateRangeDD.selectedIndex].text;
  var dateRangeVal = dateRangeDD.options[dateRangeDD.selectedIndex].value;
  alert ("dateRange = " + dateRange + ", dateRangeVal = " + dateRangeVal);
  var typeDD = document.getElementById("eventType");
  var eventType = typeDD.options[typeDD.selectedIndex].text;
  var eventTypeVal = typeDD.options[typeDD.selectedIndex].value;
  alert ("eventType = " + eventType + ", eventTypeVal = " + eventTypeVal);
  var dateRangeSQL;
  switch (dateRange) {
   case "sqlAll":
    dateRangeSQL = sqlAll;
    break;
   case "sqlWeeks2":
    dateRangeSQL = sqlWeeks2;
    break;
   case "sqlWeeks4":
    dateRangeSQL = sqlWeeks4;
    break;
   case "sqlMonths3":
    dateRangeSQL = sqlMonths3;
    break;
   case "sqlMonths6":
    dateRangeSQL = sqlMonths6;
    break;
  }
  alert ("dateRangeSQL = " + dateRangeSQL);
  
  // get where clause for event type
  var eventTypeSQL;
  switch (eventType) {
   case "All":
    eventTypeSQL = "Type = '*'";
   case "Conference":
    eventTypeSQL = "Type = 'Conference'";
    break;
   case "Lecture":
    dateRangeSQL = "Type = 'Lecture'";
    break;
   case "Workshop":
    dateRangeSQL = "Type = 'Workshop'";
    break;
  }
 
 
 // built full SQL where clause for query
 var whereSQL = dateRangeSQL + " AND " + eventTypeSQL;
 
 // execute query
 executeQueryTask(whereSQL);

 }

And here is the HTML Code that I can't quite figure out.

<form name="campsite_search"  method="get">
 <select name="state" id="dateRange">
         <option value="sqlAll">All events</option>
   <option value="sqlWeeks2">2 Weeks</option>
   <option value="sqlWeeks4">4 Weeks</option>
   <option value="sqlMonths3">3 Months</option>
   <option value="sqlMonths6">6 Months</option>
    </select>
    <select name="radius" id="eventType">
   <option value="All">All events</option>
   <option value="Conference">Conference</option>
   <option value="Lecture">Lecture</option>
   <option value="Workshop">Workshop</option>  
    </select>
 <input type="BUTTON" OnClick="queryEvents()"  class="input" value="Continue" />

Any thoughts?

Thanks,
Pat

[KenDoman]

on an HTML form, if you don't want the button to submit the inputs to a server-side script (a php page for instance), you should change the onclick on the button to the following:

<input type="BUTTON" OnClick="queryEvents(); return false;"  class="input" value="Continue" />

Hope that helps.

[BrettLord-Castillo]

Are you using the dojo framework?
If so, an alternative is to create two dijit.form.Select elements and then using a dijit.form.Button
Markup:

<div name="campsite_search">
 <select name="state" id="dateRange" data-dojo-type="dijit.form.Select">
  <option value="sqlAll">All events</option>
  <option value="sqlWeeks2">2 Weeks</option>
  <option value="sqlWeeks4">4 Weeks</option>
  <option value="sqlMonths3">3 Months</option>
   <option value="sqlMonths6">6 Months</option>
 </select>
 <select name="radius" id="eventType" data-dojo-type="dijit.form.Select">
  <option value="All">All events</option>
  <option value="Conference">Conference</option>
  <option value="Lecture">Lecture</option>
  <option value="Workshop">Workshop</option>  
 </select>
 <button data-dojo-type="dijit.form.Button" OnClick="queryEvents" type="button">Continue</button>
</div>

Script:

function queryEvents() {
 // get current dropdown values
 var dateRangeDD = dijit.byId("dateRange"), typeDD = dijit.byId("eventType");
 var dateRange = dataRangeDD.get("Value"), eventType = typeDD.get("Value");
 var dateRangeSQL, eventTypeSQL;
 //get where clause for event type
 switch (dateRange) {
  case "sqlAll":
   dateRangeSQL = sqlAll;
   break;
  case "sqlWeeks2":
   dateRangeSQL = sqlWeeks2;
   break;
  case "sqlWeeks4":
   dateRangeSQL = sqlWeeks4;
   break;
  case "sqlMonths3":
   dateRangeSQL = sqlMonths3;
   break;
  case "sqlMonths6":
   dateRangeSQL = sqlMonths6;
   break;
 }
 
 // get where clause for event type
 switch (eventType) {
  case "All":
   eventTypeSQL = "Type = '*'";
  case "Conference":
   eventTypeSQL = "Type = 'Conference'";
   break;
  case "Lecture":
   dateRangeSQL = "Type = 'Lecture'";
   break;
  case "Workshop":
   dateRangeSQL = "Type = 'Workshop'";
   break;
 }
 
 
 // built full SQL where clause for query
 var whereSQL = dateRangeSQL + " AND " + eventTypeSQL;
 
 // execute query
 executeQueryTask(whereSQL);

}

[aubinmaynard]

what would the advantage be to processing this request with php or other server side language?  Thanks!!