xop32 xop32 -3 years ago 50
HTML Question

Disable page background on button submit click

I have a html page where I have placed a paypal check out button and stripe pay now button.

When the paypal check out button is clicked i wanted to disable the page just like clicking a modal popup in bootstrap, until the next paypal page is loaded

clicking a default stripe button I have on my page does this already.

when the paypal button is clicked there is a small delay from clicking the button, until the paypal page loads, so disabling the page after the paypal button click would stop users clicking anything else during the small wait time.

<form action="paypal_checkout.php" method="post" autocomplete="off">
<input type="hidden" name="product" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="bookingid" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="price" value="<?php echo $singleUserBooking[0]['booking_price']; ?>">
<input type="hidden" name="currency" value="<?php echo strtoupper($singleUserBooking[0]['booking_currency']); ?>">
<input type="image" src="assets/images/payment/gold-rect-paypalcheckout-34px.png" alt="Submit">
</form>


how click I disable the page / background on the button click in the form above

I am using twitter bootstrap in my page theme

what would be the simplest why to achive this, thanks

Answer Source

Just surround your page content in a div, and hide it when you want.

For example:

<form id="Form1" method="post" runat="server">
  <div id="mainContent">
    some text
    <br> some more text
    <br> even more text
    <br>
    <input onclick="JavaScript: hideContent();" type="button" value="Hide Content">
  </div>
  <input onclick="JavaScript: showContent();" type="button" value="Show Content">
</form>
<script type="text/javascript">
  <!--
  function hideContent() {
    document.getElementById('mainContent').style.display = 'none';
  }

  function showContent() {
    document.getElementById('mainContent').style.display = 'block';
  }
  // -->
</script>

Edit:

To give it some kind of overlay (blacked out) you could do something like this: Example.

And you could also disable page contens like so:

document.getElementById("btn1").disabled = true; 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download