javascript - How to submit form on keypress? - Stack Overflow

admin管理员组

文章数量:1289836

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>

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>

• javascript
• html
• search
• onkeyup
• onkeypress

Share Improve this question Follow asked Jun 18, 2013 at 13:24 firstroadfirstroad 5711 gold badge11 silver badge99 bronze badges 6

• action="javascript:void()"... – teynon Commented Jun 18, 2013 at 13:25
• what is wrong with this? – firstroad Commented Jun 18, 2013 at 17:45
• chrome gives me an error when I use void(), try void(0), adding an answer with plete code. – teynon Commented Jun 18, 2013 at 18:08
• What is actually happening and what do you expect to happen? – Ruan Mendes Commented Jun 18, 2013 at 18:57
• i have no idea what this "void" does, the code was copy-pasted from the html of the script's webpage – firstroad Commented Jun 18, 2013 at 22:35

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

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

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()

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

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.

本文标签： javascriptHow to submit form on keypressStack Overflow