Как сделать так, чтобы кнопка всплывала информация и оставалась на той же странице, прежде чем перейти на другую страницу?

Question

Я сейчас на странице "joinus. php". После нажатия на кнопку должно появиться окно с сообщением о нескольких строках. После закрытия окна сообщения оно должно быть на той же странице. При повторном нажатии на кнопку она должна go к "joinus_2. php". Это возможно.? Если да, то как мы можем это сделать ??

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

Answer 1

Один из способов добиться этого - использовать AJAX вызов. (Возможно, лучший)
При form вывод HTML будет получен из joinus_2.php, поэтому необходимо отобразить initial_HTML_withButton плюс дополнительные сведения. (что отображается после нажатия кнопки с php). Работает также, но почему вы должны восстановить исходные_ 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"; 

Answer 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 Форма отправки - диалоговое окно подтверждения или отмены отправки

Добавить уведомление о подтверждении перед отправкой формы