How to make a button pop up info and remain in the same page before going to another page?

Question

I am currently in "joinus.php" page. Upon clicking the button, it should popup a message box stating a few lines. Upon closing the message box, it should be in the same page. By clicking the button again, it should go to "joinus_2.php". Is that possible.? If yes, how can we do that.?

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

score 0 · Answer 1 · answered Apr 23 '20 at 16:14

The actual functionality you describe may not be the best way to do something like have an user accept some terms, but I'll try to answer you exact question.

This is something you'd probably handle client-side in javascript, first intercepting the form action and displaying your message or alert, then noting that it had been shown, then on the second click letting the default action take place.

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>

There are lots of examples already available though on how to show confirmation or messages before proceeding with submitting a form, the simplest of which might be an inline confirmation dialog:

    <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

Traian GEICU · Answer 2 · 2020-04-23T16:22:41.850

One way to achieve that is to use AJAX call.(maybe the best)
With form the output HTML will be derived from joinus_2.php, so need to render the initial_HTML_withButton plus additional details (what is display after button is clicked from php).Working also but why you should regenerate the initial_php ? (Ajax is very useful here since it's keeps the original page + info derived from php_return)

Suggest to use a library eg:Jquery and could find lot's of example of invoking 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";

How to make a button pop up info and remain in the same page before going to another page?

2 Answers2