1

I'm building a basic site where I want users to be able to enter a 'keyword' that redirects them to a specific page. Different keywords will redirect to different pages.

For example, Apple will redirect to Apple.com (just an example, not on my site).

I found another person's Javascript for this on another website (seen below). It works nearly perfect except for one minor detail - users MUST click the button for the redirect to happen. Pressing the enter key does not work. I've tried changing the input type to "submit" rather than "button," but still to no luck. Anyone have some advice?

<script type="text/JavaScript">
<!--
function Login(){
var done=0;
var keyword=document.enter_keyword.keyword.value;
//keyword=keyword.toLowerCase();
if (keyword=="toms") { window.location="http://www.toms.com"; done=1; }
if (keyword=="apple") { window.location="http://www.apple.com"; done=1; }
if (keyword=="orange") { window.location="http://www.orange.com"; done=1; }
if (done==0) { alert("WARNING:Incorrect keyword you plonker!!!"); }
}
//-->
</script> 

</head>

<body>

<form name=enter_keyword>
<table border="1" cellpadding="2" cellspacing="2" bgcolor="#7B97E0">
<tr>
<td>
<font color="#ffffff"><b>Enter keyword:</b></font>
</td>
<td><input type=text name=keyword>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button value="Login!" onClick="Login()">
</td>
</tr>
</table>
</form>
0

8 Answers 8

2

It requires a click because the only thing calling the function is the input onClick event. Get rid of onClick="Login()" and change type="submit" in your <input> and add onSubmit="Login()" to your <form>

<script type="text/JavaScript">
<!--
function Login(){
var done=0;
var keyword=document.enter_keyword.keyword.value;
//keyword=keyword.toLowerCase();
if (keyword=="toms") { window.location="http://www.toms.com"; done=1; }
if (keyword=="apple") { window.location="http://www.apple.com"; done=1; }
if (keyword=="orange") { window.location="http://www.orange.com"; done=1; }
if (done==0) { alert("WARNING:Incorrect keyword you plonker!!!"); }
}
//-->
</script> 

</head>

<body>

<form name=enter_keyword onSubmit="Login()">
<table border="1" cellpadding="2" cellspacing="2" bgcolor="#7B97E0">
<tr>
<td>
<font color="#ffffff"><b>Enter keyword:</b></font>
</td>
<td><input type=text name=keyword>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value="Login!">
</td>
</tr>
</table>
</form>
2

if u can use jquery use this

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

else use this i set the form to onsubmit="return false" and did this

<input type="button" value="Submit" onClick="document.Survey.submit()" style="font-size: 1.25em;">

or use this

$("#form").submit( function (e) {
    e.preventDefault(); ...}
1

As has been said, the problem is that you are relying on a onClick event to trigger your javascript function, so the click is required.

Also, the behavior of pressing 'Enter' in a text field to trigger a form submission is dependent on there being either:

  • Only one text field, OR
  • An <input type='submit'> (or perhaps <button type='submit'>, etc., somewhere on the form.

(More detailed discussion of that particular behavior and its whys can be found here: Form not submitting when pressing enter)

Since you only have one text field in the form, it is correctly triggering the submit action when pressing enter; so then you need to capture the submit() event of the form, using its onSubmit= attribute (or, alternatively, using jQuery, or some other javascript code, to add the same event handler to the form. The jQuery way has some advantages, but it is effectively equivalent for this purpose).

<form name="enter_keyword" onSubmit="javascript:redirect(); return false;">

(I've renamed the function to redirect() because it seems like that's what we're doing, more than logging in, here. Also, the return false; after the function call will stop the form from actually submitting anything, since we're handling it with the javascript function instead. (Without the return false;, by default, forms will submit to URI is setup as the form's action= attribute; if it's not set, they will submit to the current URL. It's possible to both process the form with javascript and then submit the data to a server-side handler, as well, in which case it'll return true (which is default).)

I made a working jsfiddle of this, along with some other changes (explanation follows):

function redirect() {
  // var done=0;
  var keyword = document.enter_keyword.keyword.value;
  //keyword=keyword.toLowerCase();
  //alert(keyword);

  var keyword_map = {
    'toms': 'toms.com',
    'apple': 'apple.com',
    'orange': 'orange.com'
  }

  var protocol = document.location.protocol; // to handle https://, etc., like here on jsfiddle

  if (keyword in keyword_map) {
    var target_url = protocol + '//' + keyword_map[keyword];
    alert("Attempting to redirect you to: " + target_url);
    window.location = target_url;

  } else {
    alert("WARNING:Incorrect keyword you plonker!!!");
  }

  /*
  if (keyword=="toms") { window.location = protocol + "www.toms.com"; done=1; }
  if (keyword=="apple") { window.location = protocol + "www.apple.com"; done=1; }
  if (keyword=="orange") { window.location= protocol + "www.orange.com"; done=1; }
	if (done==0) { alert("WARNING:Incorrect keyword you plonker!!!"); }
  */


}
<form name="enter_keyword" onSubmit="javascript:redirect(); return false;">
  <table border="1" cellpadding="2" cellspacing="2" bgcolor="#7B97E0">
    <tr>
      <td>
        <font color="#ffffff"><b>Enter keyword:</b></font>
      </td>
      <td>
        <input type=text name=keyword>
      </td>
    </tr>
    <tr>
      <td colspan=2 align=center>
        <input type=submit value="Go!">
      </td>
    </tr>
  </table>
</form>

Instead of hardcoding if (keyword="keyword") { window.location = "location"; done=1; } for each case, why not make a dictionary map (technically an object in javascript, but oh well) mapping all the available keywords to urls? :

  var keyword_map = {
    'toms': 'toms.com',
    'apple': 'apple.com',
    'orange': 'orange.com'
  };

Then, instead of setting done=0 at the beginning, done=1 in each branch, and checking at the end, we can just do:

  if (keyword in keyword_map) {
    // redirect to keyword_map[keyword]

  } else {
    alert("WARNING:Incorrect keyword you plonker!!!");
  }

And instead of typing http://www. for each location, just store the basic url, and then apply the protocol each time.

So that this can work even on a site that's being served up as https:// (for example, jsfiddle, if you're logged in), we can check the protocol of the current page, and just prepend that:

  var protocol = document.location.protocol; // to handle https://, etc., like here on jsfiddle

  if (keyword in keyword_map) {
    var target_url = protocol + '//' + keyword_map[keyword];
    alert("Attempting to redirect you to: " + target_url);
    window.location = target_url;

  } else {
    alert("WARNING:Incorrect keyword you plonker!!!");
  }

Now you have a framework for doing what you were trying to do a little more cleanly and elegantly, and hopefully this explanation has served to increase your understanding of what was going on. : )

0

This function will trigger the click event of button on pressing enter

$("input[name=keyword]").keyup(function(event){
    if(event.keyCode == 13){
        $("input[type=button]").click();
    }
 });
0
$(document).ready(function() {
 $("input[name=keyword]").keydown(function(event) {

                if ( event.keyCode == 13)
                 {
                        //do something
                 }

            });
});
0

Try changing this line:

<input type="button" value="Login!" onClick="Login()">

To this:

<input type="submit" value="Login!">

and add an onSubmit to the form:

<form name="enter_keyword" onSubmit="Login();">

This is the way I prefer to do this and it always works for me.

0

use the onsubmit event attribute in your form:

<form name="enter_keyword"  onsubmit="Login()">

keep the input type = submit for the button.

0

Well that's pretty normal. You called your function on a click event. For this to happen you have to listen to the "onSubmit" event on the form. And you should put a submit instead of a button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.