CODEWITHSUNDEEP
javascript
Lucas Phillips
Lucas Phillips

Reputation: 645

Javascript to load page not working

I'm trying to get text from a text input, append it to a URL, and go to that URL, using Javascript. But when I submit, it appears to just reload the page.

http://jsfiddle.net/E3vv6/

<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="main.css" />
        <script type="text/javascript">
            function loadSearchResult(searchToLoad) {
                window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
            }
        </script>
    </head>
    <body>
        <form onsubmit="loadSearchResult(document.getElementById('googleBox').value)" method="post">
            <fieldset>
                <legend>Search</legend>
                <input type="text" id="googleBox">
            </fieldset>
        </form>
    </body>
</html>

Upvotes: 0

Views: 68

Answers (2)

m59
m59

Reputation: 43785

You need to use event.preventDefault() in the submit function.

Live Demo (click).

Further, inline js (onsubmit in your html) is bad practice for a lot of reasons. Here are some: https://www.google.com/search?q=Why+is+inline+js+bad%3F

If would be better to get a reference to the form with javascript and attach the event listener.

<form id="myForm">
  <input type="submit" value="Submit">
</form>

JavaScript:

var myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(e) {
  myFunction();
  e.preventDefault();
});

function myFunction() {
  console.log('submitted!'); 
}

Upvotes: 2

putvande
putvande

Reputation: 15213

You need to prevent the default behaviour of the onsubmit.
You could use return false:

<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="main.css" />
        <script type="text/javascript">
            function loadSearchResult(searchToLoad) {
                window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
                return false;
            }
        </script>
    </head>
    <body>
        <form onsubmit="return loadSearchResult(document.getElementById('googleBox').value)" method="post">
            <fieldset>
                <legend>Search</legend>
                <input type="text" id="googleBox">
            </fieldset>
        </form>
    </body>
</html>

Upvotes: 1

Related Questions