Search code examples
javascripthtmlsearchonkeyuponkeypress

How to submit form on keypress?


I use this script to search in a static page

But i want this to search when i type in the text input and not when i click the button, i searchd and i found that any of this would work:

onkeypress="this.submit();"
onkeyup="this.submit();"
onkeypress="document.forms["f1"].submit();"
onkeyup="document.forms["f1"].submit();"

but none of them works

i used the same html with the script's

<form id="f1" name="f1" action="javascript:void()" onsubmit="if(this.t1.value!=null &amp;&amp; this.t1.value!='')parent.findString(this.t1.value);return false;">
<input type="text" id="t1" name="t1" value="Search" onfocus="if(this.value=='Search')this.value='';" size="20" onkeypress="this.submit();" />
<input type="submit" name="b1" value="Find" />
</form>

Solution

  • form.submit() does not trigger onsubmit. You should implement a function instead.

    Your onkeyup script is counter-intuitive though, since selecting the text onkeyup requires blurring of the textbox focus.

    Created a test using your snippets that calls findString(this.value); instead of submit:

    http://jsfiddle.net/e9Esz/

    some sample text
    <form id="f1" name="f1" action="javascript:void(0)" onsubmit="if(this.t1.value!=null &amp;&amp; this.t1.value!='')parent.findString(this.t1.value);return false;">
    <input type="text" id="t1" name="t1" value="Search" onfocus="if(this.value=='Search')this.value='';" size="20" onkeyup="findString(this.value);" />
    <input type="submit" id="b1" name="b1" value="Find" />
    </form>
    

    Javascript:

    var TRange=null;
    
    function findString (str) {
     if (parseInt(navigator.appVersion)<4) return;
     var strFound;
     if (window.find) {
    
      // CODE FOR BROWSERS THAT SUPPORT window.find
    
      strFound=self.find(str);
      if (!strFound) {
       strFound=self.find(str,0,1);
       while (self.find(str,0,1)) continue;
      }
     }
     else if (navigator.appName.indexOf("Microsoft")!=-1) {
    
      // EXPLORER-SPECIFIC CODE
    
      if (TRange!=null) {
       TRange.collapse(false);
       strFound=TRange.findText(str);
       if (strFound) TRange.select();
      }
      if (TRange==null || strFound==0) {
       TRange=self.document.body.createTextRange();
       strFound=TRange.findText(str);
       if (strFound) TRange.select();
      }
     }
     else if (navigator.appName=="Opera") {
      alert ("Opera browsers not supported, sorry...")
      return;
     }
     if (!strFound) alert ("String '"+str+"' not found!")
     return;
    }