如何将模态框中的选定值传递给PHP？

Question

我有代码初始化模式盒：

<script> 
var grid_modal_options = { 
    height: 'auto', 
    width: '80%', 
    modal: true 
}; 
function showProductsModalBox() { 
    $("#products_modal_box").dialog(grid_modal_options); 
    $("#products_modal_box").parent().appendTo('form:first'); 
} 
</script> 

<div id="products_modal_box" title="Products" style="display: none;"> 
    <div class="in"> 
    <div class="grid-12-12"> 
     <form id="products_modal_box_form" action="#" method="post"> 
    <table> 
      <thead> 
      <tr> 
       <th>&nbsp;</th> 
       <th>Product</th> 
      </tr> 
      </thead> 
      <!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /--> 
      <tbody> 
      <?php 
      //read the results 
      while($fetch = mysqli_fetch_array($r)) {     
       print "<tr>"; 
       print " <td><a href='#'>Choose</a></td>"; //--> How to return the value of $fetch[0]? 
       print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID 
       print "</tr>"; 
      } 
      ?> 
      </tbody> 
     </table> 
     </form> 
    </div> 
    </div> 
</div> 

和：

<input type='text' id='products_id_textbox' name='products_id_textbox' /> 
<a href='#' onclick='showProductsModalBox(); return false;'>Choose products</a> 

的代码是否能够成功，显示模式对话框。但是如何将用户选择的“产品”返回到文本框“products_id_textbox”？谢谢。

Answer 1

添加内嵌的JavaScript：

<?php 
    while($fetch = mysqli_fetch_array($r)) {     
     print "<tr>"; 
     print " <td><a href=\"javascript:;\" onclick=\"$('#products_id_textbox').val('".$fetch[0]."');$('#products_modal_box').dialog('close');\">Choose</a></td>"; //--> How to return the value of $fetch[0]? 
     print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID 
     print "</tr>"; 
    } 
?> 

Answer 2

而不是使用内联JS，你可以这么写（或者是这样的）;

// php 
while($fetch = mysqli_fetch_array($r)) {     
    print "<tr>"; 
    print " <td><a rel='dialog' data-id='{$fetch[0]}'>Choose</a></td>"; 
    print " <td>{$fetch[0]}</td>"; 
    print "</tr>"; 
} 

// js 
$(document).ready(function(){ 
... 
$("a[rel=dialog]").each(function(){ 
    var id = this.getAttribute("data-id"); 
    $('#products_id_textbox').val(id); 
    $('#products_modal_box').dialog('close'); 
});