Solved

submitting one form to another and loading text box

Posted on 1998-09-23
18
227 Views
Last Modified: 2008-03-06
On one form I have several boxex that a user will fill out then press subscribe.  I then want the data from that form to be submitted to another and Preload the proper textboxes with the data from the other form. The action on the first form is set to GET and in the seconds form body tag I will run the script to load the boxes.
0
Comment
Question by:craigs052998
  • 9
  • 9
18 Comments
 
LVL 5

Accepted Solution

by:
Trevor013097 earned 90 total points
Comment Utility
craigs,

What I would suggest is (assuming you mean to do this without CGI interaction which is a valid option) create a FRAMESET with 2 frames one of which is hidden (i.e. width or height of zero).  Then your first form where the user enters there details loads in the other frame and when the user clicks subscribe it calls a function which writes all these field values to a form in the hidden frame.

Then the function loads the second form in the second frame and then onLoad the function reads all the values from the form in the hidden frame and fills in your fields of your second form.

That's the way to go.  If you want I can write you a working demo of this.

Trevor.


0
 

Author Comment

by:craigs052998
Comment Utility
You are right no cgi but I can not use frames either so I was going to use hidden boxes on document 1 then as document 2 was loaded the body tag would run the script to display the users data preloaded in the form.

TIA
0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

No FRAMES, thats a shame. Any particular reason?

What I think we will have to do then is pass all the field parameters as part of the URL.  So the form will get filled out and then the Javascript function will read all the fields and append them to the URL of the second form like this:

http://www.yourdomain.com/secondform.html?field1=data1&field2=data2&field3=data37...........etc.

Then the second form will have a function which will read in the URL string and split on all the fields to give you back your value/name pairs.

Trevor.


0
 

Author Comment

by:craigs052998
Comment Utility
With the frame one the user needs to see the data on the second form.  Like on an order confirmation.  ie: Is the data displayed correct if so press order if not change what needs to be changed then press order.  On the second form not all the things entered need to be displayed again, mostly just shipping to and billing to being same or different type of thing.  And if the site has several forms with data I need to be able to access data from form to form throuout the site.  Cookies are a last resort !
0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

You've confused me.  So why can't we use frames?

Trevor.


0
 

Author Comment

by:craigs052998
Comment Utility
I am game for frames.  I do not use frames much so I was a little hesatant at first.  But will the frame way allow info to go from one form to another?  That is where I get lost, I can not picture what you are refering to.
0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

FRAMES are a brilliant way of transferring data between pages.  Picture this as your frameset (sorry my ASCII art isn't great!):


------------------
|                 |
|                 |
|    Frame 1      |
|                 |
------------------
|    Hidden Frame |
------------------

In Frame 1 we load the first form.  When the user clicks the button a Javascript fuction read sall the forms data and writes it into the hidden frame.  Then once that is done we load the second form into Frame 1 still having our hidden frame with our data in it.  Then when the second form finishes loading it gets all of the data from the hidden form and writes it into the second form.

I'll work a demo for you later this morning.  I'll just get through my morning post first!!

Trevor.


0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
Sorry Picture didn't come out very well, this might look better!:

 
Comment
From: Trevor Date: Thursday, September 24 1998 - 01:40AM PDT  
 
craigs,

FRAMES are a brilliant way of transferring data between pages.  Picture this as your frameset (sorry my ASCII art isn't great!):


-----------------------
|                          |
|                          |
|    Frame 1      |
|                          |
-----------------------
|    Hidden Frame |
-----------------------

Trevor.


 
 
 

0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

Something bizarre happened there.  Part of my previous comment has been repeated within my next comment.  I bet later on it will be okay and you'll see nothing!!

Trevor.

0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

I have got a working demo for you.  It shouldn't require you to ever change anything in the code as it doesn't make absolute references to fields but instead loops through them all and either reads or writes depending upon the stage of the process.

You will need to create 3 files as outlined below:

your main setup page called whatever you like (I called it setup.html):

<HTML>
<HEAD>
<TITLE>Our Setup Page</TITLE>
</HEAD>
<FRAMESET ROWS="80%,20%">
   <FRAME SRC="first.html" NAME="main">
   <FRAME SRC="javascript:null" NAME="hidden" NORESIZE>
</FRAMESET>
</HTML>



Your first form page called first.html:

<HTML>
<HEAD>
<TITLE>The First Form</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!--

  //===========================================
  // This function reads the real forms values
  // and writes it to the hidden frames form
  // This will work for any number of fields as
  // it just loops through them and picks out
  // their type, name and value
  //===========================================

  function setForm(obj) {
    parent.hidden.document.write("<FORM NAME='hiddenForm'>");
    for (i = 0; i < obj.elements.length; i++) {
            parent.hidden.document.write("<INPUT TYPE='" + obj.elements[i].type + "' NAME='" + obj.elements[i].name + "' VALUE='" + obj.elements[i].value + "'>");
    }
    parent.hidden.document.write("</FORM>");
    parent.main.location.href = "second.html";
  }


//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM NAME="myForm">

<B>Your Name:</B> <INPUT TYPE="text" NAME="yourName" SIZE=40><BR>
<B>Your Age:</B> <INPUT TYPE="text" NAME="yourAge" SIZE=40><BR>
<B>Your E-Mail:</B> <INPUT TYPE="text" NAME="yourEmail" SIZE=40><BR>
<INPUT TYPE="button" NAME="submitButton" VALUE="Send Form" onClick="setForm(this.form);">


</FORM>

</BODY>
</HTML>


your second form page called second.html:

<HTML>
<HEAD>
<TITLE>The second Form</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!--

  //===========================================
  // This function reads the values from our
  // hidden form and then if any of the fields
  // match those in our second form it fills them
  // in otherwise it does nothing.
  //===========================================

  function readForm(obj) {
    hiddenForm = parent.hidden.document.hiddenForm;
    for (i = 0; i < hiddenForm.elements.length; i++) {
            if (hiddenForm.elements[i].name == obj.elements[i].name) {
                obj.elements[i].value = hiddenForm.elements[i].value;
            }
    }
  }


//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onLoad="readForm(document.mySecondForm);">

<FORM NAME="mySecondForm">

(These values have been read in from the frame below:<BR>
<BR>
<B>Your Name:</B> <INPUT TYPE="text" NAME="yourName" SIZE=40><BR>
<B>Your Age:</B> <INPUT TYPE="text" NAME="yourAge" SIZE=40><BR>
<B>Your E-Mail:</B> <INPUT TYPE="text" NAME="yourEmail" SIZE=40><BR>
<INPUT TYPE="button" NAME="submitButton" VALUE="Send Form">


</FORM>

</BODY>
</HTML>

Now I have made the FRAME not hidden so that you can see what is going on.  Of course when you come to use it you can just change the FRAMESET to give the hidden FRAME a height of ero like this:

<FRAMESET ROWS="*,0">

If you need any help then please ask.

Trevor.


0
 

Author Comment

by:craigs052998
Comment Utility
I get unterminated string constant and NS4 points to NAME on first.html
0
 

Author Comment

by:craigs052998
Comment Utility
I figured out my other problem.  It works great as you show it.  how could I make second.html be done dynamically in relation to first.html?  ie If I have 6 items on first as of now then second must match.  Is there a way that second can be written without reguards to how many is on first.html?  So if I have 6 on first.html now and add 4 later I do not also have to add them to second.html.  And in the same relation could I have the 6 things from first.html added to the 4 that are on second already?  So if first.html was personal information and second.html was shipping information the name and customer info was sent to second.html  now they just need to add company and shipping info and submit.
0
 

Author Comment

by:craigs052998
Comment Utility
Along with the questions above Trevor I also noticed that if the order on the page is off they will not copy either.  Is there a way around that also?
0
 

Author Comment

by:craigs052998
Comment Utility
Along with the questions above Trevor I also noticed that if the order on the page is off they  will not copy either.  Is there a way around that also?  This is a repeat from above.  I do not know if TREVOR has been around or not to answer.

TIA
0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

I'm really sorry I haven't been back this last week or so.  Work has all but given me the boot and so I have been meeting with various people this week and the bank to try and sort out going it alone.  Think I have got things going in the right direction now.

If you wouldn't mind I'll have a look this later this afternoon.  Once again sorry for not having responded.

Trevor.

0
 

Author Comment

by:craigs052998
Comment Utility
Not a problem Trevor, good luck.
0
 
LVL 5

Expert Comment

by:Trevor013097
Comment Utility
craigs,

I have now modified the first.html so that it reads and stores only the fields which you have told it to.  You have to fill in an array of the field names you wish to store.  Second.html already allows the adding of extra fields as it only fills in those which match one of the stored fields.


Here are the new files for first.html and second.html.

<!-- first.html //-->

<HTML>
<HEAD>
<TITLE>The First Form</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!--

  //===========================================
  // This function reads the real forms values
  // and writes it to the hidden frames form
  // This will work for any number of fields as
  // it just loops through them and picks out
  // their type, name and value.
  // It can select just your chosen fields by
  // reading fromt he array which contains the
  // field names for all fields you wish to read.
  //===========================================

  var fieldNames = new Array();
      fieldNames[0] = "yourName";
      fieldNames[1] = "yourAge";
      fieldNames[2] = "yourEmail";

  function setForm(obj) {
    parent.hidden.document.write("<FORM NAME='hiddenForm'>");
    for (i = 0; i < fieldNames.length; i++) {
            parent.hidden.document.write("<INPUT TYPE='" + eval("obj." + fieldNames[i] + ".type") + "' NAME='" + fieldNames[i] + "' VALUE='" + eval("obj." + fieldNames[i] + ".value") + "'>");
    }
    parent.hidden.document.write("</FORM>");
    parent.main.location.href = "second.html";
  }


//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM NAME="myForm">

<B>Your Name:</B> <INPUT TYPE="text" NAME="yourName" SIZE=40><BR>
<B>Your Age:</B> <INPUT TYPE="text" NAME="yourAge" SIZE=40><BR>
<B>Your E-Mail:</B> <INPUT TYPE="text" NAME="yourEmail" SIZE=40><BR>
<INPUT TYPE="button" NAME="submitButton" VALUE="Send Form" onClick="setForm(this.form);">


</FORM>

</BODY>
</HTML>


<!-- second.html //-->

<HTML>
<HEAD>
<TITLE>The second Form</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!--

  //===========================================
  // This function reads the values from our
  // hidden form and then if any of the fields
  // match those in our second form it fills them
  // in otherwise it does nothing.
  //===========================================

  function readForm(obj) {
    hiddenForm = parent.hidden.document.hiddenForm;
    for (i = 0; i < hiddenForm.elements.length; i++) {
            if (hiddenForm.elements[i].name == obj.elements[i].name) {
                obj.elements[i].value = hiddenForm.elements[i].value;
            }
    }
  }


//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" onLoad="readForm(document.mySecondForm);">

<FORM NAME="mySecondForm">

(These values have been read in from the frame below:<BR>
<BR>
<B>Your Name:</B> <INPUT TYPE="text" NAME="yourName" SIZE=40><BR>
<B>Your Age:</B> <INPUT TYPE="text" NAME="yourAge" SIZE=40><BR>
<B>Your E-Mail:</B> <INPUT TYPE="text" NAME="yourEmail" SIZE=40><BR>
<B>Your Company:</B> <INPUT TYPE="text" NAME="yourCompany" SIZE=40><BR>
<B>Shipping Country:</B> <INPUT TYPE="text" NAME="ShippingCountry" SIZE=40><BR>
<INPUT TYPE="button" NAME="submitButton" VALUE="Send Form">


</FORM>

</BODY>
</HTML>

Regards

Trevor.


0
 

Author Comment

by:craigs052998
Comment Utility
Thanks Trevor I will give it a go and see how it works.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now