PDA

View Full Version : Need help with a javascript in a form

page1
09-16-2002, 09:31 AM
Hello All!
I am very new to this forum and new to javascript, but I need your help.

Heres what I want to do: I want to use javascript to copy the contents my users type into one form and have them copy to a number of other forms.

Example: User adds address and email in first form they then click submit and that data fills in the other forms. They have top be individual forms because I then want them to submit each form individually.

Any help would be appreciated as Im totally fizzed out on this one.
umm
09-16-2002, 02:25 PM
G'day,

Try this out and see if it's what you're after. This works if all the forms are on the same page. A different approach will be required if the information gets sent to different pages. Also, the valiation is only basic. Lastly, take the space out of "java script" in the form alerts.

<html>
<head>
<title>Forms</title>
<script language="javascript" type="text/javascript">
<!--
function populateForms(){
var i, j, txtElm, frmElm=document.forms;
for(i=0;i<frmElm.length;i++){
txtElm=frmElm[i].elements;
for(j=0;j<txtElm.length;++j){
if(txtElm[j].type=="text" && frmElm[0][j].value==""){
alert("Please fill out the required fields: "+frmElm[0][j].name);
frmElm[0][j].focus();
return false;
} else {
txtElm[j].value=frmElm[0][j].value;
}
}
}
return true
}
//-->
</script>

</head>

<body>
<h2>Primary Form</h2>
<strong>Please Enter your Email and Street Address</strong>
<form name="f1" action="javascript:alert('Success')" method="post" onsubmit="return populateForms()">
<input type="text" name="Email_Address">Email_Address<br>
<input type="text" name="Street_Address">Street_Address<br>
<input type="submit" value="Send">
</form>

<hr />
<h2>Secondary Forms</h2>
<form name="f2" action="javascript:alert(document.f2.email_2.value)" method="post">
<input type="text" name="email_2">Email<br>
<input type="text" name="address_2">Address<br>
<input type="submit" value="Send">
</form>


<form name="f3" action="javascript:alert(document.f2.email_3.value)" method="post">
<input type="text" name="email_3">Email<br>
<input type="text" name="address_3">Address<br>
<input type="submit" value="Send">
</form>

<hr />
</body>
</html>
page1
09-16-2002, 02:59 PM
Hello Umm
Thankyou very much for your help it works exactly like I want it to.
But i noticed that f2 form and f3 form have:"action="javascript:alert(document.f2.email_2.value)" I need the action of each of these secondry forms to be something like action="http://www.mydomain.com/cgi-bin/formamil.pl" so that I can send those details to an email address using cgi or pl.

Is this possible using your script. I really appreciate your help.
umm
09-16-2002, 10:46 PM
No probs Steve. You should be able to replace my action="" statements with your own. I'm not sure if the populated forms (i.. f1,f2,f3) will maintain state after submission (i.e. retain their information). Give it a go and see what happens.

One thing you should be aware of with this script: it depends very much on the order of the textboxes each form. For example, in f1, the order of the textboxes is email_address and then street_addess. This is the same in f2 and f3 (even though the latter have different names)

If you put a textbox called "Suburb" in f3 (in between the email_3 and address_3), the values from street_address in f1 would fill "Suburb". The textbox order needs to be the same in each form. If you post the HTML code for the forms you are using, I (or someone else) can give you a more complete solution.

;)
adios
09-16-2002, 11:47 PM
There are a number of issues here with multiple forms on the same page, submission methods, server-side return...anyway, see if this helps:


<html>
<head>
<script type="text/javascript" language="javascript">

function populateAll(field) {
var which = field.name;
var form, el, e, f = 0;
while (form = document.forms[f++]) {
e = 0;
while (el = form.elements[e++]) if (el.name == which) el.value = field.value;
}
}

</script>
</head>
<body>
<h4>FORM 1</h4>
<form name="f1" target="dummyIF">
<input name="address" type="text" onchange="populateAll(this)"> address 1<br>
<input name="email" type="text" onchange="populateAll(this)"> email 1<br>
<input type="submit" value="DONE">
</form>
<h4>FORM 2</h4>
<form name="f2" target="dummyIF">
<input name="address" type="text" onchange="populateAll(this)"> address 2<br>
<input name="email" type="text" onchange="populateAll(this)"> email 2<br>
<input type="submit" value="DONE">
</form>
<h4>FORM 3</h4>
<form name="f3" target="dummyIF">
<input name="address" type="text" onchange="populateAll(this)"> address 3<br>
<input name="email" type="text" onchange="populateAll(this)"> email 3<br>
<input type="submit" value="DONE">
</form>
<h4>FORM 4</h4>
<form name="f4" target="dummyIF">
<input name="address" type="text" onchange="populateAll(this)"> address 4<br>
<input name="email" type="text" onchange="populateAll(this)"> email 4<br>
<input type="submit" value="DONE">
</form>
<iframe name="dummyIF" width="0" height="0" style="display:none;"></iframe>
</body>
</html>


The dummy <iframe> allows submits without page reload (or having to use a frameset).
umm
09-17-2002, 08:35 AM
there you go, a good solution from adios