Using Javascript to check for any empty fields before processing form

[galvin]

 

I have a page to fill out picks (basically fill out 63 fields) and then the user hits a "Submit My Picks!" button which will go to a page with the following.  I don't want anything to happen if the user left any of the 63 fields blank, so what is the best way to run this check?

 

I was going to submit the info via POST and then go through each one (one by one) to see if it's value was empty or not, but I feel like there has to be a better way. 

 

And I feel like there has to be a way via Javascript so that I don't involve the server at all, until all 63 fields are definitely filled in.

 

Any ideas?...

 

if (isset($_POST['submit']) && $_POST['submit'] == "Submit My Picks!") {

$pick1_1 = $_POST['pick1_1'];
$pick1_2 = $_POST["pick1_2"];
$pick1_3 = $_POST["pick1_3"];
$pick1_4 = $_POST["pick1_4"];
$pick1_5 = $_POST["pick1_5"];
$pick1_6 = $_POST["pick1_6"];
$pick1_7 = $_POST["pick1_7"];
$pick1_8 = $_POST["pick1_8"];
$pick1_9 = $_POST["pick1_9"];
$pick1_10 = $_POST["pick1_10"];
$pick1_11 = $_POST["pick1_11"];
$pick1_12 = $_POST["pick1_12"];
$pick1_13 = $_POST["pick1_13"];
$pick1_14 = $_POST["pick1_14"];
$pick1_15 = $_POST["pick1_15"];
$pick1_16 = $_POST["pick1_16"];
$pick1_17 = $_POST["pick1_17"];
$pick1_18 = $_POST["pick1_18"];
$pick1_19 = $_POST["pick1_19"];
$pick1_20 = $_POST["pick1_20"];
$pick1_21 = $_POST["pick1_21"];
$pick1_22 = $_POST["pick1_22"];
$pick1_23 = $_POST["pick1_23"];
$pick1_24 = $_POST["pick1_24"];
$pick1_25 = $_POST["pick1_25"];
$pick1_26 = $_POST["pick1_26"];
$pick1_27 = $_POST["pick1_27"];
$pick1_28 = $_POST["pick1_28"];
$pick1_29 = $_POST["pick1_29"];
$pick1_30 = $_POST["pick1_30"];
$pick1_31 = $_POST["pick1_31"];
$pick1_32 = $_POST["pick1_32"];

$pick2_1 = $_POST['pick2_1'];
$pick2_2 = $_POST["pick2_2"];
$pick2_3 = $_POST["pick2_3"];
$pick2_4 = $_POST["pick2_4"];
$pick2_5 = $_POST["pick2_5"];
$pick2_6 = $_POST["pick2_6"];
$pick2_7 = $_POST["pick2_7"];
$pick2_8 = $_POST["pick2_8"];
$pick2_9 = $_POST["pick2_9"];
$pick2_10 = $_POST["pick2_10"];
$pick2_11 = $_POST["pick2_11"];
$pick2_12 = $_POST["pick2_12"];
$pick2_13 = $_POST["pick2_13"];
$pick2_14 = $_POST["pick2_14"];
$pick2_15 = $_POST["pick2_15"];
$pick2_16 = $_POST["pick2_16"];

$pick3_1 = $_POST['pick3_1'];
$pick3_2 = $_POST["pick3_2"];
$pick3_3 = $_POST["pick3_3"];
$pick3_4 = $_POST["pick3_4"];
$pick3_5 = $_POST["pick3_5"];
$pick3_6 = $_POST["pick3_6"];
$pick3_7 = $_POST["pick3_7"];
$pick3_8 = $_POST["pick3_8"];

$pick4_1 = $_POST['pick4_1'];
$pick4_2 = $_POST["pick4_2"];
$pick4_3 = $_POST["pick4_3"];
$pick4_4 = $_POST["pick4_4"];

$pick5_1 = $_POST['pick5_1'];
$pick5_2 = $_POST["pick5_2"];


$pick6_1 = $_POST['pick6_1'];

} else {

}

[Tazerenix]

<script type="text/javascript">
function functionUsedToCheckFields()
{
   // i dont know your field structure so here you need to build an array of the value of each field
   // and store it as an array (fields)
    for(value in fields)
    {
        if (fields[value] !== true)
        {
            return false;
        }
    }
    return true
}
</script>

<form onsubmit="return functionUsedToCheckFields()">
blah blah blah
</form>

 

That should work but as it says in the script you will need to make an array of all the values of the fields called fields

[ignace]

I have a page to fill out picks (basically fill out 63 fields) and then the user hits a "Submit My Picks!" button which will go to a page with the following.  I don't want anything to happen if the user left any of the 63 fields blank, so what is the best way to run this check?

 

Open your editor search for name="pick1 and replace it with class="pick1" name="pick1 do this also for pick2 and pick3

 

Now using JavaScript:

 

function checkSets() {
    var check1 = document.getElementsByClassName('check1');
    var check2 = document.getElementsByClassName('check2');
    var check3 = document.getElementsByClassName('check3');
    var check4 = document.getElementsByClassName('check4');
    var check5 = document.getElementsByClassName('check5');
    var check6 = document.getElementsByClassName('check6');
    return checkSubSet(check1) && checkSubSet(check2) &&
           checkSubSet(check3) && checkSubSet(check4) &&
           checkSubSet(check5) && checkSubSet(check6);
}

function checkSubSet(subSet) {
    var oneOfSubSetIsChecked = false;
    for (var i = 0; i < subSet.length; ++i) {
        if (subSet[i].getAttribute('checked') == true) {
            oneOfSubSetIsChecked = true;
            break;
        }
    }
    return oneOfSubSetIsChecked;
}

 

This will go over each set and make sure atleast one is checked.

 

Use as:

 

<script type="text/javascript">
function checkForm_onSubmit() {
    if (!checkSets()) {
        window.alert('Make sure that atleast each set has an answer checked.');
        return false;
    }
    return true;
}
</script>
<form onsubmit="return checkForm_onSubmit();" ..