Calling function from form when "enter" by a prototype

StackOverflow https://stackoverflow.com/questions/23414375

Question

I'm trying to create a method for a form Element that allow to define a function will be called when "enter" key is pressed and the form is focused. Here is a testing code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Teste Form Enter</title>
<script type="text/javascript" language="javascript">
Element.prototype.addEnterEvent = function(Func){
    var me = this;
    this.gotFocus = false;
    this.addEventListener("focus", function(){ me.gotFocus = true; }, false);
    this.addEventListener("focusOut", function() { me.gotFocus = false; }, false);
    window.addEventListener("keyPress", function(e) { console.log("Hit!"); if(me.gotFocus && e.which==13) window[Func](); }, false);
}

function formHandler(){
    alert("Anything: "+document.forms["test"].anything.value);
}

function ini(){
    document.getElementById("test").addEnterEvent(formHandler);
}

</script>
</head>

<body onload="ini();">
<form name="test" id="test" onsubmit="return false;">
    <label>Anything: </label>
    <input type="text" name="anything" />
    <br />
    <button onclick="formHandler();" type="button">Hit Enter</button>
</form>
</body>
</html>

The purpose is if enter is hit, the same function will be called if button is pressed. There is no error message, neither the desired result, just nothing happens. I put the console.log and the key event is not firing - so nothing happens. Why?

EDIT: Trying to use the suggestion, should work, but the form is send after run the formHandler, and I don't want this happens:

<script type="text/javascript" language="javascript">
function formHandler(formElement){
    alert("Anything: "+formElement.elements.anything.value);
}
</script>
</head>

<body>
<form action="#" name="test" id="test" onsubmit="formHandler(); return false;" method="get">
    <label>Anything: </label>
    <input type="text" name="anything" />
    <br />
    <button onclick="formHandler();" type="submit">Hit Enter</button>
</form>
Was it helpful?

Solution

There is no need to do this. If a <form> tag has an action attribute and at least one submit button, then you can use the onsubmit:

<form action="#" method="GET" onsubmit="formHandler(event, this); return false;">
    <input type="text" name="foo">
    <button type="button">Submit</button>
</form>

Note that <button type="button" /> will not work. It must be <button type="submit" /> or <input type="submit|image" />

EDIT: Changed the formHandler method a little so the form gets passed in as an argument. Also see the slight change to the onsubmit attribute, passing this into the formHandler function.

function formHandler(event, form) {
    event.preventDefault();
    alert(form.elements.foo.value);
}

Edit: Changed the code in my answer to pass the event object into the handler and call preventDefault().

OTHER TIPS

Greg answered the question, but this is an alternate way to do the same:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Teste Form Enter</title>
<script type="text/javascript" language="javascript">
function formHandler(e){
    e.preventDefault();
    console.log(e.target.elements.anything.value);
    alert("Anything: "+e.target.elements.anything.value);
}
window.addEventListener("load", function(){
        console.log("initialized...");
        document.getElementById("test").addEventListener("submit", formHandler, true);
    }, false);
</script>
</head>

<body>
<form action="#" name="test" id="test" method="get">
    <label>Anything: </label>
    <input type="text" name="anything" />
    <br />
    <button type="submit">Hit Enter</button>
</form>
</body>
</html>

And if you don't use form, or want to try by prototype, here is a start:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Teste Form Enter</title>
<script type="text/javascript" language="javascript">
Element.prototype.addEnterEvent = function(Func){
    var me = this;
    this.Func = Func;
    this.gotFocus = false;
    this.addEventListener("focus", function(){ me.gotFocus = true; }, false);
    this.addEventListener("blur", function(){ me.gotFocus = false; }, false);
    window.addEventListener("keyup", function(e) { 
            if(me.gotFocus && e.which==13) {
                Func();
            }
        }, false);
}

function enterHandler(){
    alert("Anything: "+document.getElementById("anything").value);
}

function ini(){
    document.getElementById("anything").addEnterEvent(enterHandler);
    //window.addEventListener("keyup", function(e){ console.log("Key: "+e.which); }, false);
}

</script>
</head>

<body onload="ini();">
    <h1>OnEnter Test</h1>
    <label>Anything: </label>
    <input type="text" name="anything" id="anything" />
    <br />
    <button onclick="enterHandler();" type="button">Hit Enter</button>
</body>
</html>

If you're doing a login in Ajax, you can add to the last text box (pass or captcha) so when the user hit enter, the login function will be called.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top