Solved

colors picker!

Posted on 2002-05-01
11
503 Views
Last Modified: 2006-11-17
I'm wondering if there is a way to add a colors picker to my form (something similar to those available in MS office) so when the user selects one of the colors its number will be stored in the database!!
0
Comment
Question by:lina2401
  • 4
  • 4
  • 3
11 Comments
 
LVL 7

Expert Comment

by:axis_img
ID: 6982812
Hi lina...

This would be much better suited for something like javascript, as PHP has no client-side control once the page has been loaded.

You would use javascript to keep track of which color they picked, hiding/displaying the chart, etc...

Here are a couple of scripts/examples of various javascript/html based color pickers (many of which are cut and paste):

http://www.mattkruse.com/javascript/colorpicker/
- This page has one at that uses DHTML. It has a simple link that you click on that shows/hides the color chart. When the user clicks on a color, it places that hex code in the form box.


http://javascript.internet.com/page-details/color-picker.html


If you have any questions, please let me know. These examples will allow your users to choose their color by clicking on it. Storing that selected value in the database is the next step. If you have problems with that, let me know.

Regards,
Barry
0
 

Author Comment

by:lina2401
ID: 6986181
Hello Barry,,,
Those scripts are really great.. I found what I was looking for!! but I'm facing some javascript problems (because I tried to insert 2 color pickers in the same form) and I don't know if u can help me in this or not??

thanks for ur help..
-Lina
0
 
LVL 40

Expert Comment

by:RQuadling
ID: 6986480
Which one of the JS scripts are you using?

I assume your problem is that only 1 colour is being received in your script?

If so, then add [] to the end of the names of the fields that are defined.

This way, if the name is repeated, it will be added to an array in PHP.

i.e.

<form action="something.php" method="whatever">
<input type="text" name="textFields[]">
<input type="text" name="textFields[]">
<input type="text" name="textFields[]">
<input type="text" name="textFields[]">
</form>

You will get an array called textFields in php. You can then use foreach() or directly textFields[1]..textFields[4].

But that MAY be textFields[0]..textFields[3].

I'm never too sure!

Regards,

Richard Quadling.
0
 
LVL 40

Expert Comment

by:RQuadling
ID: 6986484
Or do you have 2 forms?

If you do, then the idea is to try and merge the 2 forms into 1.

Remove the first </form> and the second <form> tags, add [] to the end of the names of all the form fields and see how this works.

Regards,

Richard Quadling.
0
 
LVL 40

Expert Comment

by:RQuadling
ID: 6986486
If you can drop the code here or supply a URL, I can take a look for you.

Richard.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:lina2401
ID: 6986563
I'm using the one with DHTML (the first URL in Barry's post)..
what I need is to have 2 of those color pickers (one for the background and one for the font) with 2 textboxes in a single form!!
I tried the js script with one textbox and it worked but when I tried to insert the second one I got some errors although I tried to modify the script but I guess my limited knowledge about js didn't help me alot!!

I really have no idea on how to solve this I tried many things but nothing worked!!
0
 
LVL 7

Expert Comment

by:axis_img
ID: 6986569
Hi lina... If you can, post the relevant portion of your code here and we can look through it. To me, it doesn't sound like an array problem. It sounds to me like you are trying to use the color picker on two different form fields that are not related. If so, then you will not need to use an array.

To be sure, please post some of your code here and we can take a look.

Thanks :)
Barry
0
 
LVL 7

Expert Comment

by:axis_img
ID: 6986572
Yeah... It sounds like a conflict of function or variable names, since it worked fine with one field, but causes errors with multiple fields.

Can you post a URL with your code so we can take a look?
0
 

Author Comment

by:lina2401
ID: 6987196
I tried to work on it and this what I came up with!!

<html>
<head>

<SCRIPT LANGUAGE="Javascript" SRC="AnchorPosition.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="PopupWindow.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="ColorPicker2.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
var cp = new ColorPicker('window');
var cp2 = new ColorPicker();


// Runs when a color is clicked
function pickColor(color) {
     field1.value =color;
 }

var field1;
function pick1(anchorname) {
 field1 = document.forms[0].bgcolor;
 cp2.show(anchorname);
 }

var field2;
function pick2(anchorname) {
 field2 = document.forms[0].fcolor;
 cp2.show(anchorname);
 }

</script>
</head>
<body>
<form action="StoreColors.php" method="post">

<br><font color="#FF00FF"><b>Background Color:</b></font>
<INPUT TYPE="text" NAME="bgcolor" SIZE="20" VALUE="">
<A HREF="#" onClick="pick1('pick1');return false;" NAME="pick1" ID="pick1">Pick</A>

<br><font color="#FF00FF"><b>Font Color:</b></font>
<INPUT TYPE="text" NAME="fcolor" SIZE="20" VALUE="">
<A HREF="#" onClick="pick2('pick2');return false;" NAME="pick2" ID="pick2">Pick</A>

<br><br><input type="submit" name="store" VALUE="Save">
<SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>
</form>
</body>
</html>

The above doesn't show any error messages..I didn't do any changes in the .js files I've just downloaded and use them as they are ..
Barry, I do agree with you that a conflict is causing this problem!! if u tried the script above you will notice that only one of the text fields (bgcolor) is taking both values and changes accordingly! I tried to use an IF statement but it didn't solve the problem!!

Hope things are clear now :)
Thanks alot.
0
 
LVL 7

Accepted Solution

by:
axis_img earned 200 total points
ID: 6987264
Hi lina... just as we expected. :)

Try this out and let me know if you have any problems...

<html>
<head>

<SCRIPT LANGUAGE="Javascript" SRC="AnchorPosition.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="PopupWindow.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="ColorPicker2.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
var cp     = new ColorPicker();
var current_field     = "";

// Runs when a color is clicked
function pickColor(color, field) {
     current_field.value = color;
}

function pick1(anchorname) {
     current_field = document.forms[0].bgcolor;
     cp.show(anchorname);
}

function pick2(anchorname) {
     current_field = document.forms[0].fcolor;
     cp.show(anchorname);
}

</script>
</head>
<body>
<form action="StoreColors.php" method="post">

<br><font color="#FF00FF"><b>Background Color:</b></font>
<INPUT TYPE="text" NAME="bgcolor" SIZE="20" VALUE="">
<A HREF="#" onClick="pick1('pick1');return false;" NAME="pick1" ID="pick1">Pick</A>

<br><font color="#FF00FF"><b>Font Color:</b></font>
<INPUT TYPE="text" NAME="fcolor" SIZE="20" VALUE="">
<A HREF="#" onClick="pick2('pick2');return false;" NAME="pick2" ID="pick2">Pick</A>

<br><br><input type="submit" name="store" VALUE="Save">
<SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>
</form>
</body>
</html>


First thing was that you only need one ColorPicker object. Also, the popup was never intended for multiple fields, since the pickColor() function always acted on field1's value. What I did was added a current_field variable that has global scope. Then I set the current_field variable to the current form field inside the pick1() and pick2() function. This way, the pickColor() function works on the correct field... Let me know if you have any more problems.

Regards,
Barry
0
 

Author Comment

by:lina2401
ID: 6987397
Problems?? of course there is no more :)

I do appreciate your help...thanks alot.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now