javascript 如果文本框元素为空白，则执行不同的操作

Question

试图让这个搜索表单进行不同的搜索，但如果搜索框为空，我希望它默认为不同的页面。这是第一个 else if。即使文本框为空，它仍然默认为第一个操作。

<script type="text/javascript">
    function changeAction() {   
      if(document.getElementById('searchOption').value == "title" && document.getElementById('searchText').value!=null) {
       document.getElementById('searchForm').action = 'catalog.com=0&term=' + escape(document.getElementById('searchText').value);
      }
      **else if(document.getElementById('searchOption').value == "title" && document.getElementById('searchText').value===null) {
       document.action = 'differentPage.com'
      }**
      else if(document.getElementById('searchOption').value == "keyword") {
        document.getElementById('searchForm').action = 'catalog.com?keyword=' + escape(document.getElementById('searchText').value);
      }
  else{
       document.getElementById('searchForm').action = "mysite.com/searchResults.html";
       $('#searchForm').attr('method', 'get');
       $('#searchText').attr('name', 'q');
       }
 }
</script>

<form id="searchForm" name=search method=post>
    <div class="subscribe">
        <div class="text">
            <input name="term" type="text" id="searchText"/>
        </div>
        <select id="searchOption" name="searchOption" title="search">
            <option name="index" value="title" selected="selected">TITLE IN CATALOG</option>
            <option name="index" value="keyword" type="hidden">CATALOG KEYWORD</option>
            <option name="nothing" value="googleSearch" type="hidden">LIBRARY WEBSITE</option>
        </select>
        <!-- for google search appliance -->
        <input value="slco_pub" name="client" type="hidden">
        <input value="slco_pub" name="proxystylesheet" type="hidden">
        <input value="xml_no_dtd" name="output" type="hidden">
        <input value="mainSite" name="site" type="hidden">
        <!-- end of necessary for google search appliance -->
        <!-- for ILS -->
        <INPUT name=menu value=search type=hidden>
        <INPUT name=aspect value=basic_search type=hidden>
        <INPUT name=profile value=maincentral type=hidden>
        <!-- Left from old <INPUT name=index value=".TW" type=hidden> -->
        <INPUT name=index value="PALLTI" type=hidden>
        <!-- end of necessary for google search appliance-->
    <!--Button Graphic-->
        <input type="image" src="/sebin/m/p/btn-search.gif" alt="search button" onClick="changeAction();" />
    </div>
</form>

Answer 1

document.getElementById('searchText').value!=null 使用松散比较，因此如果值为null 或undefined，则为真。在这种情况下，它将始终是一个字符串。你要测试的是它是否是一个非空字符串，像这样：

var option = document.getElementById('searchOption').value,
    text = document.getElementById('searchText').value,
    form = document.getElementById('searchForm');

if (option === "title" && text.length > 0) {
    form.action = 'catalog.com=0&term=' + escape(text);
}
else if (option === "title" && text.length === 0) {
    form.action = 'differentPage.com'
}
else if (option === "keyword") {
    form.action = 'catalog.com?keyword=' + escape(text);
}
else {
    form.action = "mysite.com/searchResults.html";
    $('#searchForm').attr('method', 'get');
    $('#searchText').attr('name', 'q');
}

请注意，我使用了严格比较。