Random Snippets » form

How to loop through checkboxes or radio button groups via JavaScript

Allen Liu — Fri, 16 May 2008 05:00:18 +0000

Do you have a form with checkboxes or radio buttons that you would like to loop through via JavaScript? This JavaScript function will do just that!

Demo

Here is the plain HTML:

As usual, there is not too much action going on here. It is just a plain form with some checkboxes and 2 radio button groups called candy and drink. Radio buttons with the same name will be grouped and allows the users to only select one option out of the entire group. The submit button will launch the loopForm JavaScript function and the myForm DOM object is passed over as an argument. There are also 2 divs in lines 23-24 where are checkbox and radio button results will be posted. Now, on to more exciting things.

Here is the JavaScript code:

function loopForm(form) {
    var cbResults = 'Checkboxes: ';
    var radioResults = 'Radio buttons: ';
    for (var i = 0; i < form.elements.length; i++ ) {
        if (form.elements[i].type == 'checkbox') {
            if (form.elements[i].checked == true) {
                cbResults += form.elements[i].value + ' ';
            }
        }
        if (form.elements[i].type == 'radio') {
            if (form.elements[i].checked == true) {
                radioResults += form.elements[i].value + ' ';
            }
        }
    }
    document.getElementById("cbResults").innerHTML = cbResults;
    document.getElementById("radioResults").innerHTML = radioResults;
}

This function loops through all the elements in the form that was passed over to the function.

If the element is of checkbox type and it is checked, the value of this element will be appended to our cbResults variable which is keeping track of our checkbox results.

If the element is of radio type and it is checked, the value of this element will be appended to our radioResults variable which is keeping track of our radio button results.

After all the looping is finished, the results are cbResults and radioResults are inserted into the cbResults div and radioResults div respectively.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

How to dynamically add content to a div and store the content to a cookie via JavaScript

Allen Liu — Tue, 15 Apr 2008 06:45:17 +0000

This is an example of adding dynamic content via JavaScript by allowing the user type in the actual content.

Demo

Your content will be added dynamically below:

Here is the plain HTML for the demo:


Content to be added:
Type here...<h1>tags work as well</h1><u>woohoo</u>





Your content will be added dynamically below:

There are 3 important parts to the HTML code:

textarea – This is the content that the user enters. HTML tags are naturally supported.
Add content button – This buttons calls our addContent() function which passes the div id of where the content is to be entered and the actual content itself from the textarea.
myDiv – This is the id of blank div where the content will be inserted.

Here is the JavaScript code for the addContent() function:

1
2
3

function addContent(divName, content) {
     document.getElementById(divName).innerHTML = content;
}

That’s it! All it does it retrieve the DOM element, which in this case, is just an empty div and sets the innerHTML attribute to the content that is passed over to this function from the form.

This demo is in response to a request that saves the content that the user has entered.

Demo

Your name will be saved below:

Here is the HTML code:


Enter your name below and click the button.  Your name will be saved to a cookie that expires in 7 days.  When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.









Your name will be saved below:

The onClick event listener will launch 2 scripts this time:

addContent – This will do exactly what it did before in the first demo and just insert the input text value inside the div.
setCookie – This will save a cookie with the name content and assign whatever is inside the input text as the value. In addition, the cookie is set to expire in 7 days.

To avoid reinventing the wheel, I have borrowed the JavaScript get and set cookie functions from W3 Schools and edited it slightly for the needs of this demo.

Here are the new JavaScript functions for cookie management:

function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) { 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            var cookieContent = "Welcome back " + unescape(document.cookie.substring(c_start,c_end));
            document.getElementById('myDiv2').innerHTML = cookieContent;
        } 
    }
}
getCookie('content');

Please refer to W3 Schools for a detailed description of these JavaScript functions. The only edit I have made is with the getCookie function in lines 13-14 where it retrieves the cookie value and inserts the content into a div. Also, line 18 is very important as it calls the getCookie function and looks for the content cookie. If the cookie exists, the content will be displayed in the myDiv2 div.

When using these JavaScripts, make sure you load them after all your HTML is loaded. Otherwise, the function would have no place to insert the cookie content.

Although using cookies is a great way to store information, there are a couple of caveats:

Size limitation – This depends on the browser but keeping your cookies to a maximum size of 4000 bytes will keep you in the safe zone.
Cookie limit per domain – This also depends on the browser but the general rule is 20 cookies per domain.

How to validate email format via JavaScript

Allen Liu — Wed, 02 Apr 2008 05:30:08 +0000

This JavaScript demo verifies that an email address is in the correct format and that the user has typed in the same address in both fields to prevent mistyping of the address. I have borrowed the regex for verifying the correct email format from a different site.

Demo

Here is the plain HTML of the form. Please note that I have removed the action attribute because this is only a demo and we are only concerned with the client-side verification of the JavaScript function.


Email: 

Please type in your email again:

Nothing exciting here except in line 6 where the onClick event is triggered when the user clicks on the button. This event will launch the verifyEmail() JavaScript function which will check the user input of the email address.

Here is the code for the verifyEmail() function:

function verifyEmail(){
var status = false;     
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
     if (document.myform.email1.value.search(emailRegEx) == -1) {
          alert("Please enter a valid email address.");
     }
     else if (document.myform.email1.value != document.myform.email2.value) {
          alert("Email addresses do not match.  Please retype them to make sure they are the same.");
     }
     else {
          alert("Woohoo!  The email address is in the correct format and they are the same.");
          status = true;
     }
     return status;
}

This function will return a false value if the user does not type in an email address in the correct format or if the user fails to type in the same email address in both fields. If the email addresses passes both these tests, then the function will return a true value.

The regex for validating the correct email format in line 2 has been borrowed and edited slightly by adding the i flag so that the regex is case-insensitive.

The if block in lines 3-6 checks to see if the email address in the first field passes the regex check by invoking the search() method on our email string value. This method accepts regex expressions as arguments to check the string and returns the position of the specified value in the string or a -1 if no match was found. If the search() method returns a -1, then an alert would tell the user that an invalid email address has been entered and returns a false value.

Lines 7-10 checks to see if the user has entered the same string in both email fields. This is done by a simple equality check on the string values. If the strings are different, an alert warns the user that the email addresses are not the same and returns a false value.

If we have passed the two tests, then else block in lines 11-14 gets executed. An alert tells the user that he or she has done a good job and the function returns a true value so that you can continue with the form submission.

Ideally, you would have this function run during the onSubmit attribute for the form tag. This way, the form will get submitted when the checkEmail() function returns a true value. Here is an example of how your form would look like:


Email: 

Please type in your email again:

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!

JavaScript to select all or none of the checkboxes in a form

Allen Liu — Thu, 28 Feb 2008 07:24:09 +0000

Here is a quick demo of the select all or none JavaScript function that automatically toggles all of your checkboxes in a given form.

Demo

This is the plain HTML of the form:


My favorite programming/scripting language is:
Select All | None

JavaScript

Perl

PHP

C++

There is nothing exciting about the HTML code except for line 3 where all the magic happens. There are 2 links in this line of code:

All - When the user clicks on this link, it will execute the selectToggle() JavaScript function and passes over 2 arguments: the value to set the checkboxes (true in this case) and the name of the form.
None - This link executes the selectToggle() JavaScript function and passes over the false value to uncheck the checkboxes and the name of the form.

Here is a peek at the selectToggle() JavaScript function:

function selectToggle(toggle, form) {
     var myForm = document.forms[form];
     for( var i=0; i < myForm.length; i++ ) { 
          if(toggle) {
               myForm.elements[i].checked = "checked";
          } 
          else {
               myForm.elements[i].checked = "";
          }
     }
}

This function basically loops through all of the inputs in the given form name that is passed over as an argument. Depending on the value of the toggle parameter, which can be true or false, each form element will checked or unchecked respectively.

Form verification via JavaScript

Allen Liu — Wed, 27 Feb 2008 07:27:12 +0000

Are you looking for a simple way to verify a form that you have? The example below demonstrates some of the common techniques used in verifying a form. Test out the form by leaving at least one of the fields blank before you submit the form.

Demo

Here is the plain HTML for the form:


UsernamePlease fill in your username.


EmailPlease fill in your email.

Notice that the error warnings such as the Please fill in your username. or Please fill in your email. have already been preloaded but hidden from the viewer by setting the display attribute to none. If the user submits the form with one or more of the fields blank, 4 things will happen to notify the user (Note: I tried to squeeze in as many warning events as possible just for demonstration purposes so I apologize if it is a bit over the top):

the background of the missing input field will turn yellow
a red border will appear around the missing input field
the hidden error message will become visible
an alert will pop up notifying the user that 1 or more fields are missing

When the user clicks on the Submit button, the onSubmit event gets triggered and executes the verifyForm() JavaScript function. If the onSubmit event returns a false value, the form does not get submitted. This value is determined by the verifyForm() function, which returns true if all fields are filled in and returns false if one or more fields are missing.

Here is a peek at the JavaScript verifyForm() function:

function verifyForm(form) {
    var userName = form.name.value;
    var userEmail = form.email.value;
    var success = 1;
    if (!userName) {
        document.getElementById("usernameMsg").style.display = "block";
        form.name.style.backgroundColor = "yellow";
        form.name.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.name.style.backgroundColor = "";
        form.name.style.border = "";
        document.getElementById("usernameMsg").style.display = "none";
    }
    if (!userEmail) {
        document.getElementById("emailMsg").style.display = "block";
        form.email.style.backgroundColor = "yellow";
        form.email.style.border = "3px red solid";
        success = 0;
    }
    else {
        form.email.style.backgroundColor = "";
        form.email.style.border = "";
        document.getElementById("emailMsg").style.display = "none";
    }
    if(!success) {
        alert("The form is incomplete.  Please read the error message(s).");
        return false;
    }
    else {
        alert("The form was submitted succesfully!");
        return true;
    }
}

Lines 5-15 checks to see if the username field is blank or not. If the field is blank, it uses the DOM to access the div that is holding our warning message to the user and sets the display attribute to block (line 6). This makes the message visible to the user.

Next, it accesses the input text field and dynamically changes the backgroundColor attribute to yellow (line 7).

Then, it accesses the input text field again and dynamically changes the border attribute to 3px red solid (line 8). Here is a quick breakdown of the attribute we just used:

3px – the width of the border
red – the color of the border
solid – the style of the border

Finally, it sets the success variable to 0 which is equivalent to a false value (line 9). We will use this variable later on to decide if the form is ready to be submitted or not.

The else statement in lines 11-14 just resets all the styling back to the default values. This is for the case where a user is resubmitting the form so we want to remove all the warnings just in case they were activated from any previous submissions.

Lines 16-26 does the same exact thing except it is for the email text input field. Remember, all we are doing in this example is checking to see if the field is empty or not. This is to keep the code simple.

Line 27 checks the success variable to see if it had been set to false. If so, an alert is executed telling the user that one or more fields were missing and to check the error messages (line 28). Then it returns a false value to prevent the form from being submitted (line 29).

If the form has been filled-in completely, the else block gets executed in lines 31-34. In this case, an alert is executed saying that the form was submitted successfully. As a resutl, the function returns the value true which then submits the form.

How to dynamically add form elements via JavaScript

Allen Liu — Thu, 21 Feb 2008 08:00:43 +0000

Not all forms are meant to be static. Sometimes, you want to allow the users to add certain parts of the form as they need them. Here is a nice example of dynamically adding inputs to your form as users need them. In addition, an input limit has been implemented in the script and it is set to 3.

Demo

Here is the plain HTML for the form:



     
          Entry 1

When the user clicks on the Add another text input button, the addInput JavaScript function is executed and given the dynamicInput argument which is the name of the div that contains all our text inputs. Here is what our JavaScript function looks like:

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " 
";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

There are a couple of global variables:

counter – Tracks the number inputs being added.
limit – The maximum number inputs allowed for the user to add. In this case, we are limiting the user to a maximum of 3 input texts that they can submit with the form.

The addInput JavaScript function expects a parameter, which in this case is the id of the div, to add the dynamic text inputs. Once executed, the function will first check to see if the maximum number of input texts have already been used. If so, an alert will be given stating that the limit has been reached.

If the limit has not been reached, then the else block of the code is executed. A new div element is created and the inner HTML is set with 2 things:

Entry # – The global variable, counter, keeps track of the current number of text inputs that are in the form.
The input text element – The name of these text inputs,myInputs[], is followed by square brackets to indicate that it is an array. This will be more important later on when the form is submitted using the POST method.

If the form gets submitted to a PHP file, you can easily access each input value for your myInputs array. Here is the PHP code for doing just that:

$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
     echo $eachInput . "
";
}

This is just a sample code to echo all the text input values that were sent from the form. An array variable, $myInputsPHP, is initialized with the myInputs from the form. Then, the foreach loop will go through each value and print them out.

Here is another version of this script that adds different types of inputs such as text fields, radio buttons, checkboxes, and textareas. To simplify things, the limit functionality has been removed.

Demo

Here is the plain JavaScript code for the addAllInputs function. It accepts 2 arguments:

div id – This is the div id where all the dynamic inputs will be added to.
input type – This is the type of input that we want to add.

var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
function addAllInputs(divName, inputType){
     var newdiv = document.createElement('div');
     switch(inputType) {
          case 'text':
               newdiv.innerHTML = "Entry " + (counterText + 1) + " 
";
               counterText++;
               break;
          case 'radio':
               newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " 
";
               counterRadioButton++;
               break;
          case 'checkbox':
               newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " 
";
               counterCheckBox++;
               break;
          case 'textarea':
	       newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " 
type here...";
               counterTextArea++;
               break;
          }
     document.getElementById(divName).appendChild(newdiv);
}

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!