[SOLVED] onclick insert values on input boxes and then fill an area

katerina · September 25, 2008

Hi all,

I need your help.

I have made a code that appears some images of colors.

Below there are three three input elements , for R, G and B.

I would like when the user clicks on an image to insert the value of color in input elements.

This is for backgound colour.

I would like to do the same on foreground.

And finally I want to fill another div element with foreground and background.

My code for these divs is :

<div id="color">

<div id="col">
   <h2>Foreground/h2>
   <p> 
   <a style="background-color: rgb(0, 0, 0);" title="#000000"><img src="images/px.gif" alt="#000000" class="px"></a>
    <a style="background-color: rgb(0, 0, 192);" title="#0000C0"><img src="images/px.gif" alt="#0000C0" class="px"></a>
    <a style="background-color: rgb(73, 108, 143);" title="#496C8F"><img src="images/px.gif" alt="#496C8F" class="px"></a>
     <a style="background-color: rgb(127, 0, 127);" title="#7F007F"><img src="images/px.gif" alt="#7F007F" class="px"></a> <br>
      <a style="background-color: rgb(255, 255, 255);" title="#FFFFFF"><img src="images/px.gif" alt="#FFFFFF" class="px"></a> 
    </p>
   
   <p> <b> R : </b><input name="color11" maxlength="3" size="8" value="000" type="text"><br>
       <b> G : </b><input name="color12" maxlength="3" size="8" value="000" type="text"><br>
       <b> B : </b><input name="color13" maxlength="3" size="8" value="000" type="text">
   </p>
</div>

<div id="bg">
   <h2>Background</h2>
   <p> 
   <a style="background-color: rgb(73, 108, 143);" title="#496C8F"><img src="images/px.gif" alt="#496C8F" class="px"></a>
<a style="background-color: rgb(96, 132, 164);" title="#6084A4"><img src="images/px.gif" alt="#6084A4" class="px"></a>
<a style="background-color: rgb(169, 192, 213);" title="#A9C0D5"><img src="images/px.gif" alt="#A9C0D5" class="px"></a>
<a style="background-color: rgb(255, 255, 255);" title="#FFFFFF"><img src="images/px.gif" alt="#FFFFFF" class="px"></a>
   </p><br>
<p> <b> R : </b><input maxlength="3" size="8" value="000" type="text"><br>
     <b> G : </b><input maxlength="3" size="8" value="000" type="text"><br>
     <b> B : </b> <input maxlength="3" size="8" value="000" type="text">
   </p>
</div>

<div id="cont">
   <h2>SHOW</h2>
        <div id="plaisio" name="plaisio" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; color: rgb(0, 0, 0); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
  <p style="padding: 1.5em 0em 2em;"><br>
     <span style="font-size: 1.5em;">Hello World</span><br>
  </p>
</div>

</div>
<p style="text-align: center; clear: both;"> <input value="check" type="submit"></p>
<h2 style="clear: both;"> </h2>
<p> </p>
</div>

Thanks a lot

Psycho · September 25, 2008

Note: there are some changes in your provided code:

<html>
<head>

<script type="text/javascript">

function setRGB(inputObj)
{
  var colorsAry = inputObj.style.backgroundColor.replace(/[^\d,]/g, '').split(',');

  document.getElementById(inputObj.name+'R').value = colorsAry[0];
  document.getElementById(inputObj.name+'G').value = colorsAry[1];
  document.getElementById(inputObj.name+'B').value = colorsAry[2];

  return;
}

</script>

</head>

<body>

<div id="color">
    <div id="col">
   <h2>Foreground/h2>
   <p> 
      <a style="background-color:rgb(0, 0, 0);"       title="#000000" name="foreColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#000000" class="px"></a>
      <a style="background-color:rgb(0, 0, 192);"     title="#0000C0" name="foreColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#0000C0" class="px"></a>
      <a style="background-color:rgb(73, 108, 143);"  title="#496C8F" name="foreColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#496C8F" class="px"></a>
      <a style="background-color:rgb(127, 0, 127);"   title="#7F007F" name="foreColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#7F007F" class="px"></a> <br>
      <a style="background-color:rgb(255, 255, 255);" title="#FFFFFF" name="foreColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#FFFFFF" class="px"></a> 
   </p>
   
   <p>
      <b> R : </b><input name="color11" id="foreColorR" maxlength="3" size="8" value="000" type="text"><br>
      <b> G : </b><input name="color12" id="foreColorG" maxlength="3" size="8" value="000" type="text"><br>
      <b> B : </b><input name="color13" id="foreColorB" maxlength="3" size="8" value="000" type="text">
   </p>
   </div>

   <div id="bg">
   <h2>Background</h2>
   <p> 
      <a style="background-color:rgb(73, 108, 143);"  title="#496C8F" name="backColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#496C8F" class="px"></a>
      <a style="background-color:rgb(96, 132, 164);"  title="#6084A4" name="backColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#6084A4" class="px"></a>
      <a style="background-color:rgb(169, 192, 213);" title="#A9C0D5" name="backColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#A9C0D5" class="px"></a>
      <a style="background-color:rgb(255, 255, 255);" title="#FFFFFF" name="backColor" onclick="setRGB(this);">
         <img src="images/px.gif" alt="#FFFFFF" class="px"></a>
   </p><br>
   <p>
      <b> R : </b><input name="" id="backColorR" maxlength="3" size="8" value="000" type="text"><br>
      <b> G : </b><input name="" id="backColorG" maxlength="3" size="8" value="000" type="text"><br>
      <b> B : </b><input name="" id="backColorB" maxlength="3" size="8" value="000" type="text">
   </p>
   </div>

   <div id="cont">
   <h2>SHOW</h2>
   <div id="plaisio" name="plaisio" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; color: rgb(0, 0, 0); -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
   <p style="padding: 1.5em 0em 2em;"><br>
      <span style="font-size: 1.5em;">Hello World</span><br>
   </p>
   </div>

</div>
<p style="text-align: center; clear: both;"> <input value="check" type="submit"></p>
<h2 style="clear: both;"> </h2>
<p> </p>
</div>

</body>
</html>

katerina · September 26, 2008

Thanks a lot for your solution. It works perfect, but as I refer above I would like also when I ckick on a color -image to change the Hello World.

For example onclick Foreground image : #000000 --> make the text Hello World black colored

onclick Background Color : #ffffff --> make the background of Hello world white colored

Thanks a lot

Psycho · September 26, 2008

Add an ID to the span around the text:

      <span style="font-size: 1.5em;" id="outputText">Hello World</span><br>

Then add the new code at the bottom of the function

function setRGB(inputObj)
{
  //Get the value for the object's background color and create array of RGB values
  var colorsAry = inputObj.style.backgroundColor.replace(/[^\d,]/g, '').split(',');

  //Populate the appropriate fields with the RGB values
  document.getElementById(inputObj.name+'R').value = colorsAry[0];
  document.getElementById(inputObj.name+'G').value = colorsAry[1];
  document.getElementById(inputObj.name+'B').value = colorsAry[2];

  //Change the text color accordingly
  if (inputObj.name=='foreColor')
  {
    document.getElementById('outputText').style.color = inputObj.style.backgroundColor;
  }
  else
  {
    document.getElementById('outputText').style.backgroundColor = inputObj.style.backgroundColor;
  }

  return;
}

katerina · September 27, 2008

Thank you very much!

You are an expert.

It works perfect!

Thanks again!

Sign In

[SOLVED] onclick insert values on input boxes and then fill an area

Recommended Posts

katerina

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

katerina

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

katerina

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information