...

View Full Version : Enter key gives null?



bigcasey123
09-23-2012, 08:10 PM
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.

Old Pedant
09-23-2012, 10:31 PM
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.

Old Pedant
09-23-2012, 10:32 PM
By the by, your <input name="doit"> *MUST* be type=button. If you make it type=submit, you *WILL* have problems.

xelawho
09-23-2012, 10:39 PM
... 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

bigcasey123
09-23-2012, 11:50 PM
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.

bigcasey123
09-24-2012, 12:05 AM
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 :(

xelawho
09-24-2012, 12:33 AM
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;
}

bigcasey123
09-24-2012, 03:33 PM
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.

xelawho
09-24-2012, 03:51 PM
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>

bigcasey123
09-24-2012, 04:01 PM
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum