[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

get value from form input.value and change color in td cell upon change of input.value

Posted on 2007-07-28
13
Medium Priority
?
1,348 Views
Last Modified: 2012-06-27
i want to change the bg color of a td in a table this color is the input.value

if theres no value in the input.value id like it to default to white(what it is now)

            <tr>
                  <td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Windows system palette:</font></td>
                  <td bgcolor="#ffffff" valign="top">
                  <input type="Text" name="input1">
                  <a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input1'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="images/sel.gif"></a>
                  </td>
                  <td bgcolor="#ffffff" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
the button td with all the spaces in it si the one i weant to change from the selction in the rows input.value
 thank you in advance for any code and help you may provide
0
Comment
Question by:Johnny
  • 8
  • 5
13 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 19586104
You can do it with something like ...

                  <input type="Text" name="input1" onblur="if (this.value != '') { document.getElementById('colorTd').style.backgroundColor = this.value };">
                  <a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input1'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="images/sel.gif"></a>
                  </td>
                  <td id="colorTd" bgcolor="#ffffff" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

Let me know how this works or if you have a question.

bol
0
 

Author Comment

by:Johnny
ID: 19586178
im not sure as to why but it does not work...

i have posted the code demo page i got this code form

dragon-software.info/php_stuff/tigra_color_picker/index.html

the above code i made a page from the sample code and i added the td to the end so i had a place to view the change.

it does pick the color and it does change the text value but the code in the view box does not change at all
0
 

Author Comment

by:Johnny
ID: 19586184
i did find some code that seams to work well too
http://www.flooble.com/scripts/colorpicker.php

tigra has more colors to pick

i may go with flooble tho.. i have it working on my page

id still like to know the answer to this one so if i wnat in the future i can do other things i have in mind
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Johnny
ID: 19586193
i wish you can edit the posts grrr

http://www.dragon-software.info/php_stuff/tigra_color_picker/index.html

i am working on a wysiwyg, and editable post it question site, at this rate tho it will take a long time, as im doing it by myself and i am working on other projects right now.. id love to partner with another tho so i can make my site tho. i have some ideas on making the wheel better so to speak. I do have the site sorta working..maybe ill be able to finish it some day........
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19586216
I don't see the code I provided in the link you provided.  Where is the code or where are you using it?  Are you getting an error?  Let me know if you have a question or need more info.

bol
0
 

Author Comment

by:Johnny
ID: 19586245
i made another page..one i do not really want to post...

the above is the code i used. ive posted the demo page so in hopes you maybe able to use it to see if theres an error or not..no im not getting any errors(altho i do not know how to debug javacode, i have a wc3 validator for firefox and its got errors for other things on the page i have not fixed yet like the <BR> should be <BR /> stuff, but no errors in the section of code you provided) so its wc3 compliant..)

i copied the demo section for the fields and then the js code placed them into my page and as i said it worked fine but i replaced you code and i stil get the popups and the text to change but no joy on the changed background color in the td cell
0
 

Author Comment

by:Johnny
ID: 19586251
i mean i gave the code in hopes you could build a page of your own..to test..as i said im not willing to post the page im working on. thats not working
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19586474
Well, it works for me.  Did you also add the id attribute to the td with the spaces?  That must be there too.  I have it in my code above.

Otherwise what are you entering for the value in the input?  Try a color name like black.  If it is a value then you need to include the # sign (e.g. #000000).

Hopefully one of those is the problem.  Otherwise I don't know how I can help more.  Let me know how it works or if you have a question.

bol
0
 

Author Comment

by:Johnny
ID: 19586807
<table style="margin-left:50px" border="1" cellpadding="0" cellspacing="1" width="470">
            <tr>
                  <td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Web safe palette:</font></td>
                  <td bgcolor="#ffffff" valign="top">
                  <!-- Add input box to the form -->
                  <input type="Text" name="input0">
                  <!--
                        Put icon by the input control.
                        Make it the link calling picker popup.
                        Specify input object reference as first parameter to the function and palete selection as second.
                  -->
                  <a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input0'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="images/sel.gif"></a>
            </td>
                  <td bgcolor="javascript:document.forms['tcp_test'].value" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
            <tr>
                  <td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Windows system palette:</font></td>
                  <td bgcolor="#ffffff" valign="top">
                  <input type="Text" name="input1" onblur="if (this.value != '') { document.getElementById('colorTd').style.backgroundColor = this.value };">
                  <a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input1'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="images/sel.gif"></a>
                  </td>
                  <td id="colorTd" bgcolor="#ffffff" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                  </tr>
            <tr>
                  <td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Picker reads initial value from the input:</font></td>
                  <td bgcolor="#ffffff" valign="top">
                  <input type="Text" name="input3" value="#DBEAF5">
                  <a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input3'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="images/sel.gif"></a>
                  </td>
                  <td bgcolor="#ffffff" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
<tr>

</td>
</tr>


</table>
--------------------
no joy unless i have an error in the code someplace
0
 

Author Comment

by:Johnny
ID: 19586810
BTW please understand im gratefully for the help.. thank you
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19596041
That code worked for me too.  I do see you added the ID attribute.

How about an answer to the other question I asked?  What are you inputing in the box?  Try just typing red.  Make sure it is in the input box that has the javascript code.  In the code you provided above it was the second row.  Does that work?

There might be some other script that is causing a conflict or some other issue.  The code works and it worked in the html above (I just added html, head and body tags).  If it still doesn't work in your page and you can't provide more information then try adding an alert (e.g. alert('here');) to the start of the script I provided.  Do you get the alert?

Let me know if you have a question or need more information.

bol
0
 

Author Comment

by:Johnny
ID: 19596172
ok can we call me a dummy.

im really sorry.. ive been useing the top input cell as my testing. not relizing it was the second box.

thank you for your help.
im sorry for the oversite

the code dose work thank you
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19596321
LOL.  You are not a dummy; I made the same mistake about 3-4 times when I first tested your recent code.  That is why I mentioned the input. :)

I'm glad it is working and I could help.  Thanks for the grade, the points and the fun question.

bol
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question