Saturday, May 26, 2012

HTML and Javascript Show / Hide form fields and make specific fields conditionally required

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:
  1. place between the <head></head> tags:
  2.   <!-- 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-->
  3.  Place between the <body></body> tags:
  4.  <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:
  1. 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>
  2. 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 &quot;value&quot; 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.

Developing Mobile Applications Part 1

Sorry it's been awhile! I've been busy trying to get a number of personal and not so personal projects out of the way!
Recently, however, my brother in law was talking to me about developing some mobile applications for the blackberry, iphone and android, so I began doing some research into this.
Amongst the things I have discovered:
  • the programming code required / used is mainly html, css, javascript, xml, flash and c# - most of which (except the c#) I already know as a website designer! The difference is that a mobile application is packaged differently
  • there are several programs that can be used to develop / package the applications, including some I was already familiar with: the adobe suite (specifically dreamweaver, flash builder, air, flash pro, etc. - although I do not have the version that can compile what I design as a mobile application), eclipse (either on it's own or with rhomobile or JBoss).
So I decided to start with developing an android application. I began with both eclipse on it's own (using this tutorial: youtube - Programming for Android, Part 1, Installing everything you need by TZCoder) and in combination with rhomobile (following this tutorial: rhostudio tutorial - installation and developing an application)

Look at the requirements for each below (this list is not complete and only goes as far as I understand it and will be updated as I learn more about each):
Eclipse stand alone Rhomobile & Eclipse JBoss & Eclipse
Opperating System (development) Windows, Linux and Macintosh (regular PC and server with desktop environment) Windows and Macintosh (regular PC and server with desktop environment) Windows, Linux and Macintosh (server with desktop environment only?)
Platforms & Software to install
  • Java Runtime Environment (JRE),
  • Java Development Kit (JDK),
  • Android SDK,
  • Eclipse,
  • Android Eclipse Plugin
  • Rhostudio,
  • Eclipse,
  • Java Development Kit (JDK),
  • SDK's (software development kits) for each mobile device you wish to develop for
  • Java 6.0 (Java SDK 1.6)
  • Maven 3
  • JBoss Application Server 7.1
  • Getting started with JBoss AS
  • JBoss Tools 3.3 (optional) JBoss Tools and JBoss AS Setup
Mobile Devices Supported
  • Android,
  • Blackberry
  • Android,
  • Blackberry,
  • Iphone,
  • Ipad,
  • Windows mobile,
  • Symbian,
  • etc.
Programming Language html, xml, css, javascript ruby, html, xml, css, javascript
Types of Applications each can develop static dynamic, content management
Server Side Software required for public use
ruby, cloud based

At the time of this original writing I had only done one mobile application (HelloWorld) in eclipse stand alone and two related ones had been begun in rhomobile and eclipse.

It is important to note here that after following the youtube tutorial linked above (for the HelloWorld eclipse stand alone mobile application for android), I now had to figure out how to export the HelloWorld project as an .apk file. To do this, I followed the instructions here and here, and to my surprise, I was successful on the first try although mind you I had not done anything outside of the tutorial script wise.