Question

我的ASP .NET项目中有一个表单，它接受用户输入，并将其附加到URL以搜索Wiki。当您输入搜索词时，该表单将完美运行，并单击“搜索”按钮，但是当您在输入框中键入并按Enter键时，页面将刷新并清除该框。

我的HTML

        <form>
            <label id="sideBarLabel"> Services
                <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
            </label>
            <a href="#" id="searchWikiButton" class="button" onclick="searchWiki();">Search  Wiki</a>
        </form>

my js

function searchWiki(){
    var siteQuery = $('#query-string').val();
    window.location.href = "/dosearchsite.action?queryString=" + siteQuery;

}

有人可以帮忙吗？

Answer 1

您的searchWiki（）js方法仅在您的按钮上引发evenement onclick时调用，而不是在您的表单提交时调用。有几种方法可以实现您的目标：

添加一个js方法来捕获表单的onsubmit事件：

$("form").on("submit", searchWiki());

或在表单上添加标记：

<form onsubmit="searchWiki()">

或者在表单上指定action属性：

<form action="/dosearchsite.action">

请注意，在ASP.NET中，ModelBinder将使用输入的name属性将表单输入链接到控制器操作参数。这意味着您不应该自己在网址中指定它们。如果您希望表单由ajax提交，您还应该使用Html.BeginForm或Ajax.BeginForm声明您的表单。

@Html.BeginForm("ActionName", "ControllerName")
{
    <label id="sideBarLabel">Services
        <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="submit" class="button" value="Search Wiki"/>
}

当您按Enter键时，这将调用searchWiki。

Answer 2

$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});

输入表格提交按

2 个答案: