0

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.

onTheInternet
  • 6,421
  • 10
  • 41
  • 74

5 Answers5

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)

j08691
  • 204,283
  • 31
  • 260
  • 272
  • This is great but can you tell me why it doesnt work when you hit the enter button? Yours does the same thing mine does... refresh the page. When i click search it works but when I hit enter it doesnt. – onTheInternet Apr 30 '15 at 15:06
  • So you want hitting the enter key to trigger the redirection, or you don't? When a form has a single text input, the default behavior when hitting enter on it is to submit the form. – j08691 Apr 30 '15 at 15:26
  • Right but the weird thing is that it isnt doing that for me. I want hitting the enter key to trigger the redirection. But the redirection only works when I click the submit button. I dont understand why this is. – onTheInternet Apr 30 '15 at 16:56
  • 1
    Right because either way you're essentially bypassing the form's submit event in order to run your JavaScript. You could attach an event handler to the input box to check on keypresses whether the enter key was pressed and if so, run the same redirection code. – j08691 Apr 30 '15 at 17:20
1

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.

Cagatay Ulubay
  • 2,491
  • 1
  • 14
  • 26
  • This is good. But can you explain to me why my form doesnt submit when you press enter on keyboard with this form? It only works when you actually click on the button. When you hit enter, it appends the 'queryString' to the current URL and refreshes the page. – onTheInternet Apr 30 '15 at 15:21
  • Because you using an `onclick`-Event handler. You could remove the `
    ` and just using javascript for the whole process, because you are not using the GET/POST for your self, but for the redirect url. This will prevent it from submiting. Than you can do a `keypress`-Event on `window` or the button and use it. Example: http://stackoverflow.com/questions/979662/how-to-detect-pressing-enter-on-keyboard-using-jquery
     – Cagatay Ulubay May 03 '15 at 20:25
0

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

Frank van Luijn
  • 470
  • 4
  • 16
0

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

gfullam
  • 11,531
  • 5
  • 50
  • 64
0

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>
Bagofjuice
  • 282
  • 2
  • 13