Form's input default text_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-13 13:12 出处：网络

I desperately need to have my search form\'s default input text to change based on the user\'s selection in the form\'s select input. The current default input text is Enter Keywords… and stays the s

I desperately need to have my search form's default input text to change based on the user's selection in the form's select input. The current default input text is Enter Keywords… and stays the same no matter what option is selected. What I want, for example, is when the user selects "Employee Directory" to have the default input text for the search field to change to Enter Employee's First Name…

This is the desired input fields for each selection:

"Website" = Enter Keywords…

"Employee Directory" = Enter Employee's First Name…

"Publications Center" = Enter Publication's Information…

Here is my code as it sits currently:

<script type="text/javascript">
    function dosearch() {
    var sf=document.searchform;
    var submitto = sf.engines.options[sf.engines.selectedIndex].value + escape(sf.s.value) + ((sf.engines.selectedIndex=='1')?('&cat=29'):(''));
    window.location.href = submitto;
    return false;
    }
<开发者_运维问答;/script>



<form name="searchform" class="search" method="get" onSubmit="return dosearch();"> 

    <select class="engines" name="engines" id="el08">
        <option value="/?s=" selected>Website</option>
        <option value="/?s=">Publications Center</option>
        <option value="/employee-directory?query=name&contact_dir_s=">Employee Directory</option>
    </select>

    <input name="s" class="input" type="text" value="Enter Keywords..." onfocus="if (this.value == 'Enter Keywords...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Keywords...';}" size="18" maxlength="50"> 

    <input type="submit" name="searchsubmit" class="button" value="Go" />

 </form>

Anybody with the expertise to help code this or offer suggestions, please do! Cheers!

Updated with code that actually works (only tested in IE). This version notes when the selected search option changes and then updates the input if it was displaying the default prompt that went with the previously selected search option.

<body onload="setDefault();">
<form name="searchform" class="search" method="get" onSubmit="return dosearch();">
   <select class="engines" name="engines" id="el08" onchange="setDefault();">
       <option value="/?s=" selected>Website</option>
       <option value="/?s=">Publications Center</option>
       <option value="/employee-directory?query=name&contact_dir_s=">Employee Directory</option>
   </select>
   <input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
   <input type="submit" name="searchsubmit" class="button" value="Go" />
</form> 
</body>
<script>
function myFocusHandler(textField) {
   if (textField.value == defText)
      textField.value = "";
}

function myBlurHandler(textField) {
    if (textField.value == "")
       textField.value = defText;
}

var defText;
var defOptions = {
      "Website" : "Enter keywords...",
      "Employee Directory" : "Enter employee's first name...",
      "Publications Center" : "Enter Publication's Information..."
      // and any other options you may need
      };

function setDefault() {
   var sel = document.getElementById("el08"),
       input = document.getElementById("searchBox"),
       prevDefText = defText;

   defText = defOptions[sel.options[sel.selectedIndex].text] || "Enter search term...";
   if (prevDefText == undefined || input.value == prevDefText)
      input.value = defText;
}
</script>

Could cut down on use of globals by using a variation of the module pattern or something, but that's an issue for another day.