javascript重定向无法正常工作

Question

I have a form that takes a users input and redirects to a the window to a URL with their input appended to the end.

Here is my HTML

        <form id="wikiForm">
            <label id="sideBarLabel">VoIP Services
                <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
            </label>
            <input type="submit" value="Search" onclick="searchWiki();" />
        </form>

The javascript it runs

function searchWiki() {
    alert("Form Works!");
    var siteQuery = $('#query-string').val();
    window.location.href = "http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery;
    alert("SECOND MESSAGE");
}

The issue is that it does not redirect. It only appends the 'siteQuery' variable to the end of the current URL. I know its calling the javascript because I see both alerts. I'm not sure what I'm doing wrong here.

Answer 1

The issue is due to the fact that you're actually submitting your form, and the redirection is lost as the form submission occurs first. There are two easy ways to fix this:

1. Change the type of the input from submit to button , OR
2. Stop the submission of the form by returning false from your function and changing the call of the function to onclick="return searchWiki();"

jsFiddle example (1)

jsFiddle example (2)

Answer 2

There reason is because you using type="submit" , which submits and sends an GET header to the default action parameter (current page).

Change the type="submit" to type="button" .

<form id="wikiForm">
    <label id="sideBarLabel">VoIP Services
        <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="button" value="Search" onclick="searchWiki();" />
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    function searchWiki() {
        alert("Form Works!");
        var siteQuery = $('#query-string').val();
        alert(siteQuery);
        window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);
        alert("SECOND MESSAGE");
    }
</script>

I tried the code with type="submit" and it's alerting, but not redirecting, because the submit is prioritized before the window.location change, thats the reason it just appends a ?queryString=value to the current url. If you change the type like showed in the code above, it's working perfectly.

Answer 3

Can't you just use assign?

window.location.assign("http://wiki.voipinnovations.com/dosearchsite.action?queryString=" + siteQuery);

Check out: http://www.w3schools.com/js/js_window_location.asp

Answer 4

Use default action and method attributes instead

The HTML form element provides the mechanism for doing this out of the box.

<form id="wikiForm" action="http://wiki.voipinnovations.com/dosearchsite.action" method="GET">
    <label id="sideBarLabel">VoIP Services
        <input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
    </label>
    <input type="submit" value="Search" />
</form>

But, if you must use javascript, make this change:

From:

window.location.href = "…";

To:

window.location.assign("…"); // or
window.location = "…"

This is because location.href is a read-only property and location.assign() is the proper method for setting the new location to be loaded. You may also directly assign a string to the location object:

Whenever a new value is assigned to the location object, a document will be loaded using the URL as if location.assign() had been called with the modified URL.

Source: MDN

Answer 5

Change input type=submit to type=button

http://plnkr.co/edit/w4U7Sbm3XSKN8j3zUFMe?p=preview

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