How to validate a form's input value in Javascript

Question

Sorry if this isn't the proper way to do things, I'm new to coding and stack overflow. I have this code that displays two digits; for now it just asks you at the beginning what color and what digits you want displayed. It uses a stylesheet, which I haven't included.

What I'm trying to do is have an input field instead of a prompt in the beginning. However, this doesn't seem possible to me using a single external Javascript file! As you can see, the javascript is loaded before you can input a value into the input field, and then the page just refreshes when you do enter something in.

Do I need to use seperate external Javascript files? Is this common practice? If not, how do I get the function getDigits to run after typing into the input field?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> Digits</title>


    <link rel="stylesheet" type="text/cs" href="css.css">
</head>
<body>

<div id="light" class="lightred"></div>
<div id="seg0" class="y"></div>
<div id="segb0" class="y"></div>
<div id="seg10" class="y"></div>

<div id="seg1" class="y"></div>
<div id="seg11" class="y"></div>

<div id="seg2" class="y"></div>
<div id="seg12" class="y"></div>

<div id="seg3" class="y"></div>
<div id="seg13" class="y"></div>

<div id="seg4" class="y"></div>
<div id="seg14" class="y"></div>

<div id="seg5" class="y"></div>
<div id="seg15" class="y"></div>

<div id="seg6" class="y"></div>
<div id="seg16" class="y"></div>
<script type="text/javascript" src="javascript.js"></script>
<form id="digits">
    Number: <input id="digits2" type="text" name="digitsBox" value="" />
</form>


</body>
</html>

    var y = 'y',
    n = 'n';

function changeColor(color) {
    switch(color){
        case "red":    
            y = "y";
            document.getElementById("light").className = "lightred";
            break;
        case "green":
            y = "y1";
            document.getElementById("light").className = "lightgreen";
            break;
        case "blue":
            y = "y2";
            document.getElementById("light").className = "lightblue";
            break;
    }
    //return y;
}
//changeColor(prompt("Do you want red, green, or blue?"));

var pattern = [[y, y, y, y, y, y, n], [n, y, y, n, n, n, n], [y, y, n, y, y, n, y],[y, y, y, y, n, n, y], [n, y, y, n, n, y, y], [y, n, y, y, n, y, y], [y, n, y, y, y, y, y], [y, y, y, n, n, n, n], [y, y, y, y, y, y, y], [y, y, y, n, n, y, y]];

function illuminate1(num) {

    for (i = 0; i < 11; i++) {
        if (num === i) {
            document.getElementById("seg0").className = pattern[i][0];
            document.getElementById("seg1").className = pattern[i][1];
            document.getElementById("seg2").className = pattern[i][2];
            document.getElementById("seg3").className = pattern[i][3];
            document.getElementById("seg4").className = pattern[i][4];
            document.getElementById("seg5").className = pattern[i][5];
            document.getElementById("seg6").className = pattern[i][6];
        }
    }
}

function illuminate2(num) {


    for (i = 0; i < 11; i++) {
        if (num === i) {
            document.getElementById("seg10").className = pattern[i][0];
            document.getElementById("seg11").className = pattern[i][1];
            document.getElementById("seg12").className = pattern[i][2];
            document.getElementById("seg13").className = pattern[i][3];
            document.getElementById("seg14").className = pattern[i][4];
            document.getElementById("seg15").className = pattern[i][5];
            document.getElementById("seg16").className = pattern[i][6];
        }
    }
}

// This function extracts digits from an input text and illuminates based on the digits
function getDigits(text) {
    text = text.toString();
    text = text.split("");
    console.log(text);
    var i = 0;
    for (i = 0; i <= text.length; i++) {
        text[i] = parseInt(text[i]);
        illuminate1(text[i]);
        i=i +1;
        console.log(i);
        break;
    }

    for (i=i;i <= text.length; i++) {
        text[i] = parseInt(text[i]);
        illuminate2(text[i]);
        i=i+1;
        console.log(i);
        break;
    }
}
//getDigits("35");
var digits = parseInt(document.getElementById('digits2').value);
getDigits(digits);

check onblur and onkeypress for input elements. There is no difference in how you include javascript, it will be downloaded and run in the order it is included in the page, not sure why you asked that. — sabithpocker
– sabithpocker, Commented Mar 18, 2014 at 14:28
try creating a jsfiddle.net as you have so much code and the problem is not clear. — sabithpocker
– sabithpocker, Commented Mar 18, 2014 at 14:33
@sabithpocker I'm guessing he asked that because he didn't know. It's also a perfectly reasonable question because the javascript will execute before an element it's supposed to do something with (#digits2) is on the page, and he has nothing to delay execution of the javascript such as a window.onload. — Mordred
– Mordred, Commented Mar 18, 2014 at 14:38

mplungjan · Accepted Answer · 2014-03-18 15:14:18Z

1

try this

Live Demo

window.onload=function() {
  document.getElementById('digits2').onkeyup=function() {
    var digits = parseInt(this.value);
    getDigits(digits);
  }
}

You also want to change

 var i=0;
 for (var i = 0; i < text.length; i++) {

to

 for (var i = 0; i < text.length; i++) {

Update

Live Demo

window.onload=function() {
  document.getElementById('digits').onsubmit=function() {
    var digits = parseInt(this.digitsBox.value);
    getDigits(digits);
    return false; // cancel submit
  }
}

edited Mar 18, 2014 at 15:14

answered Mar 18, 2014 at 14:37

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

Blando Over a year ago

This worked better, thank you! Is there a method like onkeyup that works after the form has been submitted (after pushing enter)? I'd like to be able to type in both digits and then submit them to be displayed

Blando Over a year ago

Works like a charm, thanks. Can I ask a quick question? If I declare a variable such as the y or n in my javascript, will they by accessible by any other javascript I run on the page after? what about functions? Could I call my getDigits function anywhere in the HTML?

mplungjan Over a year ago

Yes. JS is available to all scripts on the page.

Collectives™ on Stack Overflow

How to validate a form's input value in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related