如何在单击按钮并执行PHP代码后自动打开URL

How to automatically open URL after clicking button and executing PHP code

本文关键字:URL 代码 PHP 单击 按钮 执行      更新时间:2023-09-26

我有一个Joomla网站,我正在尝试自动打开一个带有网页的模态窗口,该网页的参数在URL中传递。

网站功能是这样的:旅行负责人查找旅行,他可以通过单击按钮来安排带领该旅行。 单击按钮时,我有有效的 Php 代码,可以将行程数据保存到日历数据库并检索行的 ID 号。下一步是在 URL 中传递信息后编辑日历组件中的条目。 我在 Php 变量中创建了正确的 URL,但我无法自动打开带有页面的模态窗口进行编辑。

这是我的一些代码:

<form action="" method="post">
    <input type="submit" name="submit" id="submit" value="Lead This Trip" />
<?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {...code to save data to calendar}
?>

最后,我有一个名为 $url 的变量,其中包含用于打开模态网站的正确 URL。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*hide the modal container in the beginning */
#modal {
    display: none;
}
</style>
<!-- this is where your html will populate -->
<div id="modal"></div>
<form action="" method="post">
    <input type="hidden" name="action" id="submit" value="leadteam" />
    <input type="submit" name="submit"  value="Lead This Trip" />
</form>
<script>
// When the page has loaded
$(document).ready(function() {
    /*
      If you need to only have it happen on one or more times, but not every time,
       you can use a selector such as id="whatever" in your form:
       $('#whatever').submit(....etc
       or you want perhaps some but not all forms, use class="whatever" in your form:
       $('.whatever').submit(....etc
    */
    $('form').submit(function(e) {
        // prevent the natural submission of the form
        e.preventDefault();
        // create an ajax instance
        $.ajax({
            /*
               This is the where your edit page is located
               If you were to use different forms, you can use the 
               attr in jquery to grab the action="/whatever.php" in the form
               url: $(this).attr('action'),
               This will allow you to use this same code without copy pasting
               but will then allow for any the forms in your site
             */
            url: '<?php $url ?>',
            // This function turns your submission to a post string
            data: $(this).serialize(),
            // Sends as a post
            type: 'post',
            // If the ajax is successful
            success: function(response) {
                // Fade in the modal window
                $('#modal').fadeIn(function() {
                    // Populate with the content on your edit page
                    $(this).html(response);
                });
            }
        });
    });
});
</script>

这是我粘贴到我的 Php 文件中的相关代码。

你可能想使用 ajax 来实现这一点:

<!-- You need the jQuery library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*hide the modal container in the beginning */
#modal {
    display: none;
}
</style>
<!-- this is where your html will populate -->
<div id="modal"></div>
<form action="" method="post">
    <input type="hidden" name="action" value="leadteam" />
    <input type="submit" name="submit" id="submit" value="Lead This Trip" />
</form>
<script>
// When the page has loaded
$(document).ready(function() {
    /*
      If you need to only have it happen on one or more times, but not every time,
       you can use a selector such as id="whatever" in your form:
       $('#whatever').submit(....etc
       or you want perhaps some but not all forms, use class="whatever" in your form:
       $('.whatever').submit(....etc
    */
    $('form').submit(function(e) {
        // prevent the natural submission of the form
        e.preventDefault();
        // create an ajax instance
        $.ajax({
            /*
               This is the where your edit page is located
               If you were to use different forms, you can use the 
               attr in jquery to grab the action="/whatever.php" in the form
               url: $(this).attr('action'),
               This will allow you to use this same code without copy pasting
               but will then allow for any the forms in your site
             */
            url: '/leadtrip.php',
            // This function turns your submission to a post string
            data: $(this).serialize(),
            // Sends as a post
            type: 'post',
            // If the ajax is successful
            success: function(response) {
                // Fade in the modal window
                $('#modal').fadeIn(function() {
                    // Populate with the content on your edit page
                    $(this).html(response);
                });
            }
        });
    });
});
</script>

您可以通过单击带有 URL 的较小新窗口来打开。

<a href="<?php echo $url; ?>" target="popup" onclick="window.open('<?php echo $url; ?>', 'popup', 'width=900px,height=500px,top=20px,left=20px'); return false;">Open modal Window</a>

如果您不想使用这样的弹出窗口,可以使用 JQuery UI 对话框小部件和 AJAX 查询。

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog" style="display: none;">
  Loading ...
</div>
<script>
 function openModal(){
    var modalurl = "<?php echo $url; ?>";
    $( "#dialog" ).dialog();
    $( "#dialog" ).load( modalurl  );
  }
</script>
  <button onclick="openModal();">Open Modal</button>

查看 https://jqueryui.com/dialog/和 http://api.jquery.com/load/

这里有一个例子 https://jsfiddle.net/t1d35ekk/

我不知道模态窗口是否适合您,如果您想告诉浏览器使用 PHP 打开一个新 URL,您可以设置一个标头:

header( 'Location: '.$url  );
die;

编辑:

也许我理解错了什么,所以我更改了代码:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Trip" style="display: none;">
  Loading ...
</div>
<form action="" method="post">
    <input type="hidden" name="action" value="leadteam" />
    <input type="submit" name="submit" id="submit" value="Lead This Trip" />
</form>
<script>
  $('form').submit(function(e) {
    e.preventDefault();
    $( "#dialog" ).dialog({
         height: 400,
         minWidth:400,
         close: function( event, ui ) {
             window.location.href = "url to open on close";
         }
    });
    $.ajax({
        url: '<?php echo $url; ?>',
        data: $(this).serialize(),
        type: 'post',
        success: function(response) {
              $( "#dialog" ).html(response);
        }
    });
});
</script>