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>

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

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

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

Comments

[epascarello]

What happens? You need to add details.

[Ruan Mendes]

+1 For "form.submit() does not trigger onsubmit." However, the fix you suggest is not very clear.

[Ruan Mendes]

I think the misquote is just a bug on the question, since the OP did say that it submitted

[teynon]

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]

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.

[Ruan Mendes]

@Tom is the OP asking about that? I didn't see any mention by the OP... The question needs improvement...

[teynon]

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.

[Ruan Mendes]

@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

[firstroad]

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]

thanks for your answer, but tom answered first and his answer was correct