Dynamic Form/Table Needs fields/<td bgcolor> changes 2

[FateFirst]

hey peeps!

Basically im having some trouble with putting values into fields as well as changing the <td bgcolor> depending on the <a href> link clicked.

I pull data from a database in ASP and create a table and then each row is a different form. Each form contains 2 text fields named 'bkg_color' and the other 'font_color'.

Table/Form Sample
[tt]
-------------------------------------------------------------------------------------------------------------------------------------
| FORM | BACKGROUND | COLOR | Background Colors | FONT COLOR | COLOR | Font Colors | FORM |
| NAME | COLOR | SAMPLE | (click link to see color) | | SAMPLE | (Click link to see color) | BUTTONS |
-------------------------------------------------------------------------------------------------------------------------------------
| Form1 | bkg_color | empty1_td1 | *Red* / *Blue / *Green* | 'font_color' | empty1_td2 | *Red* / *Blue / *Green* | btn_Update |
-------------------------------------------------------------------------------------------------------------------------------------
| Form2 | bkg_color | empty2_td1 | *Red* / *Blue / *Green* | 'font_color' | empty2_td2 | *Red* / *Blue / *Green* | btn_Update |
-------------------------------------------------------------------------------------------------------------------------------------
| Form3 | bkg_color | empty3_td1 | *Red* / *Blue / *Green* | 'font_color' | empty3_td2 | *Red* / *Blue / *Green* | btn_Update |
-------------------------------------------------------------------------------------------------------------------------------------
| Form4 | bkg_color | empty4_td1 | *Red* / *Blue / *Green* | 'font_color' | empty4_td2 | *Red* / *Blue / *Green* | btn_Update |
-------------------------------------------------------------------------------------------------------------------------------------
| Form5 | bkg_color | empty5_td1 | *Red* / *Blue / *Green* | 'font_color' | empty5_td2 | *Red* / *Blue / *Green* | btn_Update |
-------------------------------------------------------------------------------------------------------------------------------------
[/tt]
What I want todo is for each row/form, you can click one of the 'Color' links and it puts the hex code of the color into the relevant text field and also changes the <TD bgcolor> so you can see a sample.

A javascript function something like:

Function changeNewColor(destinationForm,td_target,newColor) {
}

Everything I try reports errors and I cant get the syntax correct...thats if the above is even possible

Thanks to anyone that can help!

- FateFirst

 

[FateFirst]

Maybe I could call 2 functions in the onClick="".

One to put the color code (i.e #FFFFFF) into the text field and another to change the <TD bgcolor> to the color link that has just been clicked?

Any ideas?

- FateFirst

 

[BillyRayPreachersSon]

>> Everything I try reports errors

Post what you've got, and I'm sure someone will be able to help get past the errors.

Dan

 

[FateFirst]

Yea, sorry

Heres the javascript im using:

<script language="Javascript"> 
<!--
function changeColorHex(destinationForm,newColor) {
	destinationForm.status_hexcolour_bkg.value = newColor;
}

function changeColorActivate(newColor) {
	document.getElementById("bkg1").style.backgroundColor = newColor;
}
//-->
</script>

Heres the Form and link line:

<form name="Form1" action="./color.asp" method="post">
<input type="hidden" name="status_id" size="10" class="BForm" value="1">
<tr>
	<td colspan="8"><input type="text" name="status_hexcolour_bkg" size="5" class="BForm1" value="#000000"> - <input type="text" name="status_hexcolour_font" size="5" class="BForm1" value="#FFFFFF">
</tr>
<tr bgcolor="#FFFFFF">
	<td><input type="text" name="status_title" size="15" class="BForm" value="Active"></td>
	<td><input type="text" name="status_desc" size="30" class="BForm" value="Project in progress and time/data can be allocated to it."></td>
	<td id="bkg1" bgcolor="#000000"><img src="./images/spacer.gif" width="25" border="0"></td>
	<td valign="top" align="left">
	<table>
	<tr>
		<td width="10" height="10" bgcolor="#FFFFFF"><a href="#" onclick="changeColorHex('Form1','#FFFFFF'), changeColorActivate('#FFFFFF');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="White"></a></td>
		<td width="10" height="10" bgcolor="#C0C0C0"><a href="#" onclick="changeColorHex('Form1','#C0C0C0'), changeColorActivate('#C0C0C0');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Light Grey"></a></td>
		<td width="10" height="10" bgcolor="#808080"><a href="#" onclick="changeColorHex('Form1','#808080'), changeColorActivate('#808080');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Dark Grey"></a></td>
		<td width="10" height="10" bgcolor="#000000"><a href="#" onclick="changeColorHex('Form1','#000000'), changeColorActivate('#000000');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Black"></a></td>
		<td width="10" height="10" bgcolor="#FFFF00"><a href="#" onclick="changeColorHex('Form1','#FFFF00'), changeColorActivate('#FFFF00');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Yellow"></a></td>
		<td width="10" height="10" bgcolor="#00FF00"><a href="#" onclick="changeColorHex('Form1','#00FF00'), changeColorActivate('#00FF00');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Light Green"></a></td>
</tr>
<tr>
		<td width="10" height="10" bgcolor="#008000"><a href="#" onclick="changeColorHex('Form1','#008000'), changeColorActivate('#008000');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Dark Green"></a></td>
		<td width="10" height="10" bgcolor="#0080FF"><a href="#" onclick="changeColorHex('Form1','#0080FF'), changeColorActivate('#0080FF');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Light Blue"></a></td>
		<td width="10" height="10" bgcolor="#0000A0"><a href="#" onclick="changeColorHex('Form1','#0000A0'), changeColorActivate('#0000A0');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Dark Blue"></a></td>
		<td width="10" height="10" bgcolor="#8000FF"><a href="#" onclick="changeColorHex('Form1','#8000FF'), changeColorActivate('#8000FF');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Light Purple"></a></td>
		<td width="10" height="10" bgcolor="#400080"><a href="#" onclick="changeColorHex('Form1','#400080'), changeColorActivate('#400080');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Dark Purple"></a></td>
		<td width="10" height="10" bgcolor="#FF8000"><a href="#" onclick="changeColorHex('Form1','#FF8000'), changeColorActivate('#FF8000');"><img src="./images/spacer.gif" width="10" height="10" border="0" alt="Orange"></a></td>
</tr>
</form>
</table>

Whenever I click any of the colors i get:

Error: 'status_hexcolour_bkg' is null or not an object.

Excuse the above, i just quickly put it together for the purpose of you getting an idea of what I have.

- FateFirst

 

[theboyhope]

Try the following in changeColorHex():

document.forms[ destinationForm ].status_hexcolour_bkg.value = newColor;

 

[FateFirst]

niceone...works fine

cheers d00d!

- FateFirst

 

[FateFirst]

Can you also specify the form field as well? I tried but it errors.

E.g.

function changeColorHex(destinationForm,destinationField,newColor) {
document.forms[ destinationForm ].[destinationField].value = newColor;
}

Error: Expected Identifier

- FateFirst

 

[BillyRayPreachersSon]

Try this:

function changeColorHex(destinationForm, destinationField, newColor) {
	document.forms[destinationForm].elements[destinationField].value = newColor;
}

Hope this helps,
Dan

 

[FateFirst]

Good job, Dan!

Thanks peeps!

- FateFirst