I have a component that has a payment form that uses the Authorize.net
gateway. I want to be able to display a bootstrap modal dialog with payment
confirmation information before the form is actually submitted, but after
the user clicks the submit button.
single_payment_form = SQLFORM.factory(
Field('tenant_name', 'string', label="Tenant Name", length=
255),
Field('payment_amount', 'decimal(10,2)', label="Payment Amount",
requires=IS_DECIMAL_IN_RANGE(0, None, "Enter a positive dollar amount"),
widget=CurrencyWidget.With_Symbol('$')),
Field('payment_method', 'string', label="Payment Method",
requires=IS_IN_SET(payment_methods, zero='Please add a Payment Method to
make payments' if not payment_methods else None), length=20),
table_name = "single_payment_form",
_onsubmit="return confirm_payment();",
submit_button = "Continue")
# process the single payment form
if single_payment_form.process(keepvalues=False).accepted:
...
I tried to set my onsubmit form attribute to a javascript function that
will display the modal dialog, and cancel the form submission by returning
false. When the user clicks the Edit Payment button on the modal dialog,
the form should be re-enabled, but not submitted. Also it should not be
reloaded. When the user clicks the submit payment button the form should be
submitted normally and reloaded:
<div class="modal fade" id="payment-confirmation-dialog" tabindex="-1" role=
"dialog" aria-labelledby="payment-confirmation-dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Payment Confirmation</h4>
</div>
<div class="modal-body" id="payment-confirmation-body">
<h2>confirmation stuff</h2>
</div>
<div class="modal-footer">
<a class="pull-left btn btn-default" type="button" href="javascript:
edit_payment();">Edit Payment</a>
<a class="pull-right btn btn-primary" type="button" href="javascript:
submit_payment();">Submit Payment</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function confirm_payment() {
$('#payment-confirmation-dialog').modal({
show: true,
backdrop: 'static',
keyboard: false
});
return false;
}
function edit_payment() {
var $form = $('#single_payment_form_component form');
$('#payment-confirmation-dialog').modal('hide');
$.web2py.enableFormElements($form);
}
function submit_payment() {
var $form = $('#single_payment_form_component form');
$('#payment-confirmation-dialog').modal('hide');
$form.submit(function () { return true; });
$form.submit();
}
</script>
For some reason, my component is always submitted and reloaded... Always...
even if I set the form's _onsubmit="return false;"
How can I stop the component from submitting and reloading when the submit
button is pressed?
Thanks,
Eliot
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
