Question

I would like to add a small code snip to check out whether an option is selected
This usually is easily done if the page is html, now my code snip looks something like this

echo "<td>Language</td>";
echo "<td><select id='language' name='language'>
            <option value=''>Select...</option>
            <option value='en_US'>English(US)</option>
            <option value='en_AU'>English(AU)</option>
            <option value='en_UK'>English(UK)</option>
          </select><span id="info"></span>
      </td>";   

if it is html

<script>
   $('#language').change()
   {
     if('Select...'==$('#language').text())
     {
        $('#info').html("Please select a value...");
     }
   }
</script>

[UPDATE]

I would like to add that the above php source code used to generate html code is put in a form tag that is

echo "<form action='checkdb.php' method='POST'>
    // all above and more
    </form>"

the page checkdb.php used the posted data to update database.

How can I add in the jquery code piece as mentioned in the current file (the file with the html code is being generated) ? I am thinking as people once told me that javascript can’t be called in the middle of the php execution and I wonder if I may need to use ajax get function. Please offer some help. Thank you.

Answer 1

// Listen, and respond to, the change even on our select
$("#language").on("change", function(e){
  // Set the html content of our info element
  $("#info").html(function(){
    // If the selected option has no value, ask to select a value
    return e.target.value === "" ? "Please select a value." : "" ;
  });
// Trigger upon page load
}).trigger("change");

Demo: http://jsbin.com/owaqaz/2/edit

Note the last line, $.trigger("change") – this will cause the page to immediately populate the #info element if the select element currently has no value.