How to submit form on keypress?

Question

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>

Answer 1

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

Answer 2

You have a quote problem! The color coding here shows it!

onkeypress="document.forms["f1"].submit();"
           ^                ^
         opens           closes

The sumbit is on the form, not the element, hence why this.submit fails.

You would need

this.form.submit()

Answer 3

As Tom said, calling form.submit() does not trigger the onsubmit handlers. The onsubmit handlers are only called when the form is submitted manually. Therefore, if you are trying to submit your form manually, you have to check your errors on your own.

HTML

<form id="f1">...<form/>

JS

// After the DOM is loaded
var form = document.getElementById('f1');
function canSubmit(form) {
    if(form.t1.value!=null && form.t1.value!='') {

    }
    return false;
}

form.onsubmit = function() {
    return canSubmit(form);
}

form.onkeypress = function() {
    if(canSubmit(form)){
        form.submit();
    }
}

Having said all this, if you just had a findString that was a bit smarter, then you would just call it from both places and ignore it when empty

function findString(value) {
    if (value) {
        parent.findString(form.t1.value);
    }
}

form.onsubmit = function() {
    findString(form.t1.value);
    return false;
}

form.onkeypress = function() {
    findString(form.t1.value);
}

Answer 4

Perhaps you should make use of addEventListener() to assign events. Besides, you have a typo. It would be better to use single quotes for begin/end of strings, so that inline doublequotes are no problem (vice versa).

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

And to submit a Form via Javascript:

document.forms[0].submit()

submits the first form.