Enter key gives null?

When i press the enter key my form just refreshes the page and gives me a url index.html?search=goo&engine=google
I thought if i changed the form.doit.onClick to form.doit.onKeyPress it would work but sadly no change :(

Here is my javascript code

<script type="text/javascript">
(function( )
{
function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }
var choices = {
"google" : { "logo" : "images/google.png", "code" : doGoogle },
"yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
"bing" : { "logo" : "images/bing.png", "code" : doBing },
"ask" : { "logo" : "images/ask.png", "code" : doAsk }

}

var form = document.getElementById("theForm");
var engineCode = null;

form.engine.onchange = function( )
{
var choice = this.value;
if ( choice == "" ) return; // "choose one" selected?
document.getElementById("theImage").src = choices[choice].logo;
engineCode = choices[choice].code;
}

form.doit.onClick = function( )


{
if ( engineCode != null )
{
engineCode( form.search.value );
}
}
}
)( );


I know i have lots of JavaScript problems but it's because i never studied it.

JavaScript is CASE SENSITIVE. HTML allows onClick and ONCLICK and so on (though not in strict mode). But JavaScript does not.

form.doit.onclick = function( )

onclick must be all lower case.

By the by, your <input name="doit"> *MUST* be type=button. If you make it type=submit, you *WILL* have problems.

... but anyway, a button does not have logically an onkeypress event. If you want the search to fire while the cursor is inside the text field, add the onkeypress to the text field. If you want it to fire if they press enter while anywhere on the page, add it to the document.body

By the by, your <input name="doit"> *MUST* be type=button. If you make it type=submit, you *WILL* have problems.
I gave it a type.

JavaScript is CASE SENSITIVE. HTML allows onClick and ONCLICK and so on (though not in strict mode). But JavaScript does not.

form.doit.onclick = function( )

onclick must be all lower case.
I fixed that but it didn't do anything. I still can't click enter.

@xelawho
but where do i put the document.body?? also what code do i put with it? Those are the problems i'm having. I put the keypress everywhere and it never worked :(

dunno if this is the best way to do it, but it works for me...


document.onkeydown=function (e){
var keycode;
if (window.event) {keycode = window.event.keyCode;}
else if (e) {keycode = e.which;}
else {return true;}
if (keycode == 13&&engineCode!= null) {
engineCode(form.search.value);
return false;
}
else
return true;
}

Thanks xelawho but sadly i got one last problem, i don't know where to put the code. I tried this

<script type="text/javascript">

document.onkeydown=function (e){
var keycode;
if (window.event) {keycode = window.event.keyCode;}
else if (e) {keycode = e.which;}
else {return true;}
if (keycode == 13&&engineCode!= null) {
engineCode(form.search.value);
return false;
}
else
return true;
}

(function( )
{
function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }
var choices = {
"google" : { "logo" : "images/google.png", "code" : doGoogle },
"yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
"bing" : { "logo" : "images/bing.png", "code" : doBing },
"ask" : { "logo" : "images/ask.png", "code" : doAsk }

}

var form = document.getElementById("theForm");
var engineCode = null;


form.engine.onchange = function( )
{
var choice = this.value;
if ( choice == "" ) return; // "choose one" selected?
document.getElementById("theImage").src = choices[choice].logo;
engineCode = choices[choice].code;
}

form.doit.onclick = function( )
{
if ( engineCode != null )
{
engineCode( form.search.value );
}
}


}
)( ); // self-invoke anonymous function
</script>
but that didn't work so i tried this way

<script type="text/javascript">
(function( )
{
function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }
var choices = {
"google" : { "logo" : "images/google.png", "code" : doGoogle },
"yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
"bing" : { "logo" : "images/bing.png", "code" : doBing },
"ask" : { "logo" : "images/ask.png", "code" : doAsk }

}

var form = document.getElementById("theForm");
var engineCode = null;


form.engine.onchange = function( )
{
var choice = this.value;
if ( choice == "" ) return; // "choose one" selected?
document.getElementById("theImage").src = choices[choice].logo;
engineCode = choices[choice].code;
}

form.doit.onclick = function( )
{
if ( engineCode != null )
{
engineCode( form.search.value );
}
}
document.onkeydown=function (e){
var keycode;
if (window.event) {keycode = window.event.keyCode;}
else if (e) {keycode = e.which;}
else {return true;}
if (keycode == 13&&engineCode!= null) {
engineCode(form.search.value);
return false;
}
else
return true;
}

}
)( ); // self-invoke anonymous function
</script>

but sadly that didn't work either. I know it's a stupid question but i really know nothing about JS and it's really confusing.

the second one was close - you need the code to be inside the "wrapper" function (so that it has access to the engineCode function) but outside all the other functions (so the keydown listener gets applied from the beginning)


<script type="text/javascript">
(function () {
function doGoogle( searchFor ) { this.location.href="https://www.google.com/search?q="+searchFor; }
function doYahoo( searchFor ) { this.location.href="http://search.yahoo.com/search?p="+searchFor; }
function doBing( searchFor ) { this.location.href="http://www.bing.com/search?q="+searchFor; }
function doAsk( searchFor ) { this.location.href="http://www.ask.com/web?q="+searchFor; }

var choices = {
"google" : { "logo" : "images/google.png", "code" : doGoogle },
"yahoo" : { "logo" : "images/yahoo.png", "code" : doYahoo },
"bing" : { "logo" : "images/bing.png", "code" : doBing },
"ask" : { "logo" : "images/ask.png", "code" : doAsk }
}

var form = document.getElementById("theForm");
var engineCode = null;

form.engine.onchange = function () {
var choice = this.value;
if ( choice == "" ) return; // "choose one" selected?
document.getElementById("theImage").src = choices[choice].logo;
engineCode = choices[choice].code;
}

form.doit.onclick = function () {
if ( engineCode != null ) {
engineCode( form.search.value );
}
}

document.onkeydown=function (e){
var keycode;
if (window.event) {keycode = window.event.keyCode;}
else if (e) {keycode = e.which;}
else {return true;}
if (keycode == 13&&engineCode!= null) {
engineCode(form.search.value);
return false;
}
else
return true;
}

})(); // self-invoke anonymous function
</script>

Thanks!