submitting one form to another and loading text box
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
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 !
craigs,
You've confused me. So why can't we use frames?
Trevor.
You've confused me. So why can't we use frames?
Trevor.
ASKER
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.
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.
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.
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.
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.
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.
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.
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.wri
for (i = 0; i < obj.elements.length; i++) {
parent.hidden.document.wri
}
parent.hidden.document.wri
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.hid
for (i = 0; i < hiddenForm.elements.length
if (hiddenForm.elements[i].na
obj.elements[i].value = hiddenForm.elements[i].val
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="readForm(document.
<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.
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.wri
for (i = 0; i < obj.elements.length; i++) {
parent.hidden.document.wri
}
parent.hidden.document.wri
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.hid
for (i = 0; i < hiddenForm.elements.length
if (hiddenForm.elements[i].na
obj.elements[i].value = hiddenForm.elements[i].val
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="readForm(document.
<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.
ASKER
I get unterminated string constant and NS4 points to NAME on first.html
ASKER
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.
ASKER
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?
ASKER
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
TIA
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.
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.
ASKER
Not a problem Trevor, good luck.
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.wri
for (i = 0; i < fieldNames.length; i++) {
parent.hidden.document.wri
}
parent.hidden.document.wri
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.hid
for (i = 0; i < hiddenForm.elements.length
if (hiddenForm.elements[i].na
obj.elements[i].value = hiddenForm.elements[i].val
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="readForm(document.
<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.
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.wri
for (i = 0; i < fieldNames.length; i++) {
parent.hidden.document.wri
}
parent.hidden.document.wri
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.hid
for (i = 0; i < hiddenForm.elements.length
if (hiddenForm.elements[i].na
obj.elements[i].value = hiddenForm.elements[i].val
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="readForm(document.
<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.
ASKER
Thanks Trevor I will give it a go and see how it works.
ASKER
TIA