onsubmit is not calling my function when Enter is pressed

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

Question 

<form onsubmit="submit(); return false;" name="text" id="form" method="get">
<input type="feild" style="font-size: 150%;" id="field" name="field" value=""
onSubmit="this.value='';"/>
<input type="button" id="add" style="font-size: 150%;" value=" Add tally to score "/>
<input type="submit" value="submit" style="visibility:hidden" />

If I change "submit();" to "alert('here');" it calls the alert function perfectly. Why does it not call the submit function?

I want the function to be called when the user presses enter. http://jsfiddle.net/kaninepete/JsAr4/

note: The button on the side is for a different purpose, and not part of the problem. edit More work, trying to follow Christians example has gotten me here http://jsfiddle.net/kaninepete/MGxNG/

I don't see why this is different than his example! All I get is "{"error": "Please use POST request"}" and his works perfectly.

Was it helpful?

Solution

There is no method onsubmit on input elements.

On fiddle, if you change the type="button" to type="submit" on the input button, then the form is called when you press the button.

Edit:

Your problem seems to be two things.

One is that the submit is a native method in the browser. If you change the name to eg. mySubmit solves the problem.

The second is that JSFiddle put the js code inside a scope. This means that the methods you define will not be available outside that scope. This is resoved by making the method global:

window.mySubmit = function () {
    alert('test');
}

My fiddle: http://jsfiddle.net/KrooniX/UttWF/

OTHER TIPS

Tried to reproduce outside of jsfiddle, and it feels like it's working as is. Maybe I didn't get the complete code?

This is what I used (even removed the button discussed earlier). This works when pressing Enter in the textbox (tested in FF). Is there something I'm missing?

<html>

<head>

<style>
</style>

<script lang="javascript">

var tally = "0";
window.onload = setup;

function setup() {
    drawTally();
    document.getElementById("add").onclick = addScore;
    document.getElementById("form").onSubmit= submit;
}

function addScore() {
    document.getElementById('change').innerHTML = parseInt(document.getElementById('change').innerHTML)+tally;
    tally=0;
}

function submit(){
    alert("it worked!");
}

function drawTally() {
    var elem = document.getElementById('tallyDisp');
    //var tally = 0;
    if (elem && elem.getContext) {
        var context = elem.getContext('2d');
        if (context) {
            context.fillStyle = '#9f9';
            context.fillRect(0, 0, 300, 200);
            context.fillStyle = '#00f';
            context.font = 'bold 100px sans-serif';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.fillText(tally, 150, 100);
        }
    }
}
setInterval("drawTally();", 60);
</script>


<body>
  <h1>Farkle</h1>
<canvas height="200" width="300" id="tallyDisp">Oops!</canvas>

<form onsubmit="tally=parseInt(tally)+parseInt((text.elements.field.value));
document.text.elements.field.value=''; return false;" id="form" name="text">
    <input type="feild" onsubmit="this.value='';" value="" name="field" id="field" style="font-size: 150%;">

</form>
<p>Your score is <span id="change"> 0</span>!</p>


</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top