AJAX

validation of Multiple forms in single page

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jul 2009

Posts: 12

Reputation: goldy736 is an unknown quantity at this point

Solved Threads: 0

goldy736

Offline

Newbie Poster

validation of Multiple forms in single page

Jul 9th, 2009

hi guys,

i have a php page with java script embed in it , i have 3 forms in a single page ... namely form1, form2, form3 .
form 1 and form2 have a text box , these text boxes get input from users. Now my task is to get the value of these 2 tex boxes in form3 when the user click the submit button , so that i pass the values in those text boxes to next page for calculation.

i tried the following code in form3 but it result in vain :

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type='text/javascript' language='JavaScript'>
var resp_1= document.q1.response1.value;
document.counter.response1_user.value= resp_1;
</script>
<script type='text/javascript' language='JavaScript'>
var resp_1= document.q1.response1.value;
document.counter.response1_user.value= resp_1;
</script>

q1 = name of form1 , response1 = text box in form1
counter = name of form3 , response1_user = text box in form3.

please help me out ....

Thank you !

•

Join Date: Jun 2009

Posts: 49

Reputation: sysel is an unknown quantity at this point

Solved Threads: 3

sysel

Offline

Light Poster

Re: validation of Multiple forms in single page

Jul 9th, 2009

Please take in account that you can simply submit one form at once. The simple way is to gather all those text inputs into one form and the submit sends all the requested data.

•

Join Date: Jul 2009

Posts: 12

Reputation: goldy736 is an unknown quantity at this point

Solved Threads: 0

goldy736

Offline

Newbie Poster

Re: validation of Multiple forms in single page

Jul 10th, 2009

hi,
thanks for your reply , i cant put in single form because am performing a quiz pages where 2 questions were to be displayed in single page , so i used Q1 in form1 and Q2 in form2.. with each having a reset button , if i put them together in single form values may get passed but, click on any 1 reset clear all data in both Questions...so i use 3 forms ...where in 3rd form i get all the values and then i pass it to next page ..

Thank you !

•

Join Date: Jun 2009

Posts: 49

Reputation: sysel is an unknown quantity at this point

Solved Threads: 3

sysel

Offline

Light Poster

Re: validation of Multiple forms in single page

Jul 10th, 2009

•

Originally Posted by goldy736

hi,
thanks for your reply , i cant put in single form because am performing a quiz pages where 2 questions were to be displayed in single page , so i used Q1 in form1 and Q2 in form2.. with each having a reset button , if i put them together in single form values may get passed but, click on any 1 reset clear all data in both Questions...so i use 3 forms ...where in 3rd form i get all the values and then i pass it to next page ..

Thank you !

Well, close each separated question in its own <div id="Q1"> Q2 etc. You can reset questions separately and submit together :-)

•

Join Date: Apr 2009

Posts: 884

Reputation: Airshow will become famous soon enough

Solved Threads: 126

Airshow

Offline

Practically a Posting Shark

Re: validation of Multiple forms in single page

Jul 10th, 2009

Goldy736,

The requirement for independent resets is indeed good reason to have separate form1 and form 2.

There is no particular need for a third form as you could compoite reponse_1 and reponse_2 into a field within say form 2 then submit it. However, a third form is also an entirely reasonable approach.

You are nearly there with your code. It just needs a bit more and to be fired in response to form submission rather than while the page loads as will occur unless it is wrapped in a function.

Try this:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<script>
function getUserResponses(){
	var resp_1 = document.forms['q1'].response1.value;
	var resp_2 = document.forms['q2'].response2.value;
	document.forms['counter'].response1_user.value= resp_1;
	document.forms['counter'].response2_user.value= resp_2;
	return false;
}
</script>
</head>
 
<body>
 
<form id="q1" name="q1">
What colour are your eyes?&nbsp;<input name="response1">
<input type="reset" value="Reset">
</form>
 
<form id="q2" name="q2">
What colour are your feet?&nbsp;<input name="response2">
<input type="reset" value="Reset">
</form>
 
<form action="whatever.php" method="get" id="counter" name="counter" onsubmit="return getUserResponses()">
<input Xtype="hidden" name="response1_user">
<input Xtype="hidden" name="response2_user">
<input type="submit" value="Submit">
</form>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<script>
function getUserResponses(){
	var resp_1 = document.forms['q1'].response1.value;
	var resp_2 = document.forms['q2'].response2.value;
	document.forms['counter'].response1_user.value= resp_1;
	document.forms['counter'].response2_user.value= resp_2;
	return false;
}
</script>
</head>

<body>

<form id="q1" name="q1">
What colour are your eyes?&nbsp;<input name="response1">
<input type="reset" value="Reset">
</form>

<form id="q2" name="q2">
What colour are your feet?&nbsp;<input name="response2">
<input type="reset" value="Reset">
</form>

<form action="whatever.php" method="get" id="counter" name="counter" onsubmit="return getUserResponses()">
<input Xtype="hidden" name="response1_user">
<input Xtype="hidden" name="response2_user">
<input type="submit" value="Submit">
</form>

</body>
</html>

I have left this code in a state where you can see what's going on.

To make it operational:

In getUserResponses() , change return false to return true .
Change form 3's action to the name of the (php) file that is to receive the user data.
Change form 3's method to "post" (optional, depending on what the php file is set up to handle)
Change the two attributes Xtype="hidden" to type="hidden" .

Airshow

Last edited by Airshow; Jul 10th, 2009 at 10:13 pm.

50% of the solution lies in accurately describing the problem!

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: validation of Multiple forms in single page

Jul 11th, 2009

Since we have it all here, then here's another demo that allows you to tranfer user input into selected form.

Here's the document sample :

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-Target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style type="text/css">
/* <![CDATA[ */
.hide { display : none; }
.show { display : block; }
/* ]]> */
</style>
<script type="text/javascript" src="./form.js"></script>
<script type="text/javascript">
// <![CDATA[
var fLen;
var validate = function() {
fLen = 3; // Where 3 is the number of forms in the page.
   $((( fLen ) - 1 )).onsubmit = function() { // Initiating onsubmit handler with form3. 
      for ( var i = 0; i < 3; i++ ) { 
/* Looping thru the entire form field( 1-3 ), to check whether if the user provided sufficient data on this fields. */
         if ( $( i, 0 ).value ) { // Simulating the user input into form3>>field#2>>field#3
         $( 2, i ).value = $((( i ) - 1 ), 0 ).value;
         continue
         }
      } if ( !$( 2, 0 ).value || !$( 2, 1 ).value || !$( 2, 2 ).value ) { // If any of the fields inside form3 is left empty, then exit function. Otherwise return true;
      return false;
      } alert( "All fields has been verified.", "Thank you!" );
   }; 
}; window.onload = validate;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form0" action="#" method="post" onsubmit="return false;">
<div><label for="txt0">Form1 Field #1 : <input type="text" id="txt0" name="txt0" value="" size="30" /></label></div>
</form>
<form id="form1" action="#" method="post" onsubmit="return false;">
<div><label for="txt1">Form2 Field #2 : <input type="text" id="txt1" name="txt1" value="" size="30" /></label></div>
</form>
<form id="form2" action="#" method="post">
<div><label for="txt4">Form3 Field #3 : <input type="text" id="txt4" name="txt4" value="" size="30" /></label></div>
<div style="width : 35%; background-color : #eee; color : #405060; padding : 1em; border : 1px solid #ccc; margin : .500em 0 .500em 0;">
<div><label for="txt2">Get Field #1 : <input type="text" id="txt2" name="txt2" value="" size="30" /></label></div>
 
<div><label for="txt3">Get Field #2 : <input type="text" id="txt3" name="txt3" value="" size="30" /></label></div>
<div style="margin-top: .500em;"><h3>Values from:</h3>
<ol><li><b>form1»field#1</b></li> 
<li><b>form2»field#2</b></li></ol> will be passed onto the fields above.</div>
</div>
<div><input type="submit" value="- submit form -" /></div>
</form>
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-Target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style type="text/css">
/* <![CDATA[ */
.hide { display : none; }
.show { display : block; }
/* ]]> */
</style>
<script type="text/javascript" src="./form.js"></script>
<script type="text/javascript">
// <![CDATA[
var fLen;
var validate = function() {
fLen = 3; // Where 3 is the number of forms in the page.
   $((( fLen ) - 1 )).onsubmit = function() { // Initiating onsubmit handler with form3. 
      for ( var i = 0; i < 3; i++ ) { 
/* Looping thru the entire form field( 1-3 ), to check whether if the user provided sufficient data on this fields. */
         if ( $( i, 0 ).value ) { // Simulating the user input into form3>>field#2>>field#3
         $( 2, i ).value = $((( i ) - 1 ), 0 ).value;
         continue
         }
      } if ( !$( 2, 0 ).value || !$( 2, 1 ).value || !$( 2, 2 ).value ) { // If any of the fields inside form3 is left empty, then exit function. Otherwise return true;
      return false;
      } alert( "All fields has been verified.", "Thank you!" );
   }; 
}; window.onload = validate;
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form0" action="#" method="post" onsubmit="return false;">
<div><label for="txt0">Form1 Field #1 : <input type="text" id="txt0" name="txt0" value="" size="30" /></label></div>
</form>
<form id="form1" action="#" method="post" onsubmit="return false;">
<div><label for="txt1">Form2 Field #2 : <input type="text" id="txt1" name="txt1" value="" size="30" /></label></div>
</form>
<form id="form2" action="#" method="post">
<div><label for="txt4">Form3 Field #3 : <input type="text" id="txt4" name="txt4" value="" size="30" /></label></div>
<div style="width : 35%; background-color : #eee; color : #405060; padding : 1em; border : 1px solid #ccc; margin : .500em 0 .500em 0;">
<div><label for="txt2">Get Field #1 : <input type="text" id="txt2" name="txt2" value="" size="30" /></label></div>

<div><label for="txt3">Get Field #2 : <input type="text" id="txt3" name="txt3" value="" size="30" /></label></div>
<div style="margin-top: .500em;"><h3>Values from:</h3>
<ol><li><b>form1»field#1</b></li> 
<li><b>form2»field#2</b></li></ol> will be passed onto the fields above.</div>
</div>
<div><input type="submit" value="- submit form -" /></div>
</form>
</div>
</body>
</html>

And here's the form.js , that offers easy access, to forms including its elements, using a few syntax of : $(FormId/RefNumber, ElementId/RefNumber).properties ( REUSABLE FUNCTION ).

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
/*******************************
 - Simplified Form Access Script v7.9
********************************
- This notice must remain intact for use :
********************************
~ Developed By DaniWeb USER : essential
 
~ http://www.daniweb.com/forums/member383844.html
*******************************/
var $form;
var $element;
var modern = Boolean( document.getElementById );
var ie = Boolean( document.all && !modern );
var node = Boolean( document.getElementsByTagName );
var $ = function( FORMID, FORMELEMENT ) {
   if ( typeof FORMID !== "undefined" ) { 
   var classes = typeof( FORMID ); 
      try {
         switch( classes ) {
         case "object" : 
            try {
            $form = FORMID;
            $element = eval( "$form." + FORMELEMENT );
            } catch( e0 ) {
            $form = document.forms[ FORMID.id ];
            $element = $form.elements[ FORMELEMENT ];
            } break;
            case "string" :
            if ( document.forms ) { 
            $form =  document.forms[ FORMID ];
            $element = $form.elements[ FORMELEMENT ];
            } else {
            $form = (( modern ) ? document.getElementById( FORMID ) : (( ie ) ? document.all[ FORMID ] : (( document.layers ) ? document.layers[ FORMID ] : undefined )));
            $element = $form.children[ FORMELEMENT ];
            } break;
         case "number" :
         $form = (( node ) ? document.getElementsByTagName("form")[ FORMID ] : (( ie ) ? document.all.tags("form").item( FORMID ) : undefined ));
            $element = (( node ) ? $form.getElementsByTagName("input")[ FORMELEMENT ] : (( ie ) ? $form.all.tags("input").item( FORMELEMENT ) : undefined ));
            break;
         default : $form = undefined;
         break; 
         }
      } catch( error ) {
      $form = undefined;
      } if ( typeof FORMELEMENT === "undefined" ) {
        return $form;
      } return $element;
   }
};
/*******************************
 - Simplified Form Access Script v7.9
********************************
- This notice must remain intact for use :
********************************
~ Developed By DaniWeb USER : essential

~ http://www.daniweb.com/forums/member383844.html
*******************************/
var $form;
var $element;
var modern = Boolean( document.getElementById );
var ie = Boolean( document.all && !modern );
var node = Boolean( document.getElementsByTagName );
var $ = function( FORMID, FORMELEMENT ) {
   if ( typeof FORMID !== "undefined" ) { 
   var classes = typeof( FORMID ); 
      try {
         switch( classes ) {
         case "object" : 
            try {
            $form = FORMID;
            $element = eval( "$form." + FORMELEMENT );
            } catch( e0 ) {
            $form = document.forms[ FORMID.id ];
            $element = $form.elements[ FORMELEMENT ];
            } break;
            case "string" :
            if ( document.forms ) { 
            $form =  document.forms[ FORMID ];
            $element = $form.elements[ FORMELEMENT ];
            } else {
            $form = (( modern ) ? document.getElementById( FORMID ) : (( ie ) ? document.all[ FORMID ] : (( document.layers ) ? document.layers[ FORMID ] : undefined )));
            $element = $form.children[ FORMELEMENT ];
            } break;
         case "number" :
         $form = (( node ) ? document.getElementsByTagName("form")[ FORMID ] : (( ie ) ? document.all.tags("form").item( FORMID ) : undefined ));
            $element = (( node ) ? $form.getElementsByTagName("input")[ FORMELEMENT ] : (( ie ) ? $form.all.tags("input").item( FORMELEMENT ) : undefined ));
            break;
         default : $form = undefined;
         break; 
         }
      } catch( error ) {
      $form = undefined;
      } if ( typeof FORMELEMENT === "undefined" ) {
        return $form;
      } return $element;
   }
};