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>

chrome gives me an error when I use `void()`, try `void(0)`, adding an answer with complete code. — teynon, Jun 18 '13 at 18:08
What is actually happening and what do you expect to happen? — Ruan Mendes, Jun 18 '13 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, Jun 18 '13 at 22:35
The void operator evaluates the given expression and then returns undefined. The void operator is often used merely to obtain the undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value). — Muhammad Zaman, Apr 11 '18 at 08:52

teynon · Accepted Answer · 2013-06-18T18:47:23.040

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

+1 For "form.submit() does not trigger onsubmit." However, the fix you suggest is not very clear. — Ruan Mendes, Jun 18 '13 at 18:36
Added a snippet about changing the onsubmit to `findString(this.value);` However, the logic of this is to select the text as soon as the user types. That means as soon as the user types a letter, that textbox will lose focus. (Constant battle to type a letter.) Alternatively, you could wrap the text in a span with a css class simulating a "selection", but I'm not going to bother going into that without jQuery. — teynon, Jun 18 '13 at 18:42
thanks for your answer it's the only one that really worked, now i have to work a little bit on this missfunction, however thank you — firstroad, Jun 18 '13 at 22:31

score 1 · Answer 2 · answered Jun 18 '13 at 13:27

1

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

answered Jun 18 '13 at 13:27

epascarello

204,599
20
195
236

What happens? You need to add details. – epascarello Jun 18 '13 at 18:31
I think the misquote is just a bug on the question, since the OP did say that it submitted – Ruan Mendes Jun 18 '13 at 18:37

score 1 · Answer 3 · answered Jun 18 '13 at 18:51

1

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

answered Jun 18 '13 at 18:51

Ruan Mendes

90,375
31
153
217

This still doesn't address the logical issue of selecting text on key up which blurs focus to the input. Which is what I was stating in my answer. – teynon Jun 18 '13 at 18:52
@Tom is the OP asking about that? I didn't see any mention by the OP... The question needs improvement... – Ruan Mendes Jun 18 '13 at 18:55
I already answered his original question. So you think we shouldn't identify other major issues with code if they aren't asking about it. – teynon Jun 18 '13 at 18:59
@Tom No that's fine, I just like to focus on the question as asked to make the question more useful to others... If that's also a problem, it should be another question. That makes SO questions more reusable and self-contained. It is convenient to ask/answer two questions in one, it's just not for the best for others who read the question – Ruan Mendes Jun 18 '13 at 19:01
thanks for your answer, but tom answered first and his answer was correct – firstroad Jun 18 '13 at 22:33

score 0 · Answer 4 · answered Jun 18 '13 at 13:30

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.

How to submit form on keypress?

4 Answers4

Linked