Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts

    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
    Code:
    form.doit.onClick
    to
    Code:
    form.doit.onKeyPress
    it would work but sadly no change

    Here is my javascript code

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    JavaScript is CASE SENSITIVE. HTML allows onClick and ONCLICK and so on (though not in strict mode). But JavaScript does not.
    Code:
    form.doit.onclick = function( )
    onclick must be all lower case.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    By the by, your <input name="doit"> *MUST* be type=button. If you make it type=submit, you *WILL* have problems.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... 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

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Quote Originally Posted by Old Pedant View Post
    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.
    Last edited by bigcasey123; 09-23-2012 at 11:59 PM.

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Quote Originally Posted by Old Pedant View Post
    JavaScript is CASE SENSITIVE. HTML allows onClick and ONCLICK and so on (though not in strict mode). But JavaScript does not.
    Code:
    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

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    dunno if this is the best way to do it, but it works for me...

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

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Thanks xelawho but sadly i got one last problem, i don't know where to put the code. I tried this

    Code:
    <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

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

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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)

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

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •