Can't save and display textbox color after submit button in php and html

[Sophia_1]

Hi everyone, am trying to save and display the text color after select change in php and html. After selecting Selfrating1 ie "Good", the textbox T11 suppose to change to "Green" color. After submit button the text color supposed to be save in mysql and display on the form. The Selfrating1 can be save and display but the textbox color goes back to black and it doesn't save in the mysql. Please advise. Thanks.

    <div id="tabs-1"> <?php
    session_start(); 
    $con = mysql_connect("localhost","user","");
    if (!$con){
    die("Can not connect: " . mysql_error());
    }
    mysql_select_db("p",$con);

    $Picid = $_GET['Picid'];
    $nwQty = "SELECT * FROM progress WHERE Picid = '$Picid'";

    $solution = mysql_query($nwQty);
     if(isset($_POST['submit'])){
    if (mysql_num_rows($solution) == 0){

                        $sql = "INSERT INTO progress(T11,Selfrating1,Picid) VALUES ('" . $_POST["T11"] . "','" . $_POST["Selfrating1"] . "','" . $Picid . "')"; 
                        $result = mysql_query($sql);
                    } 
                    else {

                        $sql =("UPDATE progress SET T11='" . $_POST["T11"] . "',  Selfrating1='" . $_POST["Selfrating1"] . "'
                    WHERE Picid='" . $Picid . "'");
                        $result = mysql_query($sql);
                        echo('Record Updated');
                    }

                    $result = mysql_query("SELECT * FROM progress WHERE  Picid='" . $Picid . "' ");
                    $row= mysql_fetch_array($result); 
                     }
                    ?> <script>
                            function ocalculateText(el) {
                              var form = el.form;
                              var idx = form.Selfrating1.selectedIndex;
                              if (idx <= 0) {
                                form.reset();
                                return;
                              }
                              if (form.Selfrating1.value == "Good") {
                                 form.T11.value = "#008000";
                              } else if (form.Selfrating1.value == "Satisfactory") {
                                form.T11.value = "#9ACD32";

                                }
                              }
     </script> 
     <p>a.i.Self Rating(1st Rating): <select name="Selfrating1" id="Selfrating1" onchange="ocalculateText(this)" value="<?php echo $row['Selfrating1']; ?>" > 
     <option selected>Please select an option</option> <option value=Good <?php if($row['Selfrating1']=='Good') { echo "selected"; }?>>Good</option> 
     <option value=Satisfactory <?php if($row['Selfrating1']=='Satisfactory') { echo "selected"; }?>>Satisfactory</option> 
     </select> 
     <input type="color" name="T11" id="T11" onchange="ocalculateText(this)" value="<?php echo $row['T11'];?>"></p> <input type="hidden" name="Picid" id="Picid" value="<?php echo $row['Picid']; ?>" >
     <td colspan="2"><input type="submit" name="submit" value="Save" class="btnSubmit"></td> </div>

[mattster]

Firstly, mysql_* is dead now - mysqli_* should really be used. Also, there's no housekeeping here!! Your query is a lovely advert for SQL injection! session_start() should be the very first thing on your page: before output of any kind. You also have several messy <option> tags: only one can be selected and you should really output them as a loop.

The Selfrating1 can be save .. but the textbox color .. doesn't save

Well what exactly is being saved and what isn't? All of the columns except that one?

From what I can see, there is nothing calling the javascript function to process the data, which would explain why there isn't any colour changes. For speed, add onbeforesubmit="ocalculateText()" to make sure the JS is called, and then see what happens.

Clearly that function needs cleaning up, as I can't really see why you've done some things - but thats another matter aha.

Hope this is helpful :)

[Sophia_1]

Hi,thanks for your reply. Actually what suppose to happen is:

1. User select option
2. Once option has been selected, textbox T11 will change color based on select option
3. After submit button click, textbox T11 supposed to save color in mysql and display

Currently the problem is on No. 3 as the textbox doesn't save in mysql and doesn't display the color change.

Please advise. Thanks.

[mattster]

But javascript does compute the colour change in the browser? Because you're calling the JS function from two places and it doesn't really make sense. Just before clicking submit, has everything changed in the form (particularly the value of #T11) so that everything should work? (Use Chrome's developer tools to check if you need)

What I'm really getting to, is that apart from the outdated mysql_*, I can't see anything that would cause problems in your PHP. $Picid is being taken from the $_GET, as opposed to $_POST like everything else. Just check that your form is dealing with that correctly.

[diafol]

I don't understand why there is markup before the session_start(). sessin_start() should be one of the first things you have in your file - no whitespace or output before it.

I can't see any form tags - so who knows where this info is going and what's being submitted.

In short, this is a bit of a mess. HTML, JS, PHP, SQL all mixed up to buggery. Nosebleed. Try to separate as far as possible - avoid big chunks of PHP within markup. Place data into variables and just echo them out.

[Sophia_1]

Hi, thank you very much for your reply. Yes the color change in the browser just before clicking submit button. But after clicking submit button, the textbox T11 goes back to black instead of the selected green. Please advise. Thanks a lot.

[Sophia_1]

Hi, tried to include the code below for the submit and before show function but the color still goes back to black after saving the record. Please advise. Thanks.

    <script>
    function ocalculateText(el) {
      var form = el.form;
      var idx = form.Selfrating1.selectedIndex;
      if (idx <= 0) {
        form.reset();
        return; 
      }
      if (form.Selfrating1.value == "Good") {
         form.T11.value = "#008000";
      } else if (form.Selfrating1.value == "Satisfactory") {
        form.T11.value = "#9ACD32";

        }

    $('#T11').T11({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).T11Hide();
        },
        onBeforeShow: function () {
            $(this).T11(this.value);
        }
    })
      }
    </script>