How do I POST when a dropdown is selected then popup a jquery overlay filed with data from a sql database?

Question

I'm trying to create a jquery overlay displaying results from a sql database. The results come from a select statement with php that was populated from the information received from an html select dropdown. Once the user has confirmed they've read, I want to update the database to reflect this and allow for the user to continue completing the original form.

I can't figure out how to submit the original form, then pop up the overlay, submit the form on the overlay, but keep the original page allowing it to be completed.

So this:

    <form action="myformpage.php" method="post" id="myform">
     <select id="username" onchange="this.form.submit()">
      <option value='01'>User 1</option>
      <option value='02'>User 2</option>
     </select>

     <select id="location">
      <option value='north'>North</option>
      <option value='south'>South</option>
     </select>
    <input id="subbut" type="submit" value="SUBMIT" style="display: none;" />   
    </form>

jquery:

    <script type="text/javascript">
    $(document).ready(function () {
      $("#popup").overlay();
      $("#confirm").click(function() {
        $("#popup").overlay().close();
    var dataString = 'confirmread=Y';

  $.ajax({
  type: "POST",
  url: "read_message.php?",
  data: dataString,
  success: function() {
    $('#location').show();
    }
  });
      });
    </script>

Oddly the submit button never works when style is set to none. (Side question: Is this because it was never visible to the browser at load?)

Answer 1

You'll want to do an ajax post and generate the popup (probably via jQuery UI) with a successful post:

html:

 <select id="username">
  <option value='01'>User 1</option>
  <option value='02'>User 2</option>
 </select>

jquery:

$("#username").change( function() { 
    $.post( "myformpage.php", {username: $(this).val()}, function( data ) {
      // Create popup here

    });
});

your "myformpage.php" can take care of the database stuff and return whatever you want in your popup.

Answer 2

You don't even have to check for it if you want to do it like this.

        <?php 

//your connection to db goes here

          $message = "SELECT `message` FROM......";
          $test="true"
      ?>
      <script type="text/javascript">
       function checkit()
         {
           alert("<?php $message; ?>");
         }
      </script>
    <?php

2 options !!!

1. using a redirect

     ?> <script> window.location.href="your page.php"; </script> 

2. using css to hide & show

     $var="display:none;"; if($test=="true") { $var=""; } ?> 

   HTML

     <div style="<?php echo $var; ?>" name="original form" > your original form goes here </div> 

Answer 3

You need ajax for this, is easy with jQuery.

with jQuery you need to do something like this:

<script>

$(function(){

     $("#username").change(function(){

            $.post("myformpage.php",{ value : $(this).val(), function(data){
                 alert(data);
            });
      });
});

</script>

You can't style the default alert, you need to make your own dialog or use a library that can do that, like jQuery ui.

EDIT

Yes IE have problems when you submit a form from javascript without a submit button but i recommend you to dont use that way to submit because this will do a postback that you dont need.

Try something like this:

<script>
$(function(){

    $("#username").change(function(){

          $.post("retrievedata.php",{ username : $(this).val() },function(data){
                $("#popup").html(data);
                $("#popup").overlay();
          });

    });

    $("#confirm").click(function() {

        $("#popup").overlay().close();

        var dataString = 'Y';

        $.post("read_message.php",{confirmread:dataString},function(){
             $('#location').show();
        });

    });

});
<script>