Random Snippets » demo

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

Knix — 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.

Simulate a button click via JavaScript

Knix — Wed, 05 Mar 2008 07:09:21 +0000

There is a rare need for this type of functionality but I have found myself in a couple of situations where I needed it. Here is a quick demo of a button click that is simulated from another event handler. In this case, the button click is invoked by checking a checkbox.

Demo Check the box to simulate a button click

Here is the HTML code including the JavaScript:

1
2
3

<input type="checkbox" onClick="document.getElementById('theSubmitButton').click();">Check the box to simulate a button click
<br>
<input type="button" name="theSubmitButton" id="theSubmitButton" value="Button" onClick="alert('The button was clicked.');">

If the button is clicked directly, a JavaScript alert will pop up with the following message:

The button was clicked.

The onClick event handler for the checkbox will access the HTML DOM button object and invoke the click() method. This simulates the button click and invokes the alert.

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

Knix — 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

Knix — 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

Knix — 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);
}

Dynamic Country State Javascript Menu Example

Knix — Sat, 09 Feb 2008 07:36:02 +0000

I have found myself in a couple of situations where I needed a simple dynamic javascript menu where the user would make a selection from one select list and depending on what the user selected from the first select list a second list would offer further options. Here is a perfect example:

Demo

Country:

State/Province:

Country value:
State/Province value:

In this example, the state/province menu is disabled until the user has first selected a country. Then depending on the country that is chosen, the list of associated states or provinces would follow. For the sake of simplicity, only the state/province menus have been implemented for the United States and Canada. If any other country is chosen, the value for the state input defaults to Other.

Here is the HTML code for the example:

Country:

State/Province:

Country value:
State value:

After the user makes a country selection, the Javascript onChange event is fired and executes the printStateMenu Javascript function and passes the value of the country that was chosen as an argument. The table just displays the current values of the country and state select inputs. Please note that the script source path on line 1 will have to edited depending on where you store the JavaScript function. Here is the Javascript code for the printStateMenu function:

function printStateMenu(country) {     
	var stateSelect = '';
	if (country == 'US') {
		stateSelect = '';
	}
	else if (country == 'CA') {
		stateSelect = '';
	}
	else {
		stateSelect = '';
	}
	document.getElementById('stateSelect').innerHTML = stateSelect;
	document.getElementById('countryValue').innerHTML = document.getElementById('country').value;
	document.getElementById('stateValue').innerHTML = document.getElementById('state').value;
}

This Javascript function is pretty simple. It looks at the country value that was selected and creates the corresponding state/province menu. Then it replaces the HTML code in the stateSelect DOM element with the new select menu. The state/province select inputs for US and Canada also have an onChange event that displays the chosen value of the state input into the table. The select menu for any other country will just return a disabled select menu and default to the Other value for the state input.