Cannot re-set form submit button to disabled

Question

On a webpage I have a form:

<form action="/SignUp.py" method="post">
    <input required type="text" name="fullName" onKeyPress="checkFinished()" autofocus>
    <input type="submit" name="submitButton" value="Sign Up" disabled>
</form>

and script:

<script>
    function checkFinished() {
        if (document.getElementsByName("fullName")[0].value.match(/. ./).length > 0) {
            document.getElementsByName("submitButton")[0].disabled = false;
        }
        else {
            document.getElementsByName("submitButton")[0].disabled = true;
        }
    }
</script>

If I step through the code using Firebug, I can see the execution path is correct. However, when the code hits the else clause and should be (re-)disabling submitButton, it does not get disabled. What am I doing wrong here?

What pattern are you trying to match with this regexp `/. ./`? — dfsq, Mar 12 '15 at 21:21

score 1 · Answer 1 · answered Mar 12 '15 at 21:23

Your regex does the following:

/. ./

matches any character (except newline)
matches the character literally
matches any character (except newline)

match method returns an array with results otherwise it returns null.

When there is no match your program is throwing an error because null does not have a length property. So the function throws an exception and the rest of the program within your script tag does not run.

One solution is to use test method which returns a boolean.

/. ./.test(document.getElementsByName("fullName")[0].value)

JSFiddle Demo: http://jsfiddle.net/vbgp6gba/2/

score 0 · Accepted Answer · answered Mar 12 '15 at 21:45

0

I made a little fiddle for you to take a look at

https://jsfiddle.net/mo5wfjLt/2/

What is wrong in your code :

First of all, backspace is not triggering a keypress event, so you will have a problem there in case you want to delete characters. Use keyup instead. If you want to experiment with key events, try this out: http://www.asquare.net/javascript/tests/KeyCode.html

The next major error is this line

document.getElementsByName("fullName")[0].value.match(/. ./).length

If a document.getElementsByName("fullName")[0].value.match(/. ./) does not exist, this returns null, so when you immediately try to access .length on that, you are trying to do null.length, so you get an Uncaught TypeError: Cannot read property 'length' of null

Also it's a good practice to keep values such as document.getElementsByName("fullName")[0], for example, in variables. It helps.

So, check the fiddle, and if there is something you still don't understand, ask.

answered Mar 12 '15 at 21:45

Dimitris Karagiannis

8,942
8
38
63

actually, backspace does generate a ``keyPress`` event. – Conrad Mar 12 '15 at 22:25
@Conrad well, you are right, but it's inconsistent. On Mac, `keypress` does fire an event in Firefox but not in Chrome and Safari – Dimitris Karagiannis Mar 12 '15 at 22:33
I am on a Mac too (10.9.5), using Firefox 36.0.1 - not sure what to say. I can set a breakpoint in ``checkFinished`` in Firebug and it stops when I press the 'delete' key. – Conrad Mar 12 '15 at 22:38
@Conrad I heavily modified my comment, sorry, do a page refresh :) (also, above I meant "... backspace does fire an `keypress` in ..." ) – Dimitris Karagiannis Mar 12 '15 at 22:40
``keyUp`` is the important event here - I will get the current version of the text in value, as opposed to the other 2 events, which give the prior state of ``value``. However, using ``RegExp.test()`` as mentioned in @Moogs's answer is the cleaner code IMO. – Conrad Mar 13 '15 at 17:40

Cannot re-set form submit button to disabled

2 Answers2