Question

当用户未在搜索框中输入任何内容时，如何让页面无效？

如果搜索框中没有任何内容，我希望页面保持不变。

我该怎么做？

这是我目前的代码：

<html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
    </head>
    <script type="text/javascript">

        //document.getElementById("suggestion")

        function getSuggestion(q) {
            var ajax;
            if(window.XMLHttpRequest)//for ie7+, FF, Chrome
                ajax = new XMLHttpRequest();//ajax object
            else
                ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
            ajax.onreadystatechange = function() {
                if(ajax.status === 200 && ajax.readyState === 4) {
                    //if result are not there then don't display them
                    if(ajax.responseText === "")
                        document.getElementById("suggestion").style.visibility = "hidden";
                    else {
                        document.getElementById("suggestion").style.visibility = "visible";
                        document.getElementById("suggestion").innerHTML = ajax.responseText;
                    }
                }
            };
            ajax.open("GET", "suggestion.php?q=" + q, false);
            ajax.send();
        }
    </script>
    <body>
        <form method="GET" action="search.php" name="q">
            <table align="center">
                <tr>
                    <td>
                        <h1><center>Brandon's Search Engine</center></h1>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
                               onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>

                        <div id="suggestion" style="width: 648px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                        <input type="reset" value="Clear" style="height: auto; width: 50px; padding: 2px" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        To insert your site in result fill in the form at <a href="insert.php">here</a>.
                    </td>
                </tr>
            </table>
            <input type="hidden" name="page" value="0" />
        </form>
    </body>
</html>

Answer 1

您应该验证表单，例如：

<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">

您的功能将是：

function validateForm() {
 if(document.getElementById('q').value=='') return false;
 return true;
}

Answer 2

您可以在表单提交功能上执行此操作，如：

您的表单将如下：

<form method="GET" action="search.php" name="q" id="searchForm">

脚本就像：

$("#searchForm").submit(function(e) {
if($("#q").val() == '')
{
    e.preventDefault();
}
});

顺便说一句，这个解决方案正在使用JQuery。

当用户未在搜索框中输入任何内容时，请不执行任何操作

2 个答案: