Javascript function doesnt work when called with onSubmit

Question

I'm having a problem with onSubmit. I'm building a little mobile website using jQTouch and. I want to call a function with onSubmit, if the user hits Enter, but that does not work. I really don't know what's the problem, because the function works perfectly, when it's called by onclick.

So here's the HTML:

<form action="" method="get" name="form1" onSubmit="calculateValue1();return false">
        <ul>
        <li>
        Input 1 <input id="input1" name="input1" type="number"/> 
        </li>                     
        <li>
        Input 2 <input id="input2" name="input2" type="number"/>
        </li>  
        </ul>
</form>   

<a  onclick="calculateValue1()">Calculate</a>

And here's the javascript for the function calculateValue1():

function calculateValue1() {    
    M = window.form1.input1.value;
    n = window.form1.input2.value;

    if (window.form1.input1.value=="") {
    alert("Value missing");
    }
}

When clicking on the link with onclick, the function works. When the focus is in input field 1 and I hit enter, nothing happens.

What could be the problem with this? I don't get an error message when hitting enter, I really don't know what's the problem with onSubmit.

Dimitry · Accepted Answer · 2011-03-06 20:38:59Z

2

You're missing a submit button in your form.

<form onsubmit="alert('here'); return false;" name="form1" method="get">
        <ul>
        <li>
        Input 1  
        </li>                     
        <li>
        Input 2 
        </li>  
        </ul>
<input type="submit" value="submit" style="display:none" />
</form>

edited Mar 6, 2011 at 20:38

answered Mar 6, 2011 at 20:21

Dimitry

6,6332 gold badges24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user647246 Over a year ago

Um, okay, the submit button is hidden now, but the function is not called, when hit enter :/ when I don't hide the button, it works...

Dimitry Over a year ago

That's weird. Note that my onsubmit is not the same as yours.

user647246 Over a year ago

Yeah it's strange. But with style="visibility:hidden" the submit button is hidden and the function is called. Thanks!

Dimitry Over a year ago

user, please close this question by marking an answer as final.

Adam Ayres · Accepted Answer · 2011-03-06 20:23:28Z

0

The onSubmit event is triggered when you submit a form either via the pressing an input of type "submit" or when you press enter in an input field, but in order for the form to submit on pressing the enter key you need to have a proper submit button. You won't need a anchor link for the submit then:

<form action="" method="get" name="form1" onSubmit="calculateValue1();return false">
    <ul>
    <li>
    Input 1 <input id="input1" name="input1" type="number"/> 
    </li>                     
    <li>
    Input 2 <input id="input2" name="input2" type="number"/>
    </li>  
    </ul>
    <input type="submit" value="Calculate"></input>
</form>

answered Mar 6, 2011 at 20:23

Adam Ayres

8,9381 gold badge35 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript function doesnt work when called with onSubmit

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related