HTML form run javascript on enter?

Question

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.com/search?q=' + gSearch;
   //window.location.replace('https://www.google.com/search?q=' + gSearch);
}

David Hedlund · Accepted Answer · 2015-11-17 13:55:29Z

9

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.com/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">

answered Nov 17, 2015 at 13:55

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SidOfc Over a year ago

This is better and simpler than anything else including my answer here!

10 Replies Over a year ago

This makes a lot of sense! Will accept in a few minutes. This works with any "?var=" things in a url, right?

David Hedlund Over a year ago

Well this is exactly the kind of task that html forms were designed to do. @10Replies: Yes, when using method="GET" (which is also default, if you omit method entirely) the data will be posted as a querystring in the format name=value for any non-disabled form fields.

ddsnowboard Over a year ago

@10Replies Yes, it will. GET requests are passed through those.

Dirk-Jan · Accepted Answer · 2015-11-17 13:58:30Z

2

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.

edited Nov 17, 2015 at 13:58

answered Nov 17, 2015 at 13:56

Dirk-Jan

1,1491 gold badge10 silver badges21 bronze badges

1 Comment

ojovirtual Over a year ago

Change your button for a input type='submit' and then it will work on both enter and click.

Romulo · Accepted Answer · 2015-11-17 13:57:22Z

1

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;
}

answered Nov 17, 2015 at 13:57

Romulo

5,1542 gold badges21 silver badges31 bronze badges

Comments

Dilip Oganiya · Accepted Answer · 2015-11-17 13:57:49Z

1

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.com/search?q=' + gSearch; } });

answered Nov 17, 2015 at 13:57

Dilip Oganiya

1,56414 silver badges22 bronze badges

Comments

Ruan Mendes · Accepted Answer · 2015-11-17 13:55:46Z

0

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.com/search and make the text field's name be "q"

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

answered Nov 17, 2015 at 13:55

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Comments

SidOfc · Accepted Answer · 2015-11-17 13:58:21Z

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...
}

Collectives™ on Stack Overflow

HTML form run javascript on enter?

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related