I am building a newtab page here:

This page consists of a pretty design thing, and a google search bar. However, when I press enter, rather than searching google it opens the same window with ("TEST_INPUT" being whatever was typed into the box).

When I press the submit button off to the left, It actually searches.

How can I make this search when the enter key is pressed?

Here is the code important to the form.

HTML:

<form NAME="myform">
  <div id = "textbox">
   <INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
  </div>
   <input type="button" name="button" value="Click" onClick="google(this.form)">
</form>

CSS:

#backgroundstuff canvas {
   outline: 0px;
   position: fixed;
   left: 0px;
   top: 0px;
   /*width: auto;
   height: 100%;*/

   z-index: -99;
}

Javascript

function google(form) {
   var gSearch = form.inputbox.value;
   window.location.href = '=' + gSearch;
   //window.location.replace('=' + gSearch);
}

I am building a newtab page here:

http://codepen.io/Thisisntme/full/VvgeyV

This page consists of a pretty design thing, and a google search bar. However, when I press enter, rather than searching google it opens the same window with http://codepen.io/Thisisntme/full/VvgeyV?inputbox=TEST_INPUT ("TEST_INPUT" being whatever was typed into the box).

When I press the submit button off to the left, It actually searches.

How can I make this search when the enter key is pressed?

Here is the code important to the form.

HTML:

<form NAME="myform">
  <div id = "textbox">
   <INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
  </div>
   <input type="button" name="button" value="Click" onClick="google(this.form)">
</form>

CSS:

#backgroundstuff canvas {
   outline: 0px;
   position: fixed;
   left: 0px;
   top: 0px;
   /*width: auto;
   height: 100%;*/

   z-index: -99;
}

Javascript

function google(form) {
   var gSearch = form.inputbox.value;
   window.location.href = 'https://www.google./search?q=' + gSearch;
   //window.location.replace('https://www.google./search?q=' + gSearch);
}

• javascript
• html
• forms

6 Answers 6

The enter key automatically submits the form.

If you do not have an action defined on your form, it will default to the same page.

The posted data will use the name parameter of your form fields.

Using proper form markup will solve both issues.

• Setting an action:

  <form method="GET" action="https://www.google./search">
  

• Setting name to the name of the parameter you want to pass:

  <input type="text" name="q" placeholder="Search with me!">
  

With both of these taken care of, you won't need the google function. Your "search" button can be a simple submit:

<input type="submit" value="Click">

change your html to:

<form NAME="myform" onsubmit="event.preventDefault(); google(this)">
  <div id = "textbox">
   <INPUT type="text" name="inputbox" value="" placeholder="Search with me!">
  </div>
   <input type="submit" name="button" value="Click">
</form>

So that it works on the submit of the form not on the click of the button.

Also make sure to cancel the event, like Juan Mendes showed below.

You can do something like:

<form onsubmit="return google(this)">
    <input type="text">
    <input type="submit">
</form>

And change your google function to:

function google(form) {
   // YOUR LOGIC HERE
   return false;
}

This way you can implement search results based on keyboard click.

$( "#txtBox" ).keypress(function( event,value ) { if ( event.which == 13 ) { var gSearch = form.inputbox.value; window.location.href = 'https://www.google./search?q=' + gSearch; } });

When you hit enter, it submits the form and reloads the page. You need to listen to the form submit event instead of the click. Then you can call event.preventDefault() to prevent the form from being submitted.

<form NAME="myform" onsubmit="event.preventDefault(); google(this)">

However, you don't need JavaScript, just the action attribute of the form to be https://www.google./search and make the text field's name be "q"

<form NAME="myform" method="GET" action="https://www.google./search">
    <input type="text" name="q" placeholder="Search with me!">

Since it is a form pressing enter will launch an event. This event is what submits your request and reloads the page.

To make it go to google instead you should start by capturing the event and making sure it doesn't bubble up or do anything by default.

To do this, simply add an id to your form and capture the event e.g.

<form name="myform" id="to_cancel_submit">

then in your JS, target the element here

form = document.getElementById('to_cancel_submit')

after you have the form in a variable (or directly, doesn't matter) you bind the submit handler for it and prevent the default events like this

form.submit = function(e) {
    e.preventDefault(); // pretty obvious
    e.cancelBubble(); // prevents bubbling to parents
    return false; // both of the above

    // call your functions here...
}