JavaScript: Submit Form on Enter

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

  •  07-07-2023
  •  | 
  •  

Question

I'm pretty new to JavaScript, but I'm working on a bit of a math quiz. The idea is that the user (a first grade student) will answer one question at a time and then all of the user's answers will be displayed on a popup, which will also display feedback about whether or not the user's answer is correct. I have it pretty much good to go, but I can't for the life of me figure out how to make the form submit when the user presses "Enter."

Any help would be much appreciated!

HTML:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Math Worksheet</title>
    <script src="addition.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <form id="formSec">
        <table id="addProblem" width="150" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td colspan="3" align="center"><h2>Problem <span id="outOf">1</span> of 12</h2></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="1" align="right"><input id="carryOver"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2" align="right" id="firstNum">48</td>
  </tr>
  <tr>
    <td>+</td>
    <td colspan="2" align="right" id="secondNum">16</td>
  </tr>
  <tr>
    <td colspan="3"><hr id="sepLine"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2" align="right"><input onKeyPress="return checkSubmit(event)" id="userAnswer" type="text"></td>
  </tr>
  <tr>
      <td colspan="3"><input id="submit" type="button" onClick="submitAnswer()" value="Submit" /></td>
  </tr>
</table>
    </form>
</body>
</html>

JavaScript:

// first number in addition problem
var numOne = [48,39,16,43,37,23,44,13,37,28,48,16];   

// second number in addition problem
var numTwo = [16,22,25,18,46,49,18,39,25,17,9,28];

// counter variable
var i = 0;

// array for user answers
var answers = [];

// arrays to display validity
var valid = [];
var equality = [];

// submit when "enter" is pressed
function checkSubmit(e) {
   if(e && e.keyCode == 13)
   {
      document.forms[0].submit();
   }
}

// check and store answer's validity
function submitAnswer() {
    var guessed = Number(document.getElementById('userAnswer').value);
    var checkAnswer = 'Correct!';

    if (guessed != numOne[i]+numTwo[i]) {
        checkAnswer = 'Incorrect!\nThe answer is'+' '+Number(numOne[i]+numTwo[i])+'.';
        valid[i] = 'Incorrect';
        equality[i] = ' &NotEqual; ';
    } else if (guessed == numOne[i]+numTwo[i]) {
        valid[i] = 'Correct';
        equality[i] = ' = ';
    }

    if(confirm(checkAnswer) && i<11) {
        // next problem
        i++;
        document.getElementById('outOf').innerHTML=i+1;
        document.getElementById('firstNum').innerHTML=numOne[i];
        document.getElementById('secondNum').innerHTML=numTwo[i];

        // saves user's answer
        answers.push(document.getElementById('userAnswer').value);

        // reset the answer and carry over to blank
        document.getElementById('userAnswer').value = '';
        document.getElementById('carryOver').value = '';

        // return focus to answer box
        document.getElementById('userAnswer').focus();
    } else if(i==11) { // create popup window with user's answers
        var results=window.open('','name','height=650,width=1000');

        answers.push(document.getElementById('userAnswer').value);

        results.document.write('<html><head><title>Math Worksheet Results</title>');
        results.document.write('<link rel="stylesheet" href="style.css">');
        results.document.write('<link href="http://fonts.googleapis.com/css?family=Englebert" rel="stylesheet" type="text/css">');
        results.document.write('</head><body><div id="resultsMain">');
        results.document.write('<header><h1>Student Results</h1></header><div id="results">');

        results.document.write('<div class="prob"><p class="probNum">1. ' + valid[0] + '</p><p class="userProb">');
        results.document.write(numOne[0] + ' + ' + numTwo[0] + equality[0] + answers[0] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">2. ' + valid[1] + '</p><p class="userProb">');
        results.document.write(numOne[1] + ' + ' + numTwo[1] + equality[1] + answers[1] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">3. ' + valid[2] + '</p><p class="userProb">');
        results.document.write(numOne[2] + ' + ' + numTwo[2] + equality[2] + answers[2] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">4. ' + valid[3] + '</p><p class="userProb">');
        results.document.write(numOne[3] + ' + ' + numTwo[3] + equality[3] + answers[3] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">5. ' + valid[4] + '</p><p class="userProb">');
        results.document.write(numOne[4] + ' + ' + numTwo[4] + equality[4] + answers[4] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">6. ' + valid[5] + '</p><p class="userProb">');
        results.document.write(numOne[5] + ' + ' + numTwo[5] + equality[5] + answers[5] + '</p></div>');        

        results.document.write('<div class="prob"><p class="probNum">7. ' + valid[6] + '</p><p class="userProb">');
        results.document.write(numOne[6] + ' + ' + numTwo[6] + equality[6] + answers[6] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">8. ' + valid[7] + '</p><p class="userProb">');
        results.document.write(numOne[7] + ' + ' + numTwo[7] + equality[7] + answers[7] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">9. ' + valid[8] + '</p><p class="userProb">');
        results.document.write(numOne[8] + ' + ' + numTwo[8] + equality[8] + answers[8] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">10. ' + valid[9] + '</p><p class="userProb">');
        results.document.write(numOne[9] + ' + ' + numTwo[9] + equality[9] + answers[9] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">11. ' + valid[10] + '</p><p class="userProb">');
        results.document.write(numOne[10] + ' + ' + numTwo[10] + equality[10] + answers[10] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">12. ' + valid[11] + '</p><p class="userProb">');
        results.document.write(numOne[11] + ' + ' + numTwo[11] + equality[11] + answers[11] + '</p></div>');

        results.document.write('<br class="clear"></div></div></body></html>');
        results.document.close();
    }
}
Was it helpful?

Solution 2

Is there any reason why you couldn't replace document.forms[0].submit(); with submitAnswer();?

If you want the form to actually submit (i.e. POST, which is not what I think your intention is), but for the sake of completeness, the reason why you are running into issues with your submit syntax is that you have an element with the name submit, which has effectively overridden the form's submit function. You can instead use this alternative to submit the form (if you don't want to rename the element):

HTMLFormElement.prototype.submit.call(document.forms[0]);

OTHER TIPS

The one you are looking for is the default behavior of an input element in a form when you press enter

http://jsfiddle.net/sfarsaci/pEJxd/

if you want submitAnswer() to be execuded when you press enter you need to add the onsubmit event to the form: onSubmit=submitAnswer(); like here http://jsfiddle.net/sfarsaci/H9vL4/

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