Example of using getElementById in a form

Show the form

The code

function trim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

function checkEmail(email)
{  
 
  var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
 
  if(pattern.test(email)) {       
  return true;
  } else { 
  return false;
  }

}

function toggleFormVisibility()
{
  var frm_element = document.getElementById('subscribe_frm');
  var sub_link_element = document.getElementById('sub');
  var nosub_link_element = document.getElementById('nosub');

  var vis = frm_element.style;
 
  if(vis.display=='' || vis.display=='none') {
    vis.display = 'block';
    sub_link_element.style.display='none';
    nosub_link_element.style.display='';
  } else {
    vis.display = 'none';
    sub_link_element.style.display='block';
    nosub_link_element.style.display='none';
  }

}

function processFormData()
{

  var name_element = document.getElementById('txt_name');
  var email_element = document.getElementById('txt_email');
  var mail_format_element = document.getElementById('slt_mail_format');

  var name = trim(name_element.value);
  var email = trim(email_element.value);
  var mail_format = mail_format_element.value;

  var error_message = 'The following fields had errors in them: \n\n';
  var data = 'You entered the following information: \n\n';

  var error_flag = false;

  if(name == '') {
    error_message += 'Name: Please enter your name\n';
    error_flag = true;
  } else {
    data += 'Name: ' + name + '\n';
  }

  if(!checkEmail(email)) {
    error_message += 'Email: Please enter a valid email address';
    error_flag = true;
  } else {
    data += 'Email: ' + email + '\n';
  }

  data += 'Mail Format: ' + mail_format;

  if(error_flag) {
    alert(error_message);
  } else {
    alert(data);
  }

}

Download the code here: getelementbyid-form-sample.zip

Back to article: using getElementById

  • Digg
  • del.icio.us
  • Netscape
  • Reddit
  • StumbleUpon
  • Technorati
  • YahooMyWeb

How to make a form without coding? Click here for a demo.

Follow me on twitter

HTML Forms
HTML Form Tutorial
The Form Tag
The Form Submit Button
Form design software
How to make a web form
Make web forms quickly, without coding

Javascript Form Handling
  Basics
Using getElementById to get the elements in a form
Set value of form element using JavaScript
Get value of form element using JavaScript
Handling multiple forms using JavaScript
JavaScript reset/clear a form
  Advanced
JavaScript Form Validation
Submitting a form using JavaScript
Can JavaScript Email a Form?
Switching the form action field dynamically
JavaScript Button

JavaScript Popup Windows
The window.open method
The window.close method
More ...

 
.   Copyright © 2003-2009 JavaScript-coder.com. All rights reserved.