Using form input in jQuery function

Question

So I am trying to allow the user to enter an "access code" which is simply a timestamp, and then start a countdown timer based on that. I can set the var manually and it works, but I cannot get it from the form. What am I missing?

HTML

<form>
    <input type="text" name="access" onkeyup="formChanged()" onchange="formChanged()" />
    <button type="submit" class="btn btn-default">Submit</button>
</form>

JQUERY

$(function() {

    function formChanged() {
        var access = document.getElementsByName("access")[0].value;
    }

    //var access = 1443564011;
    var note = $('#note'),
        // Notice the *1000 at the end - time must be in milliseconds
        ts = (new Date(access * 1000)).getTime() + 1 * 24 * 60 * 60 * 1000;


    $('#countdown').countdown({
        timestamp: ts,
        callback: function(days, hours, minutes, seconds) {

            var message = "";

            message += days + "<small class='white'>D</small>, " + access;
            message += hours + "<small class='white'>H</small>, ";
            message += minutes + "<small class='white'>M</small>, ";
            message += seconds + "<small class='white'>S</small>";

            note.html(message);
        }
    });

});

Error in the developer console should have pointed you to the problem. — epascarello
– epascarello, Commented Sep 29, 2015 at 23:33
developers.google.com/web/tools/javascript/console/console-ui Every modern day browser has them. Learn to use them. — epascarello
– epascarello, Commented Sep 30, 2015 at 0:20
I thought you meant a specific one based on how you said it. Yes ofcourse but I still can't find the problem — Dan Henry
– Dan Henry, Commented Sep 30, 2015 at 0:34
1. From the code here, it looks like the variable ts is set only once and it is set before the user gets s chance to enter any input. Perhaps you should move the countdown () call to inside formChanged 2. You're already using jQuery. Go ahead and make it easy on you self to bind formChanged. $('form input[name=access]').on ('keypress change',formChanged); — user5051310
– user5051310, Commented Sep 30, 2015 at 1:12

Neil S · Accepted Answer · 2015-09-30 16:38:47Z

1

function formChanged() {
    var access = document.getElementsByName("access")[0].value;
}

You have a problem of variable scope. When you define your variable access using the var keyword inside that function, it is only accessible inside that function. You should move the var statement out of the function and it should work.

var access = 0;
function formChanged() {
    access = parseInt($("input[name=access]").val(), 10);
}

You could also add some validation code to make sure that they input a number, as nothing in your current code handles the case where the user doesn't input a number.

edited Sep 30, 2015 at 16:38

answered Sep 29, 2015 at 22:58

Neil S

2,30421 silver badges28 bronze badges

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

2 Comments

Dan Henry Over a year ago

I tried that and it outputed Pre-sale ends in NaND, undefinedNaNH, NaNM, NaNS

Neil S Over a year ago

You're using jQuery, so I'm not sure why you're not using jQuery selectors in the first place. I'll update my answer.

Collectives™ on Stack Overflow

Using form input in jQuery function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related