Why is my function not working properly?

Question

I am working on a sudoku puzzle and I have everything working properly except that it doesn't generate valid numbers. My function is supposed to generate valid numbers, though. (my fiddle() function I got from here.

Here is my generatePuzzle() function:

// Generate sudoku puzzle
function generatePuzzle() {
    for(var h = 1; h <= 10; h++) {
        fiddle(rowVal);
    }
    //emptyCells();
    putCellVal();
    for(var f = 0; f < 80; f++) {
        if (document.forms[0].elements[f].value != '') {
            document.forms[0].elements[f].readOnly = 'readonly';
        }
    }
}

As I said, it doesn't generate valid numbers. My fiddle() function is still wrong (http://blog.forret.com/2006/08/a-sudoku-challenge-generator/).

Click here for my JSFiddle.

If you are not a sudoku player, here are the rules:

Each row must have every number from 1 - 9 only once
Each column must have every number from 1 - 9 only once
Each 3 x 3 square with a thicker border must have every number from 1 - 9 only once

JSFiddle link: http://jsfiddle.net/oliverni/rq5m6/

Answer 1

The logic in the fiddle function to swap, rows / columns / blocks are correct, and you can actually inspect the rowVal matrix, which stores correct value.

The problem lies on the way you assign the value to the input elements.

function putCellVal() {
    var z = 0;
    for(var i = 0; i < rowVal.length; i++) {
        for(var j = 0; j < rowVal[i].length; j++) {
            document.forms[0].elements[z].value = rowVal[i][j];
            z++;
        }
    }
}

Apparently you use a table for each block, and from the assignment logic above, you are actually assigning a "row" of rowVal to a "block". You can check the value of rowVal[0], which is [1,9,8,4,2,3,6,5,7], the value in your first block

<table>
<tr>
    <td><input type="text" name="x0y0" maxlength="1">
    <td><input type="text" name="x1y0" maxlength="1">
    <td><input type="text" name="x2y0" maxlength="1">
</tr>
<tr>
    <td><input type="text" name="x0y1" maxlength="1">
    <td><input type="text" name="x1y1" maxlength="1">
    <td><input type="text" name="x2y1" maxlength="1">
</tr>
<tr>
    <td><input type="text" name="x0y2" maxlength="1">
    <td><input type="text" name="x1y2" maxlength="1">
    <td><input type="text" name="x2y2" maxlength="1">
</tr>
</table>

Answer 2

I think I've got it! I changed the one giant table to 9 small tables, but now instead of x0y5 being element 5, it is now element 11!