如何使按钮弹出信息并在转到另一个页面之前保持在同一页面中？答案

【问题标题】：How to make a button pop up info and remain in the same page before going to another page?如何使按钮弹出信息并在转到另一个页面之前保持在同一页面中？
【发布时间】：2020-08-07 00:45:50
【问题描述】：

我目前在“joinus.php”页面。单击按钮后，它应该会弹出一个消息框，说明几行。关闭消息框后，它应该在同一页面中。通过再次单击该按钮，它应该转到“joinus_2.php”。那可能吗。？如果是，我们该怎么做？

<form action="joinus_2.php">
                <button type="button"  class="btn btn-info">Proceed</button>
</form>

【问题讨论】：

标签： php html web

【解决方案1】：

实现这一目标的一种方法是使用 AJAX 调用。（也许是最好的）
form 的输出 HTML 将来自 joinus_2.php，所以需要渲染 initial_HTML_withButton 以及其他细节（从 php 单击按钮后显示的内容）。也可以工作，但为什么要重新生成 initial_php ？（Ajax 在这里非常有用，因为它保留了从 php_return 派生的原始页面 + 信息）

建议使用一个库，例如：Jquery，并且可以找到很多调用 AJAX 的示例。

//load ajaxjs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
//handler js that will intercept button click and invoke through Ajax_GET php
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.ajax({url: "...joinus_2.php", success: function(result){
$("#ajaxResult").html(result);
}});
});
});
</script>
<button id="button1" ...>CallWithAjax</button>
<div id="ajaxResult">WillBeUpdatedFromPhpResponse</div>

//joinus_2.php
<?php> echo "return Text";

【讨论】：

【解决方案2】：

您描述的实际功能可能不是让用户接受某些条款之类的最佳方式，但我会尽力回答您确切的问题。

这是您可能会在 javascript 中处理客户端的事情，首先拦截表单操作并显示您的消息或警报，然后注意到它已被显示，然后在第二次单击时让默认操作发生。

let shownWarning = 0

function showWarning() {
    if (shownWarning == 0) {
    window.alert('your message here');
    shownWarning = 1
    return false;
    }
    return true;
}

<form onclick="return showWarning()" action="">
    <button type="button"  class="btn btn-info">Proceed</button>
</form>

在继续提交表单之前如何显示确认或消息已有很多示例，其中最简单的可能是内联确认对话框：

    <form onsubmit="return confirm('By proceeding you agree to everything .....');">

JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

Add a confirmation alert before submitting a form

【讨论】：