CODEWITHSUNDEEP
javascriptforms
onTheInternet
onTheInternet

Reputation: 7253

javascript redirect isnt working

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.

Upvotes: 0

Views: 84

Answers (5)

Bagofjuice
Bagofjuice

Reputation: 382

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>

Upvotes: 0

gfullam
gfullam

Reputation: 12045

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

Upvotes: 0

Cagatay Ulubay
Cagatay Ulubay

Reputation: 2559

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.

Upvotes: 1

j08691
j08691

Reputation: 207901

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)

Upvotes: 1

Frank van Luijn
Frank van Luijn

Reputation: 470

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

Upvotes: 0

Related Questions