Onkeyup function from table td to add input validation?

Question

I'm working on a sudoku project and am stumped by validation, the table code is the same throughout so I'll post a small block of code unless more is needed. What I'm trying to do is get the value from each table data cell in my sudoku, and onkeyup, allow only numbers between 1-9. All other characters will produce an error. Here's what I have so far, my javascript function doesnt seem to be getting any values, and I cant figure out why.

    <table class="spuzzle">
    <thead>
    <tr><th></th>



        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>

        <th>5</th>
        <th>6</th>
        <th>7</th>


        <th>8</th>
        <th>9</th>

    </tr>
    </thead>
    <tbody>

     <tr>
    <th>A</th>
    <td class ="greenBox" rowspan="3" colspan="3">
        <table class="subTable">
            <tr>
                <td contenteditable="true" onkeyup="myFunction()"></td>
                <td contenteditable="true" onkeyup="myFunction()"></td>
                <td>4</td>


            </tr>
            <tr>
                <td contenteditable="true" onkeyup="myFunction()"></td>
                <td contenteditable="true" onkeyup="myFunction()"></td>
                <td contenteditable="true" onkeyup="myFunction()"></td>
            </tr>
            <tr>
                <td>3</td>
                <td>5</td>
                <td contenteditable="true" onkeyup="myFunction()"></td>
            </tr>
        </table>
    </td>


    function myFunction()
    {
    var num = document.getElementsByClassName("subTable").value;
    var num = parseInt(num, 10);
    alert(num);
    if(num < 1 || num > 9){
    document.getElementsByClassName("subTable").value = "";
    alert("Please Enter a Number Between 1 and 9.");
    }
    }

Guruprasad J Rao · Accepted Answer · 2015-10-21 13:19:45Z

1

Fiddle DEMO

Well I suggest you to pass the element to the function as parameter and just check its innerHTML as below:

Updated markup

<td contenteditable="true" onkeyup="myFunction(this)"></td><!-- Pass element with this-->
<td contenteditable="true" onkeyup="myFunction(this)"></td>
<td>4</td>

You JS then would be as below

function myFunction(ctrl)
{
    var num = ctrl.innerHTML; //get its innerHTML
    num = parseInt(num, 10);
    if(num < 1 || num > 9){
        ctrl.innerHTML="";//clear it if num is not what you expect
        alert("Please Enter a Number Between 1 and 9.");
    }
}

UPDATE

If you want to check whether the entered character is number or not, just use isNaN function as below:

function myFunction(ctrl)
{
    var num = ctrl.innerHTML;
    num = parseInt(num, 10);
    if(!isNaN(num))//if num is number then perform check for range
    {
        if(num < 1 || num > 9){
            ctrl.innerHTML="";
            alert("Please Enter a Number Between 1 and 9.");
        }
    }
    else
    {
        //just clear if any bad characters entered and show alert if needed
        ctrl.innerHTML="";
        alert('Please enter digits only');
    }
}

UPDATED DEMO

edited Oct 21, 2015 at 13:19

answered Oct 21, 2015 at 13:10

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

2 Comments

Jeremy Stone Over a year ago

Exactly what I needed! Thanks a lot, mark as answer when time allows.

Guruprasad J Rao Over a year ago

Sure.. Happy Coding.. :)

Collectives™ on Stack Overflow

Onkeyup function from table td to add input validation?

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