Change what search box is searching for via drop down

I currently have a "search box" in our admin navigation that is submitting to a searchOrdersAction.jsp page.

<tr align="left" valign="top">
            <td>&nbsp;</td>
            <form action="searchOrdersAction.js开发者_如何学JAVAp" name="form" method="get" ><td><input name="CustEmail" type="text" class="DataEntry" id="CustEmail"></td><td><input name="Submit" type="submit" class="SOBut" value="Go"></td></form>
         </tr>

As of now, the search box only allows searching through the customer email. I was wondering is it possible to include a dropdown, which would have two options, which would change what is being searched for? I can physically change the search by changing the input's id from "CustEmail" to "OrderID".

Note: I can only use one search box. Is it even possible to change?

---

I assume you can't change the search jsp yourself, and can only change the admin interface to it. In that case, this should work:

<tr align="left" valign="top">
  <td>&nbsp;</td>
  <form action="searchOrdersAction.jsp" name="form" method="get">
    <td><input name="CustEmail" type="text" class="DataEntry" id="frm_input"></td>
    <td><select onchange="document.getElementById('frm_input').name=this.value">
          <option selected value="CustEmail">Customer Email</option>
          <option value="OrderID">Order ID</option>
        </select>
    </td>
    <td><input name="Submit" type="submit" class="SOBut" value="Go"></td>
  </form>
</tr>

Untested, but it's pretty straightforward.

---

Just add a dropdown and let the form submit to a servlet.

<form action="search">
    <input type="text" name="query" />
    <select name="type">
        <option value="order">Order ID</option>
        <option value="email">Customer email</option>
    </select>
    <input type="submit" />
</form>

In the servlet, do the search job based on the input.

String type = request.getParameter("type");
String query = request.getParameter("query");
List<Result> results = null;

if ("order".equals(type)) {
    results = orderService.find(query);
} else if ("email".equals(type)) {
    results = emailService.find(query);
}

request.setAttribute("results", results);
request.getRequestDispatcher("/WEB-INF/search.jsp").forward(request, response);

In the /WEB-INF/search.jsp you can display the results the usual way.

No need for JavaScript which wouldn't work anyway if the user has JS disabled (mobile browsers for example).

---

Of couse you can do it. You have to use just javascript.

What you have to do:

Add the attribute 'onSubmit' to the form tag

<form action="searchOrdersAction.jsp" {...} onSubmit="return changeMe()">

Write a function which stores the last previous value into a variable with global scrope:

lastValue = "";
function lastValue()
{
  document.getElementByID("theSelectBox").value;
}

Write a javascript function which reads the value or the option text from the selectbox and changes the attributes ID and Name

function changeMe()
{
 var selectValue = document.getElementByID("theSelectBox").value; 
 var myInputField = document.getElementByID(selectValue);

 return true;
}

Hopefully it will help.

PS: If you can use jquery, the code that you need is quiet smaller and easier.

---

You can achieve this using javascript by subscribing to the onchange event of a select box.

Add a dropdown to switch between the search types

<select id='search_field_selector'>
    <option value='CustEmail'>Email</option>
    <option value='OrderID'>Order ID</option>
</select>

Use javascript to set the search type based on the value of the select box

//bind the on change event to the select box
document.getElementById('search_field_selector').addEventListener('change',
    switchSearchType,false);

//Switch the ID of the input when the select box changes
function switchSearchType(e){
    var target = document.getElementById('CustEmail');
    if(!target){
        target = document.getElementById('OrderID');
    }
    target.setAttribute('id',this.value);
}