Thursday 23 April 2015

Check-boxes that disables or enables an input field

Today we're going to write some codes that'll help us check and un-check checkboxes and as a result will disable or enable various input fields;

Step 1: The HTML
In this instance, we're going to create the input fields,checkboxes and everything needed for the layout. 
Create a html document of any name; I called mine "scripts.html".


<!DOCTYPE html>

<html>

<head>

 <title>Simple Check boxes</title>

 <script type="text/javascript" src="./auth.js"></script>

 <link rel="stylesheet" type="text/css" href="./bootstrap.min.css">

</head>

<body>

<form role="form" name="payment">

                           

                            <div class="checkbox">

                                <p>Payment Option</p>

                                <label class="checkbox-inline">

                                    <input type="checkbox" value="cash" checked>Cash

                                </label>

                                <label class="checkbox-inline">

                                    <input type="checkbox" value="mobile" name="mobilecheckstat" onchange="enableIn()"> Mobile Payment

                                </label>

                                <label class="checkbox-inline">

                                    <input type="checkbox" value="credit" name="credcheckstat" onchange="enableIn()"> Credit Card

                                </label>

                                <label class="checkbox-inline">

                                    <input type="checkbox" value="club" name="clubstat" onchange="enableIn()"> Club Card

                                </label>

                            </div>

                            <div class="form-group input-group">

                                <span class="input-group-addon">Credit Card Number</span>

                                <input type="number" class="form-control" name="cred" autocomplete="off" required="required" placeholder="Enter Credit Card Number">

                            </div>

                            <div class="form-group input-group">

                                <span class="input-group-addon">Club Card Number</span>

                                <input type="number" class="form-control" name="club" autocomplete="off" required="required" placeholder="Enter Club Card Number">

                            </div>

                            <div class="form-group input-group">

                                <span class="input-group-addon">Mobile Pay Transaction ID</span>

                                <input type="number" class="form-control" name="mobile" autocomplete="off" required="required" placeholder="Enter Mobile Pay Transaction ID (eg XX123..)">

                            </div>

                            <div class="form-group input-group">

                                <span class="input-group-addon">Amount</span>

                                <input type="number" class="form-control" autocomplete="off" required="required" placeholder="Amount To be Paid">

                            </div>

                            </form>

                            <script src="./bootstrap.min.js"></script>

</body>

</html>




Step 2: The Output


The Expected output from the above code
Now let's work on the java script to facilitate this function:

Step 3: The Javascript
Create a Javascript file of any name; I called mine "auth.js".


function start() {     payment.cred.disabled = true;     payment.club.disabled = true;     payment.mobile.disabled = true; } onload = start; function enableIn() {     payment.cred.disabled = !payment.credcheckstat.checked;     payment.club.disabled = !payment.clubstat.checked;     payment.mobile.disabled = !payment.mobilecheckstat.checked; }



And that's it.

PS. I included some bootstrap within the code-it's completely optional.