I've got a project where I will have 10 or more color pickers on a single page. Each color picker will change different but similar elements on the page.
I'd like to be able to write a single javascript function that handles all the element changes, but I cannot figure out how to determine which color picker has called the function. I really need to get the sender's ID so I can determine which elements to change.
An example of what I'm trying to do with a function that is hard coded to a set of elements for a single color picker. If I get the ID color picker, I can adjust the correct elements.
<script type="text/javascript">
function changeBoxColor(sender, eventArgs)
{
var box = document.getElementById('<%= divSearch.clientID %>');
var header = document.getElementById('<%= divSearchH.clientID %>');
box.style.borderColor = sender.get_selectedColor();
header.style.backgroundColor = sender.get_selectedColor();
}
</script>
<div id="divSearch" runat="server" class="section" >
<div id="divSearchH" runat="server" class="header">
Search Box
</div>
<div class="inner">
<table class="inputMin">
<tr>
<th>
Outline Color
</th>
<td>
<telerik:RadColorPicker
ID="clrSearch"
runat="server"
Preset="Standard"
ShowEmptyColor="False"
ShowIcon="True"
OnClientColorChange="changeBoxColor">
</telerik:RadColorPicker>
</td>
</tr>
<tr>
<th>
Text Color
</th>
</tr>
</table>
</div>
</div>