...

View Full Version : Javascript and Form Problem



ville
07-15-2010, 07:37 PM
Can any of you nice people out there help

I am writing a from with user details input

E.G.
House Number
Street
City
user can input the house number and the street
but the city is restricted to only the city I live in



How do I make the input address1 equal house number + a space + street + a space + city, I am a beginner wrote this to learn but have got stuck!

The code



<form action="#" onsubmit="showLocation(); return false;">
<table width=780 border=0 align=center summary="">
<tr>
<td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td>
</tr>
<tr>
<td><b>Pick Up Address</b></td>
<td>House Number</td>
<td><input type="text" name="punum" size="40" maxlength="5" /></td>
</tr>
<tr>
<td><!-- &nbsp; --></td>
<td>Street</td>
<td><input type="text" name="pustreet" size="40" maxlength="20" /></td>
</tr>
<tr>
<td><!-- &nbsp; --></td>
<td>City</td>
<td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td>
</tr>
<tr>
<td><!-- --></td>
<td>Post Code</td>
<td><input type="text" name="pupostcode" size="40" maxlength="10"></td>
</tr>
<tr>
<td><b>ADDRESS 1</b></td>
<td>Pick Up Address</td>
<td><input type="text" name="address1" value="Contents of punum and pustreet in here" /></td>
</tr>
<tr>
<td></td>
<td>Pick Up Time</td>
<td><select name="putime" size="1">
<option value="00:00"> 00:00</option>
<option value="00:15"> 00:15</option>
<option value="00:30"> 00:30</option>
<option value="00:45"> 00:45</option>
<option value="01:00"> 01:00</option>
<option value="01:15"> 01:15</option>
<option value="01:30"> 01:30</option>
<option value="01:45"> 01:45</option>
<option value="02:00"> 02:00</option>
<option value="02:15"> 02:15</option>
<option value="02:30"> 02:30</option>
<option value="02:45"> 02:45</option>
<option value="03:00"> 03:00</option>
<option value="03:15"> 03:15</option>
<option value="03:30"> 03:30</option>
<option value="03:45"> 03:45</option>
<option value="04:00"> 04:00</option>
<option value="04:15"> 04:15</option>
<option value="04:30"> 04:30</option>
<option value="04:45"> 04:45</option>
<option value="05:00"> 05:00</option>
<option value="05:15"> 05:15</option>
<option value="05:30"> 05:30</option>
<option value="05:45"> 05:45</option>
<option value="06:00"> 06:00</option>
<option value="06:15"> 06:15</option>
<option value="06:30"> 06:30</option>
<option value="06:45"> 06:45</option>
<option value="07:00"> 07:00</option>
<option value="07:15"> 07:15</option>
<option value="07:30"> 07:30</option>
<option value="07:45"> 07:45</option>
<option value="08:00"> 08:00</option>
<option value="08:15"> 08:15</option>
<option value="08:30"> 08:30</option>
<option value="08:45"> 08:45</option>
<option value="09:00"> 09:00</option>
<option value="09:15"> 09:15</option>
<option value="09:30"> 09:30</option>
<option value="09:45"> 09:45</option>
<option value="10:00"> 10:00</option>
<option value="10:15"> 10:15</option>
<option value="10:30"> 10:30</option>
<option value="10:45"> 10:45</option>
<option value="11:00"> 11:00</option>
<option value="11:15"> 11:15</option>
<option value="11:30"> 11:30</option>
<option value="11:45"> 11:45</option>
<option value="12:00"> 12:00</option>
<option value="12:15"> 12:15</option>
<option value="12:30"> 12:30</option>
<option value="12:45"> 12:45</option>
<option value="13:00"> 13:00</option>
<option value="13:15"> 13:15</option>
<option value="13:30"> 13:30</option>
<option value="13:45"> 13:45</option>
<option value="14:00"> 14:00</option>
<option value="14:15"> 14:15</option>
<option value="14:30"> 14:30</option>
<option value="14:45"> 14:45</option>
<option value="15:00"> 15:00</option>
<option value="15:15"> 15:15</option>
<option value="15:30"> 15:30</option>
<option value="15:45"> 15:45</option>
<option value="16:00"> 16:00</option>
<option value="16:15"> 16:15</option>
<option value="16:30"> 16:30</option>
<option value="16:45"> 16:45</option>
<option value="17:00"> 17:00</option>
<option value="17:15"> 17:15</option>
<option value="17:30"> 17:30</option>
<option value="17:45"> 17:45</option>
<option value="18:00"> 18:00</option>
<option value="18:15"> 18:15</option>
<option value="18:30"> 18:30</option>
<option value="18:45"> 18:45</option>
<option value="19:00"> 19:00</option>
<option value="19:15"> 19:15</option>
<option value="19:30"> 19:30</option>
<option value="19:45"> 19:45</option>
<option value="20:00"> 20:00</option>
<option value="20:15"> 20:15</option>
<option value="20:30"> 20:30</option>
<option value="20:45"> 20:45</option>
<option value="21:00"> 21:00</option>
<option value="21:15"> 21:15</option>
<option value="21:30"> 21:30</option>
<option value="21:45"> 21:45</option>
<option value="22:00"> 22:00</option>
<option value="22:15"> 22:15</option>
<option value="22:30"> 22:30</option>
<option value="22:45"> 22:45</option>
<option value="23:00"> 23:00</option>
<option value="23:15"> 23:15</option>
<option value="23:30"> 23:30</option>
<option value="23:45"> 23:45</option>
</select> <font color="#FF0000">24 Hr</font>
</td>
</tr>
<tr>
<td><b>Customer Details</b></td>
<td>First Name</td>
<td><input type="text" name="fname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Last Name</td>
<td><input type="text" name="lname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Telephone Number</td>
<td><input type="text" name="tel1" size="40" maxlength="20"></td>
</tr>
<tr>
<td><b>Destination Address</b></td>
<td>House Number</td>
<td><input type="text" name="dnum" size="40" maxlength="5"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Street</td>
<td><input type="text" name="dstreet" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>City</td>
<td><select name="dcity" size="1">
<option value="Barry"> Barry</option>
<option value="Bridgend"> Bridgend</option>
<option value="Caerphilly"> Caerphilly</option>
<option value="Cardiff"> Cardiff</option>
<option value="Newport"> Newport</option>
<option value="Pontypridd"> Pontypridd</option>
</select></td>
</tr>
<tr>
<td><!-- --></td>
<td>Post Code</td>
<td><input type="text" name="dpostcode" size="40" maxlength="10">
<br></td>
</tr>
<tr>
<td><b>ADDRESS 2</b></td>
<td>Destination</td>
<td><input type="text" name="address2" value="Birmingham Airport UK" /></td>
</tr>
<tr>
<td><!-- --></td>
<td><!-- --></td>
<td><input type="submit" value="Get Tariff" /></td>
</tr>
</table>
<!-- END OF FORM TABLE -->
</form>

Old Pedant
07-15-2010, 08:26 PM
Looks better with comma before city.


<html>
<head>
<script type="text/javascript">
function makeAddress(fld)
{
var form = fld.form;
form.address1.value = form.punum.value + " " + form.pustreet.value + ", " + form.pucity.value;
}
</script>
</head>
<body>

<form action="#" onsubmit="showLocation(); return false;">
<table width=780 border=0 align=center summary="">
<tr>
<td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td>
</tr>
<tr>
<td><b>Pick Up Address</b></td>
<td>House Number</td>
<td><input type="text" name="punum" size="40" maxlength="5" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- &nbsp; --></td>
<td>Street</td>
<td><input type="text" name="pustreet" size="40" maxlength="20" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- &nbsp; --></td>
<td>City</td>
<td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td>
</tr>
<tr>
<td><!-- --></td>
<td>Post Code</td>
<td><input type="text" name="pupostcode" size="40" maxlength="10"></td>
</tr>
<tr>
<td><b>ADDRESS 1</b></td>
<td>Pick Up Address</td>
<td><input type="text" name="address1" readonly value="" /></td>
</tr>
</table>
</form>

</body>
</html>

ville
07-16-2010, 08:18 PM
Thank you, thank you, thank you for your help, that worked a treat.

can I pass the value of
<input type="hidden" name="item_name" size="40" readonly value=""/>
to another separate from on the same page with the same input name
input name must be name ="item_name" in the second form input form
because I can't change it.

the other form is hidden inside a document.getElementById('results').innerHTML
because I don't want the results to appear until after the form has been submited.

Hope this makes sense




I now have in the header


Can any of you nice people out there help

I am writing a from with user details input

E.G.
House Number
Street
City
user can input the house number and the street
but the city is restricted to only the city I live in



How do I make the input address1 equal house number + a space + street + a space + city, I am a beginner wrote this to learn but have got stuck!

The code

[code]
<form action="#" onsubmit="showLocation(); return false;">
<table width=780 border=0 align=center summary="">
<tr>
<td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td>
</tr>
<tr>
<td><b>Pick Up Address</b></td>
<td>House Number</td>
<td><input type="text" name="punum" size="40" maxlength="5" /></td>
</tr>
<tr>
<td><!-- &nbsp; --></td>
<td>Street</td>
<td><input type="text" name="pustreet" size="40" maxlength="20" /></td>
</tr>
<tr>
<td><!-- &nbsp; --></td>
<td>City</td>
<td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td>
</tr>
<tr>
<td><!-- --></td>
<td>Post Code</td>
<td><input type="text" name="pupostcode" size="40" maxlength="10"></td>
</tr>
<tr>
<td><b>ADDRESS 1</b></td>
<td>Pick Up Address</td>
<td><input type="text" name="address1" value="Contents of punum and pustreet in here" /></td>
</tr>
<tr>
<td></td>
<td>Pick Up Time</td>
<td><select name="putime" size="1">
<option value="00:00"> 00:00</option>
<option value="00:15"> 00:15</option>
<option value="00:30"> 00:30</option>
<option value="00:45"> 00:45</option>
<option value="01:00"> 01:00</option>
<option value="01:15"> 01:15</option>
<option value="01:30"> 01:30</option>
<option value="01:45"> 01:45</option>
<option value="02:00"> 02:00</option>
<option value="02:15"> 02:15</option>
<option value="02:30"> 02:30</option>
<option value="02:45"> 02:45</option>
<option value="03:00"> 03:00</option>
<option value="03:15"> 03:15</option>
<option value="03:30"> 03:30</option>
<option value="03:45"> 03:45</option>
<option value="04:00"> 04:00</option>
<option value="04:15"> 04:15</option>
<option value="04:30"> 04:30</option>
<option value="04:45"> 04:45</option>
<option value="05:00"> 05:00</option>
<option value="05:15"> 05:15</option>
<option value="05:30"> 05:30</option>
<option value="05:45"> 05:45</option>
<option value="06:00"> 06:00</option>
<option value="06:15"> 06:15</option>
<option value="06:30"> 06:30</option>
<option value="06:45"> 06:45</option>
<option value="07:00"> 07:00</option>
<option value="07:15"> 07:15</option>
<option value="07:30"> 07:30</option>
<option value="07:45"> 07:45</option>
<option value="08:00"> 08:00</option>
<option value="08:15"> 08:15</option>
<option value="08:30"> 08:30</option>
<option value="08:45"> 08:45</option>
<option value="09:00"> 09:00</option>
<option value="09:15"> 09:15</option>
<option value="09:30"> 09:30</option>
<option value="09:45"> 09:45</option>
<option value="10:00"> 10:00</option>
<option value="10:15"> 10:15</option>
<option value="10:30"> 10:30</option>
<option value="10:45"> 10:45</option>
<option value="11:00"> 11:00</option>
<option value="11:15"> 11:15</option>
<option value="11:30"> 11:30</option>
<option value="11:45"> 11:45</option>
<option value="12:00"> 12:00</option>
<option value="12:15"> 12:15</option>
<option value="12:30"> 12:30</option>
<option value="12:45"> 12:45</option>
<option value="13:00"> 13:00</option>
<option value="13:15"> 13:15</option>
<option value="13:30"> 13:30</option>
<option value="13:45"> 13:45</option>
<option value="14:00"> 14:00</option>
<option value="14:15"> 14:15</option>
<option value="14:30"> 14:30</option>
<option value="14:45"> 14:45</option>
<option value="15:00"> 15:00</option>
<option value="15:15"> 15:15</option>
<option value="15:30"> 15:30</option>
<option value="15:45"> 15:45</option>
<option value="16:00"> 16:00</option>
<option value="16:15"> 16:15</option>
<option value="16:30"> 16:30</option>
<option value="16:45"> 16:45</option>
<option value="17:00"> 17:00</option>
<option value="17:15"> 17:15</option>
<option value="17:30"> 17:30</option>
<option value="17:45"> 17:45</option>
<option value="18:00"> 18:00</option>
<option value="18:15"> 18:15</option>
<option value="18:30"> 18:30</option>
<option value="18:45"> 18:45</option>
<option value="19:00"> 19:00</option>
<option value="19:15"> 19:15</option>
<option value="19:30"> 19:30</option>
<option value="19:45"> 19:45</option>
<option value="20:00"> 20:00</option>
<option value="20:15"> 20:15</option>
<option value="20:30"> 20:30</option>
<option value="20:45"> 20:45</option>
<option value="21:00"> 21:00</option>
<option value="21:15"> 21:15</option>
<option value="21:30"> 21:30</option>
<option value="21:45"> 21:45</option>
<option value="22:00"> 22:00</option>
<option value="22:15"> 22:15</option>
<option value="22:30"> 22:30</option>
<option value="22:45"> 22:45</option>
<option value="23:00"> 23:00</option>
<option value="23:15"> 23:15</option>
<option value="23:30"> 23:30</option>
<option value="23:45"> 23:45</option>
</select> <font color="#FF0000">24 Hr</font>
</td>
</tr>
<tr>
<td><b>Customer Details</b></td>
<td>First Name</td>
<td><input type="text" name="fname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Last Name</td>
<td><input type="text" name="lname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Telephone Number</td>
<td><input type="text" name="tel1" size="40" maxlength="20"></td>
</tr>
<tr>
<td><b>Destination Address</b></td>
<td>House Number</td>
<td><input type="text" name="dnum" size="40" maxlength="5"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Street</td>
<td><input type="text" name="dstreet" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>City</td>
<td><select name="dcity" size="1">
<option value="Barry"> Barry</option>
<option value="Bridgend"> Bridgend</option>
<option value="Caerphilly"> Caerphilly</option>
<option value="Cardiff"> Cardiff</option>
<option value="Newport"> Newport</option>
<option value="Pontypridd"> Pontypridd</option>
</select></td>
</tr>
<tr>
<td><!-- --></td>
<td>Post Code</td>
<td><input type="text" name="dpostcode" size="40" maxlength="10">
<br></td>
</tr>
<tr>
<td><b>ADDRESS 2</b></td>
<td>Destination</td>
<td><input type="text" name="address2" value="Birmingham Airport UK" /></td>
</tr>
<tr>
<td><!-- --></td>
<td><!-- --></td>
<td><input type="submit" value="Get Tariff" /></td>
</tr>
</table>
<!-- END OF FORM TABLE -->
</form>
[/QUOTE]

Old Pedant
07-16-2010, 08:58 PM
Yes, easy.

You need the name or id of the other form.



document.NameOfOtherForm.item_name.value = form.item_name.value;
or
document.getElementById("idOfOtherForm").item_name.value = form.item_name.value;

Or, if you aren't doing this as part of the same code, you can address both forms explicitly:

document.NameOfForm2.item_name.value = document.NameOfForm1.item_name.value;
or
document.getElementById("idOfForm2").item_name.value = document.getElementById("idOfForm1").item_name.value;

Or mix and match.

Jodarecode
07-16-2010, 09:36 PM
I posted this on another forum for a similar question.
hope this helps

test1.php

<?php

$img1 = "image1.jpg";
$img2 = "image2.jpg";
$img3 = "image3.jpg";

$i = 1;

?>

<html>
<body>

<form action="test2.php" method="post" name="myform<?=$i++?>">
<input type="hidden" value="<?=$img1?>" name="img" id="img">
<a href="#" onclick="document.forms['myform1'].submit()"><img src="<?=$img1?>"></a>
</form>

<form action="test2.php" method="post" name="myform<?=$i++?>">
<input type="hidden" value="<?=$img2?>" name="img" id="img">
<a href="#" onclick="document.forms['myform2'].submit()"><img src="<?=$img2?>"></a>
</form>

<form action="test2.php" method="post" name="myform<?=$i++?>">
<input type="hidden" value="<?=$img3?>" name="img" id="img">
<a href="#" onclick="document.forms['myform3'].submit()"><img src="<?=$img3?>"></a>
</form>

</body>

</html>

test2.php

<?php

$img = $_POST['img'];

?>

<html>
<body>
<center>
<img src="<?=$img?>">
</center>
</body>
</html>

ville
07-16-2010, 11:17 PM
Sorry can't follow



document.NameOfOtherForm.item_name.value = form.item_name.value;
or
document.getElementById("idOfOtherForm").item_name.value = form.item_name.value;

Or, if you aren't doing this as part of the same code, you can address both forms explicitly:

document.NameOfForm2.item_name.value = document.NameOfForm1.item_name.value;
or
document.getElementById("idOfForm2").item_name.value = document.getElementById("idOfForm1").item_name.value;


Not sure how to incorporate in to my exiting code.


In the header I have



<script type="text/javascript">
function makeAddress(fld)
{
var form = fld.form;
form.address1.value = form.punum.value + " " + form.pustreet.value + ", " + form.pucity.value + ", " + form.pupostcode.value;
form.address2.value = form.dnum.value + " " + form.dstreet.value + ", " + form.dcity.value + ", " + form.dpostcode.value;

form.item_name.value = "PICKUP ADDRESS - " + " " + form.punum.value + " " + form.pustreet.value + ", " + form.pucity.value + ", " + form.pupostcode.value + "PICKUP TIME @ " + " " + form.putime.value + " " + "DESTINATION ADDRESS - " + form.dnum.value + " " + form.dstreet.value + ", " + form.dcity.value + ", " + form.dpostcode.value;


}
</script>


In form 1 I have



<form action="#" onsubmit="showLocation(); return false;">
<table width=780 border=0 align=center summary="">
<tr>
<td colspan=3><font size="+1"><b><div style="text-align: center">Live Booking / Pay via PayPal online or Telephone on TEL NUMBER HERE</div></b></font></td>
</tr>
<tr>
<td bgcolor=#FF0000><b>Pick Up Address</b></td>
<td>House Number</td>
<td><input type="text" name="punum" size="40" maxlength="5" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- STREET BLANK --></td>
<td>Street</td>
<td><input type="text" name="pustreet" size="40" maxlength="20" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- CITY BLANK --></td>
<td>City</td>
<td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td>
</tr>
<tr>
<td><!-- POST CODE BLANK --></td>
<td><!-- Post Code --></td>
<td><input type="hidden" name="pupostcode" size="40" maxlength="10" onchange="makeAddress(this);"></td>
</tr>
<tr>
<td><b><!-- ADDRESS 1 CODE-BLANK --></b></td>
<td><!-- Pick Up Address-BLANK --></td>
<td><input type="hidden" name="address1" size="40" readonly value="" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Pick Up Time</td>
<td><select name="putime" size="1" onchange="makeAddress(this);">
<option value="00:00"> 00:00</option>
<option value="00:15"> 00:15</option>
<option value="00:30"> 00:30</option>
<option value="00:45"> 00:45</option>
<option value="01:00"> 01:00</option>
<option value="01:15"> 01:15</option>
<option value="01:30"> 01:30</option>
<option value="01:45"> 01:45</option>
<option value="02:00"> 02:00</option>
<option value="02:15"> 02:15</option>
<option value="02:30"> 02:30</option>
<option value="02:45"> 02:45</option>
<option value="03:00"> 03:00</option>
<option value="03:15"> 03:15</option>
<option value="03:30"> 03:30</option>
<option value="03:45"> 03:45</option>
<option value="04:00"> 04:00</option>
<option value="04:15"> 04:15</option>
<option value="04:30"> 04:30</option>
<option value="04:45"> 04:45</option>
<option value="05:00"> 05:00</option>
<option value="05:15"> 05:15</option>
<option value="05:30"> 05:30</option>
<option value="05:45"> 05:45</option>
<option value="06:00"> 06:00</option>
<option value="06:15"> 06:15</option>
<option value="06:30"> 06:30</option>
<option value="06:45"> 06:45</option>
<option value="07:00"> 07:00</option>
<option value="07:15"> 07:15</option>
<option value="07:30"> 07:30</option>
<option value="07:45"> 07:45</option>
<option value="08:00"> 08:00</option>
<option value="08:15"> 08:15</option>
<option value="08:30"> 08:30</option>
<option value="08:45"> 08:45</option>
<option value="09:00"> 09:00</option>
<option value="09:15"> 09:15</option>
<option value="09:30"> 09:30</option>
<option value="09:45"> 09:45</option>
<option value="10:00"> 10:00</option>
<option value="10:15"> 10:15</option>
<option value="10:30"> 10:30</option>
<option value="10:45"> 10:45</option>
<option value="11:00"> 11:00</option>
<option value="11:15"> 11:15</option>
<option value="11:30"> 11:30</option>
<option value="11:45"> 11:45</option>
<option value="12:00"> 12:00</option>
<option value="12:15"> 12:15</option>
<option value="12:30"> 12:30</option>
<option value="12:45"> 12:45</option>
<option value="13:00"> 13:00</option>
<option value="13:15"> 13:15</option>
<option value="13:30"> 13:30</option>
<option value="13:45"> 13:45</option>
<option value="14:00"> 14:00</option>
<option value="14:15"> 14:15</option>
<option value="14:30"> 14:30</option>
<option value="14:45"> 14:45</option>
<option value="15:00"> 15:00</option>
<option value="15:15"> 15:15</option>
<option value="15:30"> 15:30</option>
<option value="15:45"> 15:45</option>
<option value="16:00"> 16:00</option>
<option value="16:15"> 16:15</option>
<option value="16:30"> 16:30</option>
<option value="16:45"> 16:45</option>
<option value="17:00"> 17:00</option>
<option value="17:15"> 17:15</option>
<option value="17:30"> 17:30</option>
<option value="17:45"> 17:45</option>
<option value="18:00"> 18:00</option>
<option value="18:15"> 18:15</option>
<option value="18:30"> 18:30</option>
<option value="18:45"> 18:45</option>
<option value="19:00"> 19:00</option>
<option value="19:15"> 19:15</option>
<option value="19:30"> 19:30</option>
<option value="19:45"> 19:45</option>
<option value="20:00"> 20:00</option>
<option value="20:15"> 20:15</option>
<option value="20:30"> 20:30</option>
<option value="20:45"> 20:45</option>
<option value="21:00"> 21:00</option>
<option value="21:15"> 21:15</option>
<option value="21:30"> 21:30</option>
<option value="21:45"> 21:45</option>
<option value="22:00"> 22:00</option>
<option value="22:15"> 22:15</option>
<option value="22:30"> 22:30</option>
<option value="22:45"> 22:45</option>
<option value="23:00"> 23:00</option>
<option value="23:15"> 23:15</option>
<option value="23:30"> 23:30</option>
<option value="23:45"> 23:45</option>
</select> <font color="#FF0000">24 Hr</font></td>
</tr>
<tr>
<td bgcolor=#FF0000><b>Customer Details</b></td>
<td>First Name</td>
<td><input type="text" name="fname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Last Name</td>
<td><input type="text" name="lname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Telephone Number</td>
<td><input type="text" name="tel1" size="40" maxlength="20"></td>
</tr>
<tr>
<td bgcolor=#FF0000><b>Destination Address</b></td>
<td>House Number</td>
<td><input type="text" name="dnum" size="40" maxlength="5" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- --></td>
<td>Street</td>
<td><input type="text" name="dstreet" size="40" maxlength="20" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- --></td>
<td>City</td>
<td>
<select name="dcity" size="1" onchange="makeAddress(this);">
<option value="Barry"> Barry</option>
<option value="Bridgend"> Bridgend</option>
<option value="Caerphilly"> Caerphilly</option>
<option value="Cardiff"> Cardiff</option>
<option value="Newport"> Newport</option>
<option value="Pontypridd"> Pontypridd</option>
</select>
</td>
</tr>
<tr>
<td><!-- --></td>
<td><!-- Post Code --></td>
<td><input type="hidden" name="dpostcode" size="40" maxlength="10" onchange="makeAddress(this);"/>
<br></td>
</tr>
<tr>
<td><b><!-- ADDRESS 2 --></b></td>
<td><!-- Destination --></td>
<td><input type="hidden" name="address2" size="40" readonly value=""/>
<input type="hidden" name="item_name" size="40" readonly value=""/>
</td>
</tr>
<tr>
<td><!-- --></td>
<td><!-- --></td>
<td><input type="submit" value="GET TARIFF / BOOK" /></td>
</tr>
</table>
<!-- END OF FORM TABLE -->
</form>


If I name this (above) it don't work


My second form as below is with a script




</script>
<!-- geocoding script -->
<script src="Google info" type="text/javascript"></script>

<script type="text/javascript">

var geocoder, location1, location2, gDir;

function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;




//round the distance up/down to nearest interger
drivingDistanceMiles = Math.round (drivingDistanceMiles);
// multiply drivingDistanceMiles by 1.64 then add 1.86 then round to nearest £pound
drivingDistanceMiles = drivingDistanceMiles*1.64+1.86;
drivingDistanceMiles5 = drivingDistanceMiles+1;
drivingDistanceMiles6 = drivingDistanceMiles+2;
drivingDistanceMiles7 = drivingDistanceMiles+3;
if (drivingDistanceMiles <2.00) drivingDistanceMiles = "2.00"
//drivingDistanceMiles = Math.round (drivingDistanceMiles * 1.64 + 1.86);


document.getElementById('results').innerHTML = '<strong>Pick Up Address: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Destination Address: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Tariff: </strong><font color="#0000FF">£' + drivingDistanceMiles.toFixed(2) + ' (1-4 people) - £' + drivingDistanceMiles5.toFixed(2) + ' (5 people) - £'+drivingDistanceMiles6.toFixed(2)+ ' (6 people) - £' +drivingDistanceMiles7.toFixed(2) + ' (7 people) ' + '</font><br /><form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_xclick"><input type="hidden" name="business" value="anybody@url"><input type="hidden" name="lc" value="GB"><input type="hidden" name="item_name" value="THIS IS WHERE I NEED TO PUT DATA"><input type="hidden" name="item_number" value="1" ><input type="hidden" name="button_subtype" value="services"><input type="hidden" name="no_note" value="0"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="tax_rate" value="0.000"><input type="hidden" name="shipping" value="0.00"><input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest"><table><tr><td><input type="hidden" name="on0" value="Passengers">Passengers</td></tr><tr><td><select name="os0"><option value="1 - 4 seats">1 - 4 seats £ ' + drivingDistanceMiles.toFixed(2) + '</option><option value="1 - 5 seats">1 - 5 seats £ ' + drivingDistanceMiles5.toFixed(2) + '</option><option value="1 - 6 seats">1 - 6 seats £ ' + drivingDistanceMiles6.toFixed(2) + '</option><option value="1 - 7 seats">1 - 7 seats £ ' + drivingDistanceMiles7.toFixed(2) + '</option></select></td></tr></table><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="option_select0" value="1 - 4 seats"><input type="hidden" name="option_amount0" value="' + drivingDistanceMiles.toFixed(2) + '"><input type="hidden" name="option_select1" value="1 - 5 seats"><input type="hidden" name="option_amount1" value="' + drivingDistanceMiles5.toFixed(2) + '"><input type="hidden" name="option_select2" value="1 - 6 seats"><input type="hidden" name="option_amount2" value="' + drivingDistanceMiles6.toFixed(2) + '"><input type="hidden" name="option_select3" value="1 - 7 seats"><input type="hidden" name="option_amount3" value="' + drivingDistanceMiles7.toFixed(2) + '"><input type="hidden" name="option_index" value="0"><input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></form><br /><b>£1 extra per person over 4 people in taxi (as above)<br>Plus £1 For hiring’s between midnight and 6.00 am and on Sundays, and Bank Holidays<br>Plus £5 For hiring’s between 8.00 pm Christmas Eve and 6.00 am on 27th December and between 8.00 pm New Years Eve and 6.00 am 2nd January</b><table width=780 border=0 align=center summary=""><tr><td align=center valign=top><iframe src="cardiffmap.php" scrolling="no" frameborder="no" align="middle" width="410" height="300"></iframe></td></tr></table>'
});
}

function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the Pick Up address, Please try again. ");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].address2.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the Destination address, Please try again.");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}

</script>



form 1 collects the details to pass to Google maps, form 2 is just a pass through to PayPal the form itself is within the Google Map script

I can't see where or how to change code to copy from form 1 to form 2 the details in item_name

Maybe you could make it clearer, thanks

I will keep trying!

Old Pedant
07-16-2010, 11:32 PM
I don't see any "second form" anywhere in there. Where are you talking about????

ville
07-17-2010, 05:29 AM
I donu hav't see any "second form" anywhere in there. Where are you talking about????

it's on the line that starts


document.getElementById('results').innerHTML = '<strong>Pick Up Address: </strong>'

You have to scroll to the right to see it, it's all on one line.


<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_xclick"><input type="hidden" name="business" value="anybody@url"><input type="hidden" name="lc" value="GB"><input type="hidden" name="item_name" value="THIS IS WHERE I NEED TO PUT DATA"><input type="hidden" name="item_number" value="1" ><input type="hidden" name="button_subtype" value="services"><input type="hidden" name="no_note" value="0"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="tax_rate" value="0.000"><input type="hidden" name="shipping" value="0.00"><input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest"><table><tr><td><input type="hidden" name="on0" value="Passengers">Passengers</td></tr><tr><td><select name="os0"><option value="1 - 4 seats">1 - 4 seats £ ' + drivingDistanceMiles.toFixed(2) + '</option><option value="1 - 5 seats">1 - 5 seats £ ' + drivingDistanceMiles5.toFixed(2) + '</option><option value="1 - 6 seats">1 - 6 seats £ ' + drivingDistanceMiles6.toFixed(2) + '</option><option value="1 - 7 seats">1 - 7 seats £ ' + drivingDistanceMiles7.toFixed(2) + '</option></select></td></tr></table><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="option_select0" value="1 - 4 seats"><input type="hidden" name="option_amount0" value="' + drivingDistanceMiles.toFixed(2) + '"><input type="hidden" name="option_select1" value="1 - 5 seats"><input type="hidden" name="option_amount1" value="' + drivingDistanceMiles5.toFixed(2) + '"><input type="hidden" name="option_select2" value="1 - 6 seats"><input type="hidden" name="option_amount2" value="' + drivingDistanceMiles6.toFixed(2) + '"><input type="hidden" name="option_select3" value="1 - 7 seats"><input type="hidden" name="option_amount3" value="' + drivingDistanceMiles7.toFixed(2) + '"><input type="hidden" name="option_index" value="0"><input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></form>


(on line 20 not counting the gaps)

to recap I have in the header




<script type="text/javascript">
function makeAddress(fld)
{
var form = fld.form;
form.address1.value = form.punum.value + " " + form.pustreet.value + ", " + form.pucity.value + ", " + form.pupostcode.value;
form.address2.value = form.dnum.value + " " + form.dstreet.value + ", " + form.dcity.value + ", " + form.dpostcode.value;

form.item_name.value = "PICKUP ADDRESS - " + " " + form.punum.value + " " + form.pustreet.value + ", " + form.pucity.value + ", " + form.pupostcode.value + "PICKUP TIME @ " + " " + form.putime.value + " " + "DESTINATION ADDRESS - " + form.dnum.value + " " + form.dstreet.value + ", " + form.dcity.value + ", " + form.dpostcode.value;


}
</script>




form 1





<form action="#" onsubmit="showLocation(); return false;">
<table width=780 border=0 align=center summary="">
<tr>
<td colspan=3><font size="+1"><b><div style="text-align: center">Live Booking / Pay via PayPal online or Telephone on ????</div></b></font></td>
</tr>
<tr>
<td bgcolor=#FF0000><b>Pick Up Address</b></td>
<td>House Number</td>
<td><input type="text" name="punum" size="40" maxlength="5" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- STREET BLANK --></td>
<td>Street</td>
<td><input type="text" name="pustreet" size="40" maxlength="20" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- CITY BLANK --></td>
<td>City</td>
<td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td>
</tr>
<tr>
<td><!-- POST CODE BLANK --></td>
<td><!-- Post Code --></td>
<td><input type="hidden" name="pupostcode" size="40" maxlength="10" onchange="makeAddress(this);"></td>
</tr>
<tr>
<td><b><!-- ADDRESS 1 CODE-BLANK --></b></td>
<td><!-- Pick Up Address-BLANK --></td>
<td><input type="hidden" name="address1" size="40" readonly value="" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Pick Up Time</td>
<td><select name="putime" size="1" onchange="makeAddress(this);">
<option value="00:00"> 00:00</option>
<option value="00:15"> 00:15</option>
<option value="00:30"> 00:30</option>
<option value="00:45"> 00:45</option>
<option value="01:00"> 01:00</option>
<option value="01:15"> 01:15</option>
<option value="01:30"> 01:30</option>
<option value="01:45"> 01:45</option>
<option value="02:00"> 02:00</option>
<option value="02:15"> 02:15</option>
<option value="02:30"> 02:30</option>
<option value="02:45"> 02:45</option>
<option value="03:00"> 03:00</option>
<option value="03:15"> 03:15</option>
<option value="03:30"> 03:30</option>
<option value="03:45"> 03:45</option>
<option value="04:00"> 04:00</option>
<option value="04:15"> 04:15</option>
<option value="04:30"> 04:30</option>
<option value="04:45"> 04:45</option>
<option value="05:00"> 05:00</option>
<option value="05:15"> 05:15</option>
<option value="05:30"> 05:30</option>
<option value="05:45"> 05:45</option>
<option value="06:00"> 06:00</option>
<option value="06:15"> 06:15</option>
<option value="06:30"> 06:30</option>
<option value="06:45"> 06:45</option>
<option value="07:00"> 07:00</option>
<option value="07:15"> 07:15</option>
<option value="07:30"> 07:30</option>
<option value="07:45"> 07:45</option>
<option value="08:00"> 08:00</option>
<option value="08:15"> 08:15</option>
<option value="08:30"> 08:30</option>
<option value="08:45"> 08:45</option>
<option value="09:00"> 09:00</option>
<option value="09:15"> 09:15</option>
<option value="09:30"> 09:30</option>
<option value="09:45"> 09:45</option>
<option value="10:00"> 10:00</option>
<option value="10:15"> 10:15</option>
<option value="10:30"> 10:30</option>
<option value="10:45"> 10:45</option>
<option value="11:00"> 11:00</option>
<option value="11:15"> 11:15</option>
<option value="11:30"> 11:30</option>
<option value="11:45"> 11:45</option>
<option value="12:00"> 12:00</option>
<option value="12:15"> 12:15</option>
<option value="12:30"> 12:30</option>
<option value="12:45"> 12:45</option>
<option value="13:00"> 13:00</option>
<option value="13:15"> 13:15</option>
<option value="13:30"> 13:30</option>
<option value="13:45"> 13:45</option>
<option value="14:00"> 14:00</option>
<option value="14:15"> 14:15</option>
<option value="14:30"> 14:30</option>
<option value="14:45"> 14:45</option>
<option value="15:00"> 15:00</option>
<option value="15:15"> 15:15</option>
<option value="15:30"> 15:30</option>
<option value="15:45"> 15:45</option>
<option value="16:00"> 16:00</option>
<option value="16:15"> 16:15</option>
<option value="16:30"> 16:30</option>
<option value="16:45"> 16:45</option>
<option value="17:00"> 17:00</option>
<option value="17:15"> 17:15</option>
<option value="17:30"> 17:30</option>
<option value="17:45"> 17:45</option>
<option value="18:00"> 18:00</option>
<option value="18:15"> 18:15</option>
<option value="18:30"> 18:30</option>
<option value="18:45"> 18:45</option>
<option value="19:00"> 19:00</option>
<option value="19:15"> 19:15</option>
<option value="19:30"> 19:30</option>
<option value="19:45"> 19:45</option>
<option value="20:00"> 20:00</option>
<option value="20:15"> 20:15</option>
<option value="20:30"> 20:30</option>
<option value="20:45"> 20:45</option>
<option value="21:00"> 21:00</option>
<option value="21:15"> 21:15</option>
<option value="21:30"> 21:30</option>
<option value="21:45"> 21:45</option>
<option value="22:00"> 22:00</option>
<option value="22:15"> 22:15</option>
<option value="22:30"> 22:30</option>
<option value="22:45"> 22:45</option>
<option value="23:00"> 23:00</option>
<option value="23:15"> 23:15</option>
<option value="23:30"> 23:30</option>
<option value="23:45"> 23:45</option>
</select> <font color="#FF0000">24 Hr</font></td>
</tr>
<tr>
<td bgcolor=#FF0000><b>Customer Details</b></td>
<td>First Name</td>
<td><input type="text" name="fname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Last Name</td>
<td><input type="text" name="lname" size="40" maxlength="20"></td>
</tr>
<tr>
<td><!-- --></td>
<td>Telephone Number</td>
<td><input type="text" name="tel1" size="40" maxlength="20"></td>
</tr>
<tr>
<td bgcolor=#FF0000><b>Destination Address</b></td>
<td>House Number</td>
<td><input type="text" name="dnum" size="40" maxlength="5" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- --></td>
<td>Street</td>
<td><input type="text" name="dstreet" size="40" maxlength="20" onchange="makeAddress(this);"/></td>
</tr>
<tr>
<td><!-- --></td>
<td>City</td>
<td>
<select name="dcity" size="1" onchange="makeAddress(this);">
<option value="Barry"> Barry</option>
<option value="Bridgend"> Bridgend</option>
<option value="Caerphilly"> Caerphilly</option>
<option value="Cardiff"> Cardiff</option>
<option value="Newport"> Newport</option>
<option value="Pontypridd"> Pontypridd</option>
</select>
</td>
</tr>
<tr>
<td><!-- --></td>
<td><!-- Post Code --></td>
<td><input type="hidden" name="dpostcode" size="40" maxlength="10" onchange="makeAddress(this);"/>
<br></td>
</tr>
<tr>
<td><b><!-- ADDRESS 2 --></b></td>
<td><!-- Destination --></td>
<td><input type="hidden" name="address2" size="40" readonly value=""/>
<input type="hidden" name="item_name" size="40" readonly value=""/>
</td>
</tr>
<tr>
<td><!-- --></td>
<td><!-- --></td>
<td><input type="submit" value="GET TARIFF / BOOK" /></td>
</tr>
</table>
<!-- END OF FORM TABLE -->
</form>



and this is where the second form is, it's a paypal form, I need to send the input item_name to paypal from from 1 where the info is.

Hope this is clear.



</script>
<!-- geocoding script -->
<script src="Google info" type="text/javascript"></script>

<script type="text/javascript">

var geocoder, location1, location2, gDir;

function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;




//round the distance up/down to nearest interger
drivingDistanceMiles = Math.round (drivingDistanceMiles);
// multiply drivingDistanceMiles by 1.64 then add 1.86 then round to nearest £pound
drivingDistanceMiles = drivingDistanceMiles*1.64+1.86;
drivingDistanceMiles5 = drivingDistanceMiles+1;
drivingDistanceMiles6 = drivingDistanceMiles+2;
drivingDistanceMiles7 = drivingDistanceMiles+3;
if (drivingDistanceMiles <2.00) drivingDistanceMiles = "2.00"
//drivingDistanceMiles = Math.round (drivingDistanceMiles * 1.64 + 1.86);


document.getElementById('results').innerHTML = '<strong>Pick Up Address: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Destination Address: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Tariff: </strong><font color="#0000FF">£' + drivingDistanceMiles.toFixed(2) + ' (1-4 people) - £' + drivingDistanceMiles5.toFixed(2) + ' (5 people) - £'+drivingDistanceMiles6.toFixed(2)+ ' (6 people) - £' +drivingDistanceMiles7.toFixed(2) + ' (7 people) ' + '</font><br /><form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_xclick"><input type="hidden" name="business" value="anybody@url"><input type="hidden" name="lc" value="GB"><input type="hidden" name="item_name" value="THIS IS WHERE I NEED TO PUT DATA"><input type="hidden" name="item_number" value="1" ><input type="hidden" name="button_subtype" value="services"><input type="hidden" name="no_note" value="0"><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="tax_rate" value="0.000"><input type="hidden" name="shipping" value="0.00"><input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest"><table><tr><td><input type="hidden" name="on0" value="Passengers">Passengers</td></tr><tr><td><select name="os0"><option value="1 - 4 seats">1 - 4 seats £ ' + drivingDistanceMiles.toFixed(2) + '</option><option value="1 - 5 seats">1 - 5 seats £ ' + drivingDistanceMiles5.toFixed(2) + '</option><option value="1 - 6 seats">1 - 6 seats £ ' + drivingDistanceMiles6.toFixed(2) + '</option><option value="1 - 7 seats">1 - 7 seats £ ' + drivingDistanceMiles7.toFixed(2) + '</option></select></td></tr></table><input type="hidden" name="currency_code" value="GBP"><input type="hidden" name="option_select0" value="1 - 4 seats"><input type="hidden" name="option_amount0" value="' + drivingDistanceMiles.toFixed(2) + '"><input type="hidden" name="option_select1" value="1 - 5 seats"><input type="hidden" name="option_amount1" value="' + drivingDistanceMiles5.toFixed(2) + '"><input type="hidden" name="option_select2" value="1 - 6 seats"><input type="hidden" name="option_amount2" value="' + drivingDistanceMiles6.toFixed(2) + '"><input type="hidden" name="option_select3" value="1 - 7 seats"><input type="hidden" name="option_amount3" value="' + drivingDistanceMiles7.toFixed(2) + '"><input type="hidden" name="option_index" value="0"><input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"></form><br /><b>£1 extra per person over 4 people in taxi (as above)<br>Plus £1 For hiring’s between midnight and 6.00 am and on Sundays, and Bank Holidays<br>Plus £5 For hiring’s between 8.00 pm Christmas Eve and 6.00 am on 27th December and between 8.00 pm New Years Eve and 6.00 am 2nd January</b><table width=780 border=0 align=center summary=""><tr><td align=center valign=top><iframe src="cardiffmap.php" scrolling="no" frameborder="no" align="middle" width="410" height="300"></iframe></td></tr></table>'
});
}

function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the Pick Up address, Please try again. ");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].address2.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the Destination address, Please try again.");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}

</script>

Old Pedant
07-17-2010, 11:05 PM
Not all browsers properly handle <form>s that are created by stuffing code into something via innerHTML.

But, anyway, the answer is that you need to give a name= or id= to both your <form>s.

Then you can use the code I showed.

If you use name= in each <form>, then you can refer to each via document.YourFormName

If you use id=, then you use document.getElementById("theFormID")

Simple as that.

It's no different than when you refer to other elements.

After all, you did document.getElementById('results') so why not use an ID for the <form>s??



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum