如何在使用模式框的混合Form/HEF链接中添加其他GET参数

How to add additional GET parameters in a mixed Form/HREF link that uses a modal box?

本文关键字：链接 HEF 添加 参数 GET 其他 Form 混合 模式      更新时间：2024-02-12

我遇到了一个有点棘手的问题。

首先，对于那些将首先运行我的代码片段的人来说——当您运行我的示例并单击Generate时，您将首先看到一个模态框，它（在我的后端）首先读取$_GET数据。我的提交机制使用A HREF方法，我希望通过表单或其他方式向该方法添加更多数据，以供接收页面读取。

在下面的HTML源代码中，观察：

  • 我有一个指向portal.php的链接，其中包括查询参数
  • 单击该链接将启用modal_box机制
  • 我的链接是一个按钮

我需要有一种方法来添加数据（GET或POST），这些数据将在单击该按钮时提交，并由生成的页面（在我的示例中为portal.php）接收。

例如，我希望能够在我的接收页面上打印以下内容：

$_GET['p'] == 'select';
$_GET['coverpage'] == 'standard';

如何？

代码段如下：

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <meta charset="utf-8" />
  <title>T</title>
  <script>
    $(document).ready(function() {
      $(".modal_box").click(function() {
        $("#iframe_dialog_box").attr('src', $(this).attr("href"));
        $("#div_modal_box").dialog({
          width: 300,
          height: 200,
          modal: true,
          close: function() {
            $("#iframe_dialog_box").attr('src', "about:blank");
          }
        });
        return false;
      });
    });
  </script>
</head>
<body>
  <div id="div_modal_box" title="portal.php?p=select" style="display:none;">
    <iframe id="iframe_dialog_box" width="100%" height="100%"></iframe>
  </div>
  <form METHOD="GET">
    <input type="radio" name="coverpage" value="standard" checked="checked">standard
    <br>
    <input type="radio" name="coverpage" value="more">more
    <br>
    <a href="portal.php?p=select&amp;action=print" class="modal_box">
      <button type="submit">Generate</button>
    </a>
    <script>
      $("button").button();
    </script>
  </form>
</body>
</html>

您的点击处理程序应该从表单中获取值，并在分配iframe src:之前将它们添加到URL中

$(document).ready(function() {
  $("button").button();
  $(".modal_box").click(function() {
    var coverpage = $(":radio[name=coverpage]").val();
    $("#iframe_dialog_box").attr('src', $(this).attr("href") + '&coverpage=' + coverpage);
    $("#div_modal_box").dialog({
      width: 300,
      height: 200,
      modal: true,
      close: function() {
        $("#iframe_dialog_box").attr('src', "about:blank");
      }
    });
    return false;
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<div id="div_modal_box" title="portal.php?p=select" style="display:none;">
  <iframe id="iframe_dialog_box" width="100%" height="100%"></iframe>
</div>
<form METHOD="GET">
  <input type="radio" name="coverpage" value="standard" checked="checked">standard
  <br>
  <input type="radio" name="coverpage" value="more">more
  <br>
  <a href="portal.php?p=select&amp;action=print" class="modal_box">
    <button type="submit">Generate</button>
  </a>
</form>

相关文章：