validation of Multiple forms in single page

Question

goldy736 0 Newbie Poster

15 Years Ago

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 :

<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 !

javascript

4 Contributors
5 Replies
2K Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by essential

sysel 0 Light Poster

15 Years Ago

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.

sysel 0 Light Poster

15 Years Ago

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 :-)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

goldy736 0 Newbie Poster · Answer 1 · 2009-07-10T10:11:02+00:00

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 !

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2009-07-11T07:02:17+00:00

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:

<!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

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-07-11T11:48:22+00:00

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 :

<?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 ).

/*******************************
 - 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;
   }
};

Hope we're all getting your needs...

essential