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

标签 javascript php jquery

我有一个 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>

关于javascript - 如何在点击按钮并执行PHP代码后自动打开URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35960688/

相关文章:

javascript - 动态调整 JQuery thickbox 窗口的大小

javascript - 我的 Ajax 请求返回成功但脚本没有执行?

php - 如何检查字符串是否是 PHP 中的有效 sha256 哈希?

javascript - 如何使用xsl :copy-of to copy text of XML node and pass to form? 使用CDATA 代替?

jquery - jquery无法检测图像高度

javascript - 重新定义的 toString 的 getOwnPropertyDescriptor 应该是未定义的

javascript - 在时间序列图表 C3.js 中使用数组作为数据源

javascript - 使用 jQuery 编写应用程序 - 如何存储变量?

php - drupal 中每个请求调用的许多查询

javascript - 根据类名,具有不同纬度的多个 map