Another small project I have been working on lately is to modify / simplify the contact / request webhosting / domain name registration form found on
Katan Website Designs. Eventually I plan to have it set up so that people can place orders directly and pay via credit card, but, for now, I'm just simplifying and making it so that people only submit the information required for a quotation.
Here is a screen shot of what that form currently looks like (when I'm done with it it should look a bit different):
Step 1: Finding the best way to show / hide form fields.
I googled this and investigated any number of solutions some of which worked and some did not. Eventually I discovered
Infopitcher and that seemed to work the best for me. I did not have to do much to make changes. My plan was to take the "Your Requirements" drop down list (from my original contact form) and turn them into radio buttons (I tried it first with check boxes, but I wanted something where people could choose only one option and radio buttons seemed best), then take the fields below that (except for the last one titled "Other") and apply them to the hide / show selections. I decided to try it first with some sample forms, making sure that it worked for all different types of fields and determining what variables I'd have to add / change.
I should note here that my original form was done with html in php for processing. For the purposes of testing these scripts, however, I decided to initially do them in straight html and then convert to php.
This script requires the following:
- place between the <head></head> tags:
<!-- Begining Javascript Code for show / hide form elements using Radio Buttons-->
<script language="javascript" type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--End Javascript Code for show / hide form elements using Radio Buttons-->
- Place between the <body></body> tags:
<form name="formname1" action="" onSubmit="return validateFunction();">field1A
<input type="radio" name="type" value="1" id="type_1"/><br/>
field2
<input type="radio" name="type" value="2" id="type_2"/><br/>
field3
<input type="radio" name="type" value="3" id="type_3"/><br />
field4 <input type="radio" name="type" value="4" id="type_4"/><br /> field5 <input type="radio" name="type" value="5" id="type_5"/><br />
field6 <input type="radio" name="type" value="6" id="type_6"/><br /> field7 <input type="radio" name="type" value="7" id="type_7"/><br /> field8 <input type="radio" name="type" value="8" id="type_8"/><br />
<div id="1_box">
DropField1
<select name="DropField1" id="DropField1">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/><br/></div>
<div id="2_box">
DropField2
<select name="DropField2" id="DropField2">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/><br/></div>
<div id="3_box">
DropField3
<select name="DropField3" id="DropField3">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br /><br /></div>
<div id="4_box">
DropField4
<select name="DropField4" id="DropField4">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br /><br /></div><div id="5_box">
DropField5
<select name="DropField5" id="DropField5">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
DropField5A
<select name="DFA5" id="DFA5">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />TextField5 <input type="text" name="DF5" id="DF5" />
<br /><br /></div><div id="6_box">
DropField6
<select name="DropField6" id="DropField6">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />TextField6 <input type="text" name="DF6" id="DF6" /><br /><br /></div><div id="7_box">
DropField7
<select name="DropField7" id="DropField7">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br /> DropField7a
<select name="DF7" id="DF7">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div><div id="8_box">
Field8 <input type="text" name="DropField8" id="DropField8" />
<br />
<br /></div>
<input type="submit" value="submit"/>
</p>
</form>
<p>
<!--Begining Javascript Code for Form Radio Button Show / Hide Elements-->
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='type']").click(function(){
var value = $(this).val();
if(value=='1') {
$("#1_box").show();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='2') {
$("#2_box").show();
$("#1_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='3') {
$("#3_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='4') {
$("#4_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='5') {
$("#5_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='6') {
$("#6_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='7') {
$("#7_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#8_box").hide();
}
else if(value=='8') {
$("#8_box").show();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#1_box").hide();
}
});
$("#1_box").show();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
});
</script>
<!--End of Javascript Code for Form Radio Button Show / Hide Elements-->
What's important to note here is that for the radio buttons, they all have to have the same name but different values (
<input type="radio" name="type" value="1" id="type_1"/>
<input type="radio" name="type" value="2" id="type_2"/>) and the elements that you wish to show / hide according to which radio button is selected must each be enclosed within div tags that have unique id's (eg. <div id="1_box">) and you must identify all of these things in the javascript code below the form (see the example code above).
Step 2: Finding a way to make the fields referred to in the above form validate / become required only when their respective radio button was / is selected.
Once again I experimented with a number of different alternatives. Some only worked with checkboxes and text areas, others only worked with radio buttons and single drop down lists. Finally I discovered on the webdeveloper.com forums, where someone had a similar problem and
Suhas Dhoke had answered it in such a way that I could work with it. His solution works well (so far) with the hide / show coding I refer to above and with multiple drop down lists and other form fields.
Please note: the page may not validate properly, but I'm sure that can be sorted out eventually by placing the javascript code in a separate javascript file, however, for our purposes right now (ensuring that it works at all) we're just leaving it as part of the html file.
To start:
Place the following code between the <head></head> tags:
<!-- Start Javascript Code to validate conditional form elements -->
<script type="text/javascript">
function validateFunction() {
var j = 1;
for (var i = 0; i < document.formname1.elements.length; i++) {
var elem = document.formname1.elements[i];
if (elem.type == "radio") {
var chk_field_name = 'type_'+j;
var drop_field_name = 'DropField'+j;
var drop_field_name_a = 'DF'+j;
var drop_field_name_b = 'DFA'+j;
if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name).value == '') {
alert("You must select at least one option from "+drop_field_name+" drop down.");
return false;
}if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
alert("You must select one option from "+drop_field_name_a+" drop down.");
return false;
}if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_b).value == '') {
alert("You must select one option from "+drop_field_name_b+" drop down b.");
return false;
}
j++;
}/*{
var chk_field_name = 'type_'+j;
var drop_field_name_a = 'DF'+j;
if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
alert("You must select at least one option from "+drop_field_name_a+" drop down.");
return false;
}
j++;
}*/
}
return true;
}
</script>
<!-- End Javascript Code to validate conditional form elements -->
Make sure you note the name of the form (if your form does not have a name, give it one eg.
<form name="form1">) and in the code above find where it says formname1 and change that to your form's correct name, eg where it says:
for (var i = 0; i < document.formname1.elements.length; i++) {
var elem = document.formname1.elements[i];
change the bold type formname1 to your form name.
Next, locate where it says
if (elem.type == "radio") and where it says radio, change that to what ever selection field type you wish to have the other conditionally required elements validate against (your options are radio, checkbox and dropdown).
Then, note where it says
var chk_field_name = 'type_'+j; - the "type_" is the beginning of the radio button's id title and in the actual radio button code it will end with a unique number, eg.
<input type="radio" name="type" value="1" id="type_1"/>
Finally note where it says
var drop_field_name = 'DropField'+j; because that is where you must put the name and id of the fields that must be validated against their respectively selected radio buttons, eg.: <select
name="DropField1" id="DropField1"> and <select
name="DropField2" id="DropField2">
Please note here two things:
- just like the radio buttons id title('type') ending with unique numbers, the name and id's for the fields that must be validated against each radio button must also end in the same numbers that are associated with their radio buttons id. eg. if the radio button code is: <input type="radio" name="type" value="1" id="type_1"/>, then the respective conditionally required field must have the following name and id: <select name="DropField1" id="DropField1">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
- whilst the drop down (and probably also check boxes and radio buttons) fields that are conditionally required, must have identical names and id's, text fields (and probably text areas) do not, the latter only require id's.
Step 3: Piecing it all together:
Here is the entire example code all together
:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio Button validation</title>
<!-- Begining Javascript Code for show / hide form elements using Radio Buttons-->
<script language="javascript" type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--End Javascript Code for show / hide form elements using Radio Buttons--><!-- Start Javascript Code to validate conditional form elements -->
<script type="text/javascript">
function validateFunction() {
var j = 1;
for (var i = 0; i < document.formname1.elements.length; i++) {
var elem = document.formname1.elements[i];
if (elem.type == "radio") {
var chk_field_name = 'type_'+j;
var drop_field_name = 'DropField'+j;
var drop_field_name_a = 'DF'+j;
var drop_field_name_b = 'DFA'+j;
if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name).value == '') {
alert("You must select at least one option from "+drop_field_name+" drop down.");
return false;
}if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
alert("You must select one option from "+drop_field_name_a+" drop down.");
return false;
}if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_b).value == '') {
alert("You must select one option from "+drop_field_name_b+" drop down b.");
return false;
}
j++;
}/*{
var chk_field_name = 'type_'+j;
var drop_field_name_a = 'DF'+j;
if (document.getElementById(chk_field_name).checked && document.getElementById(drop_field_name_a).value == '') {
alert("You must select at least one option from "+drop_field_name_a+" drop down.");
return false;
}
j++;
}*/
}
return true;
}
</script>
<!-- End Javascript Code to validate conditional form elements -->
</head>
<body>
<form name="formname1" action="" onSubmit="return validateFunction();">field1A
<input type="radio" name="type" value="1" id="type_1"/><br/>
field2
<input type="radio" name="type" value="2" id="type_2"/><br/>
field3
<input type="radio" name="type" value="3" id="type_3"/><br />
field4 <input type="radio" name="type" value="4" id="type_4"/><br /> field5 <input type="radio" name="type" value="5" id="type_5"/><br />
field6 <input type="radio" name="type" value="6" id="type_6"/><br /> field7 <input type="radio" name="type" value="7" id="type_7"/><br /> field8 <input type="radio" name="type" value="8" id="type_8"/><br />
<div id="1_box">
DropField1
<select name="DropField1" id="DropField1">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/><br/></div>
<div id="2_box">
DropField2
<select name="DropField2" id="DropField2">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/><br/></div>
<div id="3_box">
DropField3
<select name="DropField3" id="DropField3">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br /><br /></div>
<div id="4_box">
DropField4
<select name="DropField4" id="DropField4">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br /><br /></div><div id="5_box">
DropField5
<select name="DropField5" id="DropField5">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />
DropField5A
<select name="DFA5" id="DFA5">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br />TextField5 <input type="text" name="DF5" id="DF5" />
<br /><br /></div><div id="6_box">
DropField6
<select name="DropField6" id="DropField6">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />TextField6 <input type="text" name="DF6" id="DF6" /><br /><br /></div><div id="7_box">
DropField7
<select name="DropField7" id="DropField7">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br /> DropField7a
<select name="DF7" id="DF7">
<option value="">Select #</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div><div id="8_box">
Field8 <input type="text" name="DropField8" id="DropField8" />
<br />
<br /></div>
<input type="submit" value="submit"/>
</p>
</form>
<p>
<!--Begining Javascript Code for Form Radio Button Show / Hide Elements-->
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='type']").click(function(){
var value = $(this).val();
if(value=='1') {
$("#1_box").show();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='2') {
$("#2_box").show();
$("#1_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='3') {
$("#3_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='4') {
$("#4_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='5') {
$("#5_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='6') {
$("#6_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#7_box").hide();
$("#8_box").hide();
}
else if(value=='7') {
$("#7_box").show();
$("#1_box").hide();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#8_box").hide();
}
else if(value=='8') {
$("#8_box").show();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#1_box").hide();
}
});
$("#1_box").show();
$("#2_box").hide();
$("#3_box").hide();
$("#4_box").hide();
$("#5_box").hide();
$("#6_box").hide();
$("#7_box").hide();
$("#8_box").hide();
});
</script>
<!--End of Javascript Code for Form Radio Button Show / Hide Elements-->This form is a variation of the following:</p>
<p>Show / Hide fields taken from: <a href="http://www.infopitcher.com/2011/10/showhide-form-elements-based-on-radio-button-selections-using-jquery/">Infopitcher</a></p>
<p>Validate fields taken from: <a href="http://www.webdeveloper.com/forum/showthread.php?t=143955">Suhas Dhoke</a></p>
<p>Where radio buttons must have the same name but can have different id's and must have different values and the different fields to validate must each have unique names which must be identical to their respective id's. In this example, drop down lists must also have a "value" in addition to the text contained in the list, whilst the text fields don't require this. Also to have multiple conditionally required fields required that each field type has a unique ID and some variations needed to be made to the javascript code provided by Suhas Doke in the link above.</p>
</body>
</html>
And that's it!
Next: make all these changes to my contact form, create and link to javascript file, convert html form to php (include security code at bottom), and check / recreate php file to process the inputs.
