function copyValue to 2 diff. locations on page

@howardfan123Jan 06.2009

I am trying to get the value of some text boxes to automaticly go into two tables i have set up.
the first table goes in perfect but nothing goes to the second table at all
the script i am using is

tables are named and have id’s of “cardone”and “cardtwo”

the text boxes that the customer inputs the info into are set like this one but all 13 are diff. id’s and names
<input name=”MASTERDATE” type=”text” id=”MASTERDATE” size=”30″ onchange=”copyValue(this);” />

i looked through all 500 javascript threads and saw nothing like it and all the research i have done ive seen nothing except a link to a thread on here that noboby responded too someone please help

to post a comment

JavaScript

12 Comments(s) _↴

@FangJan 06.2009 — #What is the code to write to the second table cell?

@howardfan123authorJan 06.2009 — #<td colspan="2" align="left" class="INPUTTEDINFO" id="COPY_MASTERDAYOFWEEK"/>*</td>

@howardfan123authorJan 06.2009 — #<table width="50%" border="0" cellpadding="0" cellspacing="0" id="CARDTWO" name="CARDTWO">

@FangJan 06.2009 — #function copyValue uses an [I]id[/I] value of 'copy_MASTERDATE' which does not appear to exist. The case of the [I]id[/I] is important! If you are attempting to use xhtml then they have to be lowercase.

@howardfan123authorJan 06.2009 — #it's all in lower case and still no luck so i am going to post the whole thing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript" xml:lang="LANG">

function copyValue(el) {

document.getElementById('copy_' + el.id).innerHTML = el.value;

}

</script>

<style type="text/css">



</style>

<SCRIPT LANGUAGE="JavaScript">

function IsValidTime(timeStr) {

// Checks if time is in HH:MM:SS AM/PM format.

// The seconds and AM/PM are optional.

var timePat = /^{^(d{1,2})?d{2})(?d{2}))?(s?(AM|am|PM|pm))?$/;}

var matchArray = timeStr.match(timePat);

if (matchArray == null) {

alert("Time is not in a valid format.");

return false;

}

hour = matchArray[1];

minute = matchArray[2];

second = matchArray[4];

ampm = matchArray[6];

if (second=="") { second = null; }

if (ampm=="") { ampm = null }

if (hour < 0 || hour > 23) {

alert("Hour must be between 1 and 12. (or 0 and 23 for military time)");

return false;

}

if (hour <= 12 && ampm == null) {

if (confirm("Please indicate which time format you are using. OK = Standard Time, CANCEL = Military Time")) {

alert("You must specify AM or PM.");

return false;

}

}

if (hour > 12 && ampm != null) {

alert("You can't specify AM or PM for military time.");

return false;

}

if (minute<0 || minute > 59) {

alert ("Minute must be between 0 and 59.");

return false;

}

if (second != null && (second < 0 || second > 59)) {

alert ("Second must be between 0 and 59.");

return false;

}

return false;

}

// End -->

</script>

</head>

<body>

<p> </p>

<p class="MASTERLABELS6">DATE OF EVENT </p>

<p>

<input name="MASTERDATE" type="text" id="MASTERDATE" size="30" onchange="copyValue(this);" /></p>

<p class="MASTERLABELS6">DAY OF EVENT </p>

<p><select name="masterdayofweek" id="masterdayofweek" onchange="copyValue(this);">

<option value="" selected="selected">Choose Day</option>

<option value=" Sunday ">Sunday</option>

<option value=" Monday ">Monday</option>

<option value=" Tuesday ">Tuesday</option>

<option value=" Wednesday ">Wednesday</option>

<option value=" Thursday ">Thursday</option>

<option value=" Friday ">Friday</option>

<option value=" Saturday ">Saturday</option>

</select>

</p>

<p class="MASTERLABELS6">TIME OF EVENT </p>

<p><span class="MASTERLABELS">FROM</span>

<input name="MASTERSTARTTIME" type="text" id="masterstarttime" onchange="copyValue(this);" size="4" "return IsValidTime(document.timeform.time.value);"/>

<select name="AMPM1" id="AMPM1" onchange="copyValue(this);">

<option value=" AM " selected="selected">AM</option>

<option value=" PM ">PM</option>

</select>

<span class="MASTERLABELS">TO </span>

<input name="MASTERENDTIME" type="text" id="masterendtime" onchange="copyValue(this);" size="4"/>

<select name="AMPM2" id="AMPM2" onchange="copyValue(this);">

<option value=" AM " selected="selected">AM</option>

<option value=" PM ">PM</option>

</select>

</p>

<p class="MASTERLABELS6">LOCATION OF EVENT </p>

<p><span class="MASTERLABELS">WHERE</span>

 

<input name="MASTERADDRESS" type="text" size="30" id="masteraddress" onchange="copyValue(this);copyValue(this)"/>

</p>

<p><span class="MASTERLABELS">CITY</span>      

<input type="text" name="MASTERCITY" id="mastercity" onchange="copyValue(this);"/>

</p>

<p><span class="MASTERLABELS">STATE</span>

 

<input name="MASTERSTATE" type="text" id="masterstate" size="4" onchange="copyValue(this);"/>

  <span class="MASTERLABELS">ZIP CODE </span>

<input name="MASTERZIPCODE" type="text" id="masterzipcode" size="7" onchange="copyValue(this);"/>

</p>

<p> </p>

<table width="50%" border="0" cellpadding="0" cellspacing="0" id="cardone" name="CARDONE">

<tr>

<th colspan="22" nowrap="nowrap" class="style10" scope="row">Save This Date </th>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right">

<p><span class="leftborder"><span class="style9">Date:</span> </span></p>

</div></th>

<td colspan="2" align="left" class="INPUTTEDINFO" id="copy_masterdayofweek"/></td>

*

<td></td></td>

<td> </td>

<td colspan="11" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masterdate"/></td>

*

<td></td></td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Time:</span> </div></th>

<td id="copy_masterstarttime" align="left" class="INPUTTEDINFO"> </td>

<td class="INPUTTEDINFO" align="left" id="copy_ampm1"> </td>

<td align="center" class="style5" ><center>

<span class="leftborder"> <span class="style9">TO</span></span>

</center></td>

<td></td>

<td colspan="3" id="copy_masterendtime" align="right" class="INPUTTEDINFO"> </td>

<td colspan="2" class="INPUTTEDINFO" align="left" id="copy_ampm2"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Place:</span> </div></th>

<td colspan="14" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masteraddress"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th scope="row"> </th>

<td> </td>

<td> </td>

<td> </td>

<td align="left" class="INPUTTEDINFO" id="copy_mastercity"> </td>

<td class="leftborder">,</td>

<td colspan="3" id="copy_masterstate" align="right" class="INPUTTEDINFO"> </td>

<td>.</td>

<td colspan="4" id="copy_masterzipcode" align="right" class="INPUTTEDINFO"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

<p> </p>

<p>  </p>

<p> </p>

<table width="50%" border="0" cellpadding="0" cellspacing="0" id="cardtwo" name="CARDTWO">

<tr>

<th colspan="22" nowrap="nowrap" class="style10" scope="row">Save This Date </th>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right">

<p><span class="leftborder"><span class="style9">Date:</span> </span></p>

</div></th>

<td colspan="2" align="left" class="INPUTTEDINFO" id="copy_masterdayofweek"/>*</td>

<td> </td>

<td colspan="11" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masterdate"/>

*</td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Time:</span> </div></th>

<td id="copy_masterstarttime" align="left" class="INPUTTEDINFO"> </td>

<td class="INPUTTEDINFO" align="LEFt" id="copy_ampm1"> </td>

<td align="center" class="style5" ><center>

<span class="leftborder"> <span class="style9">TO</span></span>

</center></td>

<td></td>

<td colspan="3" id="copy_masterendtime" align="RIGHT" class="INPUTTEDINFO"> </td>

<td colspan="2" class="INPUTTEDINFO" align="LEFT" id="copy_ampm2"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Place:</span> </div></th>

<td colspan="14" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masteraddress"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th scope="row"> </th>

<td> </td>

<td> </td>

<td> </td>

<td align="left" class="INPUTTEDINFO" id="copy_mastercity"> </td>

<td class="leftborder">,</td>

<td colspan="3" id="copy_masterstate" align="right" class="INPUTTEDINFO"> </td>

<td>.</td>

<td colspan="4" id="copy_masterzipcode" align="right" class="INPUTTEDINFO"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

</body>

</html>

@FangJan 06.2009 — #[B]The case of the [I]id[/I] is important![/B] If you are attempting to use xhtml then they have to be lowercase.[/QUOTE]
This is your problem. Also [B]all[/B] attribute values must be lowercase. Validate your document: http://validator.w3.org/

@howardfan123authorJan 06.2009 — #all the id are in lower case now and still now luck

the case does not seem to have anything to do with it because it does copy the info to one location on the page but not the second spot that i need it to go to

@FangJan 07.2009 — #Post the new code

@howardfan123authorJan 07.2009 — #<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

function copyValue(el) {

document.getElementById('copy_' + el.id).innerHTML = el.value;

}

</script>

<style type="text/css">



</style>

<script language="JavaScript" type="text/javascript">

function IsValidTime(timeStr) {

// Checks if time is in HH:MM:SS AM/PM format.

// The seconds and AM/PM are optional.

var timePat = /^{^(d{1,2})?d{2})(?d{2}))?(s?(AM|am|PM|pm))?$/;}

var matchArray = timeStr.match(timePat);

if (matchArray == null) {

alert("Time is not in a valid format.");

return false;

}

hour = matchArray[1];

minute = matchArray[2];

second = matchArray[4];

ampm = matchArray[6];

if (second=="") { second = null; }

if (ampm=="") { ampm = null }

if (hour < 0 || hour < 23) {

alert("Hour must be between 1 and 12. (or 0 and 23 for military time)");

return false;

}

if (hour < = 12 amp amp ampm == null) {

if (confirm("Please indicate which time format you are using. OK = Standard Time, CANCEL = Military Time")) {

alert("You must specify AM or PM.");

return false;

}

}

if (hour > 12 && ampm != null) {

alert("You can't specify AM or PM for military time.");

return false;

}

if (minute<0 || minute > 59) {

alert ("Minute must be between 0 and 59.");

return false;

}

if (second != null && (second < 0 || second > 59)) {

alert ("Second must be between 0 and 59.");

return false;

}

return false;

}

</script>

</head>

<body>

<p> </p>

<p class="MASTERLABELS6">DATE OF EVENT </p>

<p>

<input name="MASTERDATE" type="text" id="masterdate" size="30" onchange="copyValue(this);" /></p>

<p class="MASTERLABELS6">DAY OF EVENT </p>

<p><select name="masterdayofweek" id="masterdayofweek" onchange="copyValue(this);">

<option value="" selected="selected">Choose Day</option>

<option value=" Sunday ">Sunday</option>

<option value=" Monday ">Monday</option>

<option value=" Tuesday ">Tuesday</option>

<option value=" Wednesday ">Wednesday</option>

<option value=" Thursday ">Thursday</option>

<option value=" Friday ">Friday</option>

<option value=" Saturday ">Saturday</option>

</select>

</p>

<p class="MASTERLABELS6">TIME OF EVENT </p>

<p><span class="MASTERLABELS">FROM</span>

<input name="MASTERSTARTTIME" type="text" id="masterstarttime" onchange="copyValue(this);" size="4">

<select name="AMPM1" id="ampm1" onchange="copyValue(this);">

<option value=" AM " selected="selected">AM</option>

<option value=" PM ">PM</option>

</select>

<span class="MASTERLABELS">TO </span>

<input name="MASTERENDTIME" type="text" id="masterendtime" onchange="copyValue(this);" size="4"/>

<select name="AMPM2" id="ampm2" onchange="copyValue(this);">

<option value=" AM " selected="selected">AM</option>

<option value=" PM ">PM</option>

</select>

<p></p>

<span class="MASTERLABELS6">LOCATION OF EVENT</span>

<p><span class="MASTERLABELS">WHERE</span>

 

<input name="MASTERADDRESS" type="text" size="30" id="masteraddress" onchange="copyValue(this);copyValue(this)"/>

</p>

<p><span class="MASTERLABELS">CITY</span>      

<input type="text" name="MASTERCITY" id="mastercity" onchange="copyValue(this);"/>

</p>

<p><span class="MASTERLABELS">STATE</span>

 

<input name="masterstate" type="text" id="masterstate" size="4" onchange="copyValue(this);"/>

  <span class="MASTERLABELS">ZIP CODE </span>

<input name="MASTERZIPCODE" type="text" id="masterzipcode" size="7" onchange="copyValue(this);"/>

</p>

<p> </p>

<table width="50%" border="0" cellpadding="0" cellspacing="0" id="cardone">

<tr>

<th colspan="22" nowrap="nowrap" class="style10" scope="row">Save This Date </th>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right">

<p><span class="leftborder"><span class="style9">Date:</span> </span></p>

</div></th>

<td colspan="2" align="left" class="INPUTTEDINFO" id="copy_masterdayofweek"></td>

 <td></td>
   <td>&nbsp;</td>
   <td colspan="11" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masterdate"></td>
 
   <td></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Time:</span>&nbsp;</div></th>
   <td id="copy_masterstarttime" align="left" class="INPUTTEDINFO">&nbsp;</td>
   <td class="INPUTTEDINFO" align="left" id="copy_ampm1">&nbsp;</td>
   <td align="center" class="style5" ><center>
   <span class="leftborder">&nbsp;<span class="style9">TO</span></span>
   </center></td>
   <td></td>
   <td colspan="3" id="copy_masterendtime" align="right" class="INPUTTEDINFO">&nbsp;</td>
   <td colspan="2" class="INPUTTEDINFO" align="left" id="copy_ampm2">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Place:</span>&nbsp;</div></th>
   <td colspan="14" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masteraddress">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">&nbsp;</th>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td align="left" class="INPUTTEDINFO" id="copy_mastercity">&nbsp;</td>
   <td class="leftborder">,</td>
   <td colspan="3" id="copy_masterstate" align="right" class="INPUTTEDINFO">&nbsp;</td>
   <td>.</td>
   <td colspan="4" id="copy_masterzipcode" align="right" class="INPUTTEDINFO">&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>

</table>

<p> </p>

<p>  </p>

<p> </p>

<table width="50%" border="0" cellpadding="0" cellspacing="0" id="cardtwo">

<tr>

<th colspan="22" nowrap="nowrap" class="style10" scope="row">Save This Date </th>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right">

<p><span class="leftborder"><span class="style9">Date:</span> </span></p>

</div></th>

<td colspan="2" align="left" class="INPUTTEDINFO" id="copy_masterdayofweek"></td>

<td> </td>

<td colspan="11" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masterdate">

</td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Time:</span> </div></th>

<td id="copy_masterstarttime" align="left" class="INPUTTEDINFO"> </td>

<td class="INPUTTEDINFO" align="left" id="copy_ampm1"> </td>

<td align="center" class="style5" ><center>

<span class="leftborder"> <span class="style9">TO</span></span>

</center></td>

<td></td>

<td colspan="3" id="copy_masterendtime" align="right" class="INPUTTEDINFO"> </td>

<td colspan="2" class="INPUTTEDINFO" align="left" id="copy_ampm2"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th colspan="4" scope="row"><div align="right" class="leftborder"><span class="style9">Place:</span> </div></th>

<td colspan="14" align="left" nowrap="nowrap" class="INPUTTEDINFO" id="copy_masteraddress"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<th scope="row"> </th>

<td> </td>

<td> </td>

<td> </td>

<td align="left" class="INPUTTEDINFO" id="copy_mastercity"> </td>

<td class="leftborder">,</td>

<td colspan="3" id="copy_masterstate" align="right" class="INPUTTEDINFO"> </td>

<td>.</td>

<td colspan="4" id="copy_masterzipcode" align="right" class="INPUTTEDINFO"> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

</body></html>

@FangJan 07.2009 — #id must be unique. Use a different id for the second group.

function copyValue(el) {
 document.getElementById('copy_' + el.id).innerHTML = el.value;
 document.getElementById('copy2_' + el.id).innerHTML = el.value;
 }

[B]ALL[/B] attribute values must be lowercase.

Validate your document: http://validator.w3.org/ If you had done this your errors would have been obvious.

@howardfan123authorJan 07.2009 — #perfect works great thank you

now can you answer a question for me how do i get the two tables only to print centered on paper after the info has been entered

@FangJan 07.2009 — #Using @media print rule or a .pdf file

Also in #JavaScript _↴

simple JS discount calculator Put The Script Where?DHTML Menu Dropdown Not Disappearing on MouseOut

Success!

Help @howardfan123 spread the word by sharing this article on Twitter...

Tweet This

function copyValue to 2 diff. locations on page

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

function copyValue to 2 diff. locations on page

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴