Sometimes we need to disable an entire form based upon user input. The example I thought of was in the case of asking how a person wants to pay for something. So for example, if a user wishes to pay for their product with a check we don’t need a form, but if they wish to pay with a credit card then we need to give the user a form to fill in their credit card information. You can see an example of this here.
I would normally just not show the form unless the user chose to pay with credit card. In my opinion this is less intimidating to the user and keeps them scrolling as little as possible. Nonetheless, here we’re just going to disable it if the user is paying with check, and enable it if the user is paying with credit card. So let’s take a look at the HTML.
The HTML
<body> <!--SELECT PAYMENT TYPE--> <form name="paymenttype"> <input type="radio" name="payment" value="Check" checked="checked" /> Check/Money Order <br /> <input type="radio" name="payment" value="Credit Card" /> Credit Card </form> <br /><br /><br /> <!--CREDIT CARD FORM--> <form name="creditForm" id="ccForm"> <table> <tr> <td> <input type="radio" name="cardType" value="VISA" checked="checked" /> VISA </td> <td> <input type="radio" name="cardType" value="MASTERCARD" /> MASTERCARD </td> <td> <input type="radio" name="cardType" value="DISCOVER" /> DISCOVER </td> <td> <input type="radio" name="cardType" value="AMERICAN EXPRESS" /> AMERICAN EXPRESS </td> </tr> <tr> <td> First Name: </td> <td> <input type="text" name="firstName" value="" /> </td> </tr> <tr> <td> Last Name: </td> <td> <input type="text" name="lastName" value="" /> </td> </tr> <tr> <td> Credit Card Number: </td> <td> <input type="text" name="ccNum" value="" /> </td> </tr> <tr> <td> Expiration Month: </td> <td> <input type="text" name="ccMonth" value="" /> </td> </tr> <tr> <td> Expiration Year: </td> <td> <input type="text" name="ccYear" value="" /> </td> </tr> <tr> <td> vCode: </td> <td> <input type="text" name="vCode" value="" /> </td> </tr> </table> </form> </body>
Nothing too complicated here. Just two very simple unvalidated unusable forms. The first is a set of radio buttons that allows the user to choose to pay with ‘Check/Money Order’ or ‘Credit Card’. Afterwards we have our credit card form. This is the form that will be disabled if the user chooses ‘Check’ in the first form, or enabled if the user chooses ‘Credit Card’ in the first table. The only thing to really note here is that I’ve given the form an id of ‘ccForm’.
Now the jQuery.
The jQuery
$(document).ready(function()
{
//listen for when our credit card / check radio buttons change
$("input[name='payment']").change(function()
{
disableForm();
});
//when the document loads check to see if the form needs to be disabled
disableForm();
});
disableForm = function()
{
//get the value of what has been selected
var paymenttype = $("input[name='payment']:checked").val();
if (paymenttype === "Check")
{
$("#ccForm :input").attr("disabled", "disabled");
}
else
{
$("#ccForm :input").removeAttr("disabled");
}
}
What’s going on here. Just a couple things going on here. One function that handles enabling and disabling the form, and a listener that listens for when the payment radio buttons are changed. First we start once the document has loaded our form and everything else. Once everything is loaded we listen for when the payment type radio buttons change, and when they do so we run the disableForm() function. Also once the document has loaded we want to just run the disableForm() function to make sure that if ‘Check’ is selected by default (and it is in our case) the form is initially disabled.
When the disableForm() function runs we do two things. First we check to see which radio button the user selected and set it into a var called ‘paymenttype’. To get this value we get any input elements with the name of ‘payment’. Then we get the one that is checked (‘:checked’ accomplishes this). And then the value of the checked item by adding the ‘.val()’ to the end. Once we have this we can run our conditional.
If our value is ‘Check’ disable the form. With pure javascript we could accomplish this by getting each of fields in the form and disabling them one by one. We could. Or we can go jQuery and do it in one line. To do it with one line we need to select our form (#ccForm – this is why we gave it an id) and get all ‘inputs’ in the selected form (do this by adding ‘:input’). As far as what form elements jQuery will select with ‘:input’ the docs state “Matches all input, textarea, select and button elements”. This pretty much covers the board. Once we have all our input fields selected we use the .attr() method to add the disabled state.
If our value is not ‘Check’ then since we only have two we know that it must be ‘Credit Card’. In this case the form needs to be enabled. Because forms are enabled by default we just need to remove the disabled attribute to enable it. Once again we get all our inputs the same way as before, but this time we use the ‘removeAttr()’ method to remove the disabled attribute.
That’s all it takes. Once again jQuery has pulled off a lot of work without me having to do a lot of work. Just the way it should be.