question from complete newbie (know nothing)

krappleby · Jul 26, 2006

Hi all,

sorry to bother you guys, i have a form which my clients can filli in. the form is in two parts, a sign up and billing section all on the same page..

Now when the customer fills in the top form (the sign up form) we have a small checkbox, which states that if teh billing detilas are the same as the above to click the box,

When this box is clicked the data should automatically fill in the boxes below..

for example in the top form we have,

first name, lastname, address, town, postcode

in the bottom form we have

name, address, postcode.

When the check box is changed (onchange) we need the details transfering to the new fields in the bottom section..

any help would be appreciated as i have no idea, i am a php programmer not a javascript programmer

cheers

booboo0912 · Jul 26, 2006

//your onChange function will grab the values of the fields in the top form:

function populateMe() {
fname = document.form1.firstname.value
lname = document.form1.lastname.value
fullname = fname + " " + lname
address1 = document.form1.address1.value
etc...

//Then set the fields in the bottom form equal to the new variables:

document.form2.name.value = fullname
document.form2.address2.value = address1
etc...
}

there's probably a more efficient way of doing it, but this should do the trick...

krappleby · Jul 26, 2006

thanks for your help, but what should i put in the onchange function

booboo0912 · Jul 26, 2006

put the onChange event in your input tag to call the function:

<input type="checkbox" name="test" value="1" onchange="populateMe()">

HTH

krappleby · Jul 26, 2006

Thanks for your help however this is not working..

Javascript

<script type="text/javascript">
function populateMe()
{
fname = document.form1.firstname.value;
lname = document.form1.lastname.value;
fullnamebill = fname + " " + lname;
address1bill = document.form1.address1.value;
address2bill = document.form1.address2.value;
address3bill = document.form1.address3.value;
addressbill = address1bill + "/n" + address2bill + "/n" + address3bill;
zipcodebill = document.form1.zipcode.value;
emailbill = document.form1.email.value;
document.form1.fullnameres.value = fullnamebill;
document.form1.addressres.value = addressbill;
document.form1.zipcoderes.value = zipcodebill ;
document.form1.emailres.value = emailbill ;
}
</script>

the code for the checkbox

<td height="20" bgcolor="" class="agrey" colspan="2"><font color="#FFFFFF">Click here if the above details are the same as the billing details <input type=checkbox name=detsame onChange="populateMe();"></font></span></td>

The resulting form that should recieve the results on the change of the checkbox.

<tr>
<td>Name:</td>
<td width="371"><input type="text" name="fullnameres"></td>
</tr>
<tr>
<td>Address:</td>
<td width="371"><textarea name="addressres" rows="5" cols="30"></textarea></td>
</tr>
<tr>
<td>Postcode:</td>
<td width="371"><input type="text" name="zipcoderes"></td>
</tr>
<tr>
<td>Email:</td>
<td width="371"><input type="text" name="emailres"></td>
</tr>
<tr>
<td>Confirm Email:</td>
<td width="371"><input type="text" name="emailres"></td>
</tr>

I know that this is getting rediculous, but as i said i do not have a clue as to javascript..

thanks for all your help guys

booboo0912 · Jul 26, 2006

No problem...that's why we're here to help!

A couple of things:
1)you need 2 form tags, one for the top form (form1), and one for the bottom (form2)

2)when you set the values for form2, make sure you specify that form name (you had form1 instead of form2):
document.form2.fullnameres.value = fullnamebill;
document.form2.addressres.value = addressbill;
document.form2.zipcoderes.value = zipcodebill ;
document.form2.emailres.value = emailbill ;

3)change the onChange to onClick

Example:

<script type="text/javascript">
function populateMe()
{
fname = document.form1.firstname.value;

document.form2.fullnameres.value = fname;
}
</script>
</head>
<body>
<table><form name="form1">
<tr>
<td height="20" bgcolor="" class="agrey" colspan="2"><font color="#FFFFFF">Click here if the above details are the same as the billing details <input type=checkbox name=detsame onClick="populateMe();"></font></span></td>
</tr>

<tr>
<td>FName:</td>
<td><input type="text" name="firstname"></td>
</tr>
</form>

<form name="form2">
<tr>
<td>Name:</td>
<td width="371"><input type="text" name="fullnameres"></td>
</tr>
</form>

cLFlaVA · Jul 26, 2006

1) two forms are not necessary, and will surely not work as krappleby is expecting it to.

2) i'd do the call to the function like this:

Code:

<input type="checkbox" name="detsame" onclick="populateMe(this.checked);">

3) i'd make the function as follows:

Code:

function populateMe(blnDoCopy) {
    if (blnDoCopy) {
        var e = document.forms['form1'].elements;
        e['fullnameres'].value = e['firstname'].value + " " + e['lastname'].value;
        e['addressres'].value = e['address1'].value + "\n" + e['address2'].value + "\n" + e['address3'].value;
        e['zipcoderes'].value = e['zipcode'].value;
        e['emailres'].value = e['email'].value;
    }
}

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb! [bomb]

[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

question from complete newbie (know nothing)

krappleby

Programmer

booboo0912

Programmer

krappleby

Programmer

booboo0912

Programmer

krappleby

Programmer

booboo0912

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor