Simple JS Form; Cannot Find Submission Value

Question

I'm new the JS and I'm having trouble storing and find the value of a form submission. I'm able to create a simple form (as shown below) but I'm not able to find the value of the submission to store for use later.

I thought I was able to access the for value here var number = document.getElementById('fib-form-number'); but I seem to have done something wrong.

I looked at this post here but that has not seemed to work.

I know the fix is going to be easy .. but I just can't figure it out.

Thanks,

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Form/title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="../static/js/jquery.min.js"></script>
        <script type="text/javascript" src="../static/js/index.js"></script>

    </head>
    <body>

        <!-- <input id="input" type="submit" value="Submit" onclick="return submitted();"> -->
        <!-- Use form to capture numbers on submission -->
        <form id="fib-form">
            <input type="number" id="fib-form-number" min="1">
            <button type="submit">Submit</button>
        </form>

    </body>
</html>

JS

// Get value of submission

$(document).ready(function() {

    var form = document.getElementById('fib-form');
    var number = document.getElementById('fib-form-number');

    // Now get the value of the submission
    form.onsubmit = function () {
        var variable = number.value;
        console.log(variable)
    }

});

Hum I've changed it so the spelling is correct but console.log is still not showing the submission. — Chef1075, Jun 26 '17 at 01:57
FYI, you are not preventing the from submission, so as soon as that happens your page is going to reload clearing your log (unless you have preserve log turned on) — Patrick Evans, Jun 26 '17 at 01:58
That is probably the reason @PatrickEvans. I think I should not be using a form if my log is going to get cleared — Chef1075, Jun 26 '17 at 02:00

ookadoo · Answer 1 · 2017-06-26T01:57:33.940

0

You're misspelling variable:

    var variable = number.value;
    console.log(varaible)

But you could also use jQuery since you're already using it:

$(document).ready(function() {
    var form = $('fib-form');
    var number = $('fib-form-number');

    // Now get the value of the submission
    form.onsubmit = function () {
        var variable = number.val();
        console.log(variable)
    }

});

edited Jun 26 '17 at 01:57

answered Jun 26 '17 at 01:54

ookadoo

149
5

1

`.val()` is a jQuery method, they are grabbing a DOM object not a jQuery object. Also problems that are the result of misspellings should be closed (eg Typo close reason) not answered – Patrick Evans Jun 26 '17 at 01:55

Simple JS Form; Cannot Find Submission Value

1 Answers1