Example: Using Javascript to access a form when there are multiple forms

Write an Article (form name attribute="submit_article")

Bookmark A Page (form name attribute="submit_bookmark")

Interacting between multiple forms

Copy site_cat element value of the first form to the input field named "tags_list" of the second form


The code

function showFormElements(oForm) {
  var cnt = 0;
  var msg = "Form with 'name' attribute='" + oForm.name + "'";
  var str = "\nThe elements are: \n\n";
  for (i = 0; i < oForm.length; i++) {
  cnt ++;
  str += oForm.elements[i].tagName + " with 'name' attribute='" + oForm.elements[i].name + "'\n";
  }

  msg += " has " + cnt + " elements. \n" + str;
  alert(msg);
}

function showFormData(oForm) {
  var msg = "The data that you entered for the form with 'name' attribute='" + oForm.name + "': \n";
 
  for (i = 0; i < oForm.length, oForm.elements[i].getAttribute("type") !== 'button'; i++) {
    msg += oForm.elements[i].tagName + " with 'name' attribute='" + oForm.elements[i].name + "' and data: ";
    if(oForm.elements[i].value == null || oForm.elements[i].value == '') {
    msg += "NOT SET \n";
    } else {
      msg += oForm.elements[i].value + "\n";
    }
  }

  alert(msg);
}


function copyFormElementToElementOfDifferentForm(oForm1Name, oForm2Name, oForm1ElementName, oForm2ElementName) {

  var oForm1 = document.forms[oForm1Name];
  var oForm2 = document.forms[oForm2Name];
  var oForm1Element = oForm1[oForm1ElementName];
  var oForm2Element = oForm2[oForm2ElementName];

  if(oForm2Element.value == '') {
    oForm2Element.value += oForm1Element.value;
  } else {
    oForm2Element.value += ', ' + oForm1Element.value;
  }
}

Download the code here: javascript-forms-example-3.zip

Back to article:Using JavaScript to access form objects when there are multiple forms

  • 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.