textbox color doesn't change with combobox selection in php

[Sophia_1]

<script>

function calculateText(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";



  } else if (form.Selfrating1.value == "Mixed") {


 form.T11.value = "#FFFF00";

} else if (form.Selfrating1.value == "Problematic") {
  form.T11.value = "#FF0000";
}


  }

</script>

<p>a.i.Self Rating(1st Rating): <select name="Selfrating1" onchange="calculateText(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>
<option value=Mixed <?php if($row['Selfrating1']=='Mixed') { echo "selected"; }?>>Mixed</option>
<option value=Problematic <?php if($row['Selfrating1']=='Problematic') { echo "selected"; }?>>Problematic</option>

</select>
<input type="color" name="T11" onchange="calculateText(this)"></p>

[Bachu]

Wrap your code with form (<form></form>) tag.Like

<form>
<p>a.i.Self Rating(1st Rating): <select name="Selfrating1" onchange="calculateText(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>
    <option value=Mixed <?php if($row['Selfrating1']=='Mixed') { echo "selected"; }?>>Mixed</option>
    <option value=Problematic <?php if($row['Selfrating1']=='Problematic') { echo "selected"; }?>>Problematic</option>

</select>
<input type="color" name="T11" onchange="calculateText(this)"></p>
</form>

[Sophia_1]

Hi, tried to put in the form tag but still no change of color for textbox. Please advise. Tq

[Bachu]

This code is working on my PC.

<script>

    function calculateText(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";
    } else if (form.Selfrating1.value == "Mixed") {
    form.T11.value = "#FFFF00";
    } else if (form.Selfrating1.value == "Problematic") {
    form.T11.value = "#FF0000";
    }
    }

</script>

<form>
<p>a.i.Self Rating(1st Rating): <select name="Selfrating1" onchange="calculateText(this)">

    <option selected>Please select an option</option>
    <option value="Good" >Good</option>
    <option value="Satisfactory" >Satisfactory</option>
    <option value="Mixed" >Mixed</option>
    <option value="Problematic">Problematic</option>

</select>
<input type="color" name="T11" onchange="calculateText(this)"></p>
</form>

Which browser/Version you are using ?

[Sophia_1]

Hi, am using google chrome browser. Thanks.