選擇下拉菜單后，如何通過sql數據庫中的數據彈出jquery疊加層，如何發布信息？

Question

我正在嘗試創建一個jQuery疊加，以顯示來自SQL數據庫的結果。 結果來自帶有php的select語句，該語句是從html select下拉列表中接收的信息填充的。 用戶確認已閱讀后，我想更新數據庫以反映此情況，並允許用戶繼續填寫原始表格。

我不知道如何提交原始表單，然后彈出疊加層，在疊加層上提交表單，但是保留原始頁面以使其完成。

所以這：

    <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>

奇怪的是，將樣式設置為無時，提交按鈕將永遠無法使用。 （旁問：這是因為瀏覽器在加載時從不可見嗎？）

Answer 1

您將要進行ajax發布，並通過成功發布來生成彈出窗口（可能通過jQuery UI）：

的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

    });
});

您的“ myformpage.php”可以處理數據庫內容，並在彈出窗口中返回您想要的任何內容。

Answer 2

如果要這樣做，您甚至不必檢查它。

        <?php 

//您與數據庫的連接在這里

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

2個選擇！

1. 使用重定向

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

2. 使用CSS隱藏和顯示

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

   的HTML

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

Answer 3

為此，您需要ajax，使用jQuery很容易。

使用jQuery，您需要執行以下操作：

<script>

$(function(){

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

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

</script>

您無法設置默認警報的樣式，需要創建自己的對話框或使用可以執行此操作的庫，例如jQuery ui。

編輯

是的，當您從沒有提交按鈕的javascript提交表單時，IE會出現問題，但是我建議您不要使用這種方式提交，因為這將執行您不需要的回發。

嘗試這樣的事情：

<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>