JSFiddle - React, Tailwind, and code Playground

by pkdsleeper

HTML

<div id="container">

<div id="content">

<h2>Examples from Beginning PHP</h2>

<form action="form-results.php" method="post">
    <fieldset>
        <legend>Sign Up Form</legend>
        <label for="name">Name</label><br />
        <input name="name" id="name" type="text" /><br />
        <label for="password">Password</label><br />
        <input name="password" id="password" type="password" /><br />
        <label><input type="radio" name="loc" />I'm on my computer</label><br />
        <label><input type="radio" name="loc" />I'm on a shared computer</label><br /><br />
        <label><input type="radio" name="exp" />I'm a noob</label><br />
        <label><input type="radio" name="exp" />I'm da shizzit!</label><br /><br />
        <label><input type="radio" name="sleeper" />The sleeper must awaken!</label><br />
        <label><input type="radio" name="sleeper" />The sleeper has awakened!</label><br /><br />
        <input type="submit" value="Log in" /><br />
        <label><input type="checkbox" name="notify" disabled="true" />Keep me signed in on this computer.</label><br />      
    </fieldset>

</form>


</div>

</div>

CSS

#container{
    width: 960px;
    margin:0 auto;
}

#leftnav{
    width:260px;
    float:left;
    overflow:hidden
}
.clearfloat{display:block;width:100%;height:0}

.jqtest{color:red;}

JavaScript

var $all_inputs = $("form :input"),
    $textboxes  = $all_inputs.filter('[type="text"], [type="password"]'),
    $rdo = $($all_inputs).filter("[type=radio]"),
    $btnSubmit = $($all_inputs).filter("[type=submit]"),
    $rdoGroup = [], // an empty array which will be used to hold console.log($rdoGroup).length;    // line 5
    c = 0;            // counter for the array in the $rdo.each function

// init procedures
$rdo.each(function () {    
    "use strict";                   
    var i;
    if (!$rdoGroup.length) {
        $rdoGroup.push($(this).attr("name"));
    } else {
        for (i = 0; i < $rdoGroup.length; i++) {               
            if ($rdoGroup[c].toString() !== $(this).attr("name").toString()) {
                $rdoGroup.push($(this).attr("name"));
                c++;
            } // end if
        } // end for  
    } // end if(!$rdoGroup.length)
}); // end $rdo.each

    
// submit procedure 
$("form").submit(function () {
        
    // test radio buttons
    "use strict";
    var rdoScore = (function () {   
            
           // set variables for test
            var test = $rdoGroup.length, 
                score = 0, 
                grade = {}, 
                errMessage = [],
                i,
                $thisRDO;
            
            // test rdo groups    
            for (i = 0; i < $rdoGroup.length; i++) {                   
                $thisRDO = $rdo.filter('[name = ' + $rdoGroup[i] + ']');
                
                if ($($thisRDO).is(":checked")) {
                    ++score;  
                } else {
                    errMessage.push($($thisRDO).attr("name").toString());
                }
            }
            // add the score AND the array of errors to the grade object            
            grade.score = score;
            grade.errors = errMessage;    
            // console.log(grade.errors);
            
            // return the grade object to the calling variable
           ...