CODEWITHSUNDEEP
phphtmlwordpress
Dan
Dan

Reputation: 67

Reading HTML5 input (type color) value with PHP

I'm creating my first theme in WordPress, and have added a theme settings page where I'm using an input field of the HTML5 type "color" to allow the theme user to select the color of an element on the page.

The input type renders and works just fine, but on the theme options page I want it to show a text string of the hex value (e.g. "#FFFFFF" or "#31A1FF" or whatever) of the currently selected color next to the color swatch/input field. This part is not working. I'm fairly new to PHP, so I'm probably just doing something wrong. But I would've figured reading the value property of the input field would work. It isn't--it does not show any text at all.

Below is the code I'm working with. Can anyone help point me in the right direction here?

Ultimately, I will be wanting to do the same thing with other input types used for other settings such as a slider input for opacity/transparency values. But this is my starting point, and I can get going with this one, the others probably won't be hard to figure out.

function fp_Field_BackgroundColor () {
    $options = get_option('fp-OptionsArray');
    echo "<input id='fp_BackgroundColor' name='fp-OptionsArray[BackgroundColor]' type='color' value='{$options['BackgroundColor']}' />";
    echo "<div float='left'>" . $_POST['fp_BackgroundColor.value'] . "</div>";
}

Upvotes: 2

Views: 9547

Answers (2)

Abdulfattah Alhazmi
Abdulfattah Alhazmi

Reputation: 301

On your HTML5 part:

  <form action="" method="post">
     Select you favorite color:
     <input name="clr" type="color">

     <input type="submit" name="submit">
 </form>

On the php part:

      <?php 
         if(isset($_POST['clr']))
           $selected_color= $_POST['clr'];

         // To show Hexadecimal code of the selected color 
         echo "Color code is:  " . $selected_color;
      ?>

To preserve/keep the selected color after form submission assign the color submitted to the server back into "value" attribute of input form. i.e The input of color type would look like this:

   <input name="clr" type="color" value="<?= htmlspecialchars($_POST['clr']) ?>">

Upvotes: 4

Sachin9
Sachin9

Reputation: 150

dont take name as array.take it as a simple variable

   <input type='color' id='fp_BackgroundColor' name='fp-BackgroundColor' type='color' value='<?php if(isset($_POST['submit'])){echo $fp-BackgroundColor;} ?>' />

and 1 more imp thing.... u have to specify the input 'type'

Upvotes: 0

Related Questions