Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 511
  • Last Modified:

colors picker!

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
lina2401
Asked:
lina2401
  • 4
  • 4
  • 3
1 Solution
 
axis_imgCommented:
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
 
lina2401Author Commented:
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
 
Richard QuadlingSenior Software DeverloperCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Richard QuadlingSenior Software DeverloperCommented:
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
 
Richard QuadlingSenior Software DeverloperCommented:
If you can drop the code here or supply a URL, I can take a look for you.

Richard.
0
 
lina2401Author Commented:
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
 
axis_imgCommented:
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
 
axis_imgCommented:
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
 
lina2401Author Commented:
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
 
axis_imgCommented:
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
 
lina2401Author Commented:
Problems?? of course there is no more :)

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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now