Docstoc

Javascript tutorials

Document Sample
Javascript tutorials Powered By Docstoc
					Example2 : using getElementById in a form

Your Name:


Your Email:


               Plain Text
Mail Format:


The code

function processFormData()
{

    var inputs = document.getElementsByTagName('input');

    var message = 'The form has the following input elements: \n\n';

  for (var i = 0; i < inputs.length; i++) {
  message += inputs[i].tagName + " element with 'type' attribute = '" +
inputs[i].getAttribute('type') + "' and 'name' attribute = '" +
inputs[i].getAttribute('name') + "'\n";
  }

    alert(message);

}
What if we only wanted to access <input> elements with the type attribute as text? We could do it in
the following way:

var inputs = document.getElementsByTagName("input");
var message = "The form has the following input elements with the 'type' attribute
= 'text': \n\n";

for (var i=0; i < inputs.length; i++) {

if (inputs[i].getAttribute('type') == 'text') {

message += inputs[i].tagName +
" element with the 'name' attribute = '";
message += inputs[i].getAttribute('name') + "'\n";

}

}

alert(message);
This time, the elements retrieved do not include the element: <input type="button">.


Example3 : using getElementById in a form

Your Name:


Your Email:


               Plain Text
Mail Format:


The code
function processFormData()
{

    var inputs = document.getElementsByTagName('input');

    var message =
      "The form has the following input elements with "+
      " the 'type' attribute = 'text': \n\n";

    for (var i=0; i < inputs.length; i++) {
    if (inputs[i].getAttribute('type') == 'text') {
      message += inputs[i].tagName +
          " element with the 'name' attribute = '"
          + inputs[i].getAttribute('name') + "'\n";
    }
    }

    alert(message);

}
Using the document.getElementsByName Method

This method takes in as argument the name attribute value of elements to be retrieved and returns a
collection of desired matching elements.

In the code snippet below, let us say we need to get a reference to the <select> element with the
name attribute mail_format.

<select name="mail_format" id="slt_mail_format">
<option value="TEXT">Plain Text</option>
<option value="HTML">HTML</option>
</select>


We could access the desired element in this way:
var mail_format_elements = document.getElementsByName('mail_format');


The getElementByTagNames method is handy for accessing specific form elements in forms where
the name attribute is unique and the id attribute is not present (and so getElementById cannot be
used), although it can also be used when the id attribute is present as an alternative to the
getElementById method.


Example4 : using getElementById in a form

Your Name:


Your Email:


               Plain Text
Mail Format:


The code
function processFormData(name_attr)
{

    var mail_format_elements = document.getElementsByName(name_attr);

    var message = "The form has the following elements with " +
          " the 'name' attribute = '" + name_attr + "': \n\n";

    for (i=0; i<mail_format_elements.length; i++) {
      message += mail_format_elements[i].tagName +
        ' element with "id" attribute = "' +
        mail_format_elements[i].getAttribute("id") + '"\n';
    }

    alert(message);

}




How to get the value of a form element using JavaScript
Please refer article: how to get JavaScript form object for information on getting a reference to the
form object.

In this article we demonstrate the use of Javascript for accessing the values of form elements. Later,
we will demonstrate all the concepts using a real world example.


Getting a text input element and it's value

To obtain a reference to a text input element, we can use a construct like this:
oText = oForm.elements["text_element_name"]; OR
oText = oForm.elements[index];


In the code above, "index" is the position of the element in the 0-based elements array, and oForm is
the form object reference obtained using the document.forms collection:

oForm = document.forms[index];


To get the value of the text input element, we can use the value property of the text input object:

text_val = oText.value;


As an example, if we have the following text input element:

<input type="text" name="name" id="txt_name" size="30" maxlength="70">


We can access the value of the element like this:

name = oForm.elements["name"].value;


Getting a textarea element and it's value

The syntax for obtaining a reference to a textarea element is very similar:

oTextarea = oForm.elements["textarea_element_name"];


To get the value entered by the user in the textarea field:

textarea_val = oTextarea.value;


As an example, if we have a textarea element like this:

<textarea name="address" id="txta_address" rows="3" cols="35"></textarea>


We can access the value entered by the user in this way:

address = oForm.elements["address"].value;


Getting a hidden element and it's value

The syntax for obtaining a reference to a hidden input element:

oHidden = oForm.elements["hidden_element_name"];


To get the value of this element, we use the familiar code construct:

hidden_val = oHidden.value;


As an example, if we have a hidden input element in the form defined like this:
<input type="hidden" name="number_of_skillsets" value="1">


We can get the hidden input element's value like this:

number_of_skillsets = oForm.elements["number_of_skillsets"].value;


Getting a select-one element and the selected option

As before, we can obtain a reference to this type of element using its name:

oSelectOne = oForm.elements["select_one_element_name"];


To get the index of the selected option in the javascript options array of the select element, we can
use the selectedIndex property of the select element object:

index = oSelectOne.selectedIndex;


We can now use this index to determine the value of the selected option:

var selected_option_value = oSelectOne.options[index].value;


If we needed to get the text corresponding to the selected option, we would need to use the text
property of the option element, instead of the value property:

var selected_option_text = oSelectOne.options[index].text;


Let us say we need to find out the country selected by the user from a select-one list:

<select   size="1" id="slt_country" name="country">
<option   value=""> - Select - </option>
<option   value="AF">Afghanistan</option>
<option   value="AL">Albania</option>
<option   value="DZ">Algeria</option>

...

<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>


The Javascript code that can be used to get the user-selected country:

var selected_index = oForm.elements["country"].selectedIndex;

if(selected_index > 0) {

var selected_option_value =
oForm.elements["country"].options[selected_index].value;
var selected_option_text = oForm.elements["country"].options[selected_index].text;
} else {

alert('Please select a country from the drop down list');

}


Getting a select-multiple element and all the selected options

If a select element has the additional attribute 'multiple', it allows users to select more than one option.
Have a look at this HTML fragment:

<select name="job_category" id='slt_job_category' size="4" multiple='multiple'>

<option   value="">- Select (Max 3) -</option>
<option   value='1'>Software Development</option>
<option   value='2'>Sales & Marketing</option>
<option   value='3'>Customer Support & Communications</option>
<option   value='4'>Advertising</option>
<option   value='5'>Public Relations and Event Management</option>

...

<option value='22'>Oil & Gas</option>
<option value='23'>Construction</option>
<option value='24'>Other</option>

</select>


We can write a Javascript function to get all the user-selected options:

function getSelectedOptions(oList) {
var sdValues = [];

for(var i = 1; i < oList.options.length; i++) {
if(oList.options[i].selected == true) {
sdValues.push(oList.options[i].value);
}
}

return sdValues;
}


To use this function, we must first obtain a reference to the select-multiple object:

oList = oForm.elements["job_category"];


We now pass this object reference to the getSelectedOptions function above. In this function, we
iterate over all the options in the options array. Whenever an option is selected, the option object's
selected property will be true. So, in the function we use this condition to get the indices of all the
options selected, and then push the values of all these options onto the array sdValues which is
returned by the function. We can use this generic function to capture the values of selected options
for any select-multi element in a form.

				
DOCUMENT INFO
Shared By:
Tags: Javascript
Stats:
views:1
posted:7/21/2013
language:
pages:7