Benza Benza - 2 years ago 103
Javascript Question

Show modal when [submit, action] button clicked

I'm trying to make a modal appear to show Payment Status: Pending when the button is clicked, the form also uses it's action feature and opens a new window using target="_blank".

I want to open the modal and new window at the same time.
I have tried using javascript, jquery but none of them showing the modal when I click on the button. When I load modal on the page document ready, it works. But i don't want that.

My code

<div class="modal fade" id="Loading_purchase_status" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Loading Payment Status</h4>
</div>
<div class="modal-body">
<div class="alert alert-primary" role="alert">
<h4><i class="alert-ico fa fa-fw fa-ban"></i><strong>Loading your payment status!&thinsp;</strong></h4>
Current Status: Awaiting Payment...
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
$('#please_wait').fadeOut(7000);
$('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");
});
$('#paypal_submit').click(function () {
$('#Loading_purchase_status').modal('show');
});
</script>


Then my form with the button i want to show the modal when clicked :

<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST" target="_blank">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="<?php echo $site_config->grabSiteSettings_manual($con, 'paypal_address'); ?>">
<input type="hidden" name="item_name" value="<?php echo $name; ?>">
<input type="hidden" name="item_number" value="<?php echo $id; ?>">
<input type="hidden" name="amount" value="<?php echo $price; ?>">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="username=<?php echo $username; ?>&product= <?php echo $name; ?>">
<input type="hidden" name="notify_url" value="<?php echo $site_callback; ?>">
<input type="hidden" name="return" value="<?php echo $site_return_success; ?>">
<input type="hidden" name="cancel_return" value="<?php echo $site_return_canceled; ?>">

<button type="submit" class="btn btn-danger" id="paypal_submit"
style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float:left; margin-left: 9%;">
<i class="fa fa-paypal"></i>aypal
</button>
<button type="submit" class="btn btn-danger"
style="vertical-align : bottom; margin-bottom: 15px; display: block; width: 40%; float: right; margin-right: 9%;">
<i class="fa fa-btc"></i>itcoin
</button>
</form>


I want a button with the
id="paypal_submit"
to show modal when clicked, but also need to show the new window with the form action url

Answer Source

You need to register the click function inside document.ready like this :

<script>
    $(document).ready(function() {
        $('#please_wait').fadeOut(7000);
        $('.itm_purchase_content').hide(0).delay(5000).fadeIn("slow");

     $('#paypal_submit').click(function (e) {
       e.preventDefault();
        $('#Loading_purchase_status').modal('show');
    });

    });

    </script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download