Can You Help Me? Javascript Function Call Causing Page to Re-load

I have a form which calls Stripe via some javascript that Stripe supply.

The form payment_form is defined like this on the page:

<form id="payment_form" method="post" is="dmx-serverconnect-form">
	<div id="card-element">
		<!-- Stripe Elements will create card input fields here -->
	</div>								
	<button id="b_pay_now" class="btn btn-success" type="submit">Pay Now</button>
</form>

And the Stripe Javascript looks like this:

<!-- Stripe elements/js script -->
<script src="stripe.js"></script>

<script>
	var form = document.getElementById('payment_form');

	form.addEventListener('submit', function (ev) {
		ev.preventDefault();
		stripe.confirmCardPayment(dmx.parse("manage_stripe_payment_intent.data.stripe_client_secret"), {
			payment_method: {
				card: card,
				billing_details: {
					name: dmx.parse("to_be_paid_by.value"),
				}
			}
		}).then(function (result) {
			if (result.error) {
				// Code to show error
			} else {
				// Payment successful - Code to process payment data
			}
		});
	});
</script>

This all works perfectly.

So now as my design evolves, I want to call a Server action first, and then if the result of that is successful then I want to to submit the payment to Stripe.

To do this, I need to perform a payment_form.submit() type function. However I can’t do this in Wappler as it is not a server action based form.

So I have defined a javascript function to do it:

<script>
   function submit_payment_form() {
     document.getElementById("payment_form").submit();
   }
</script>

I call this function from a flow:

<script is="dmx-flow" id="flow_submit_payment_form" type="text/dmx-flow">{
  runJS: {function: "submit_payment_form", name: "submit_payment_form"}
}</script>

And for testing purposes, I call the flow from a button:

<button id="b_pay_now2" class="btn btn-success" dmx-on:click="flow_submit_payment_form.run()">Pay Now Function Call</button>

My expectation is that this will submit the payment_form in the same way.

However it actually causes the whole page to re-load like I had clicked the browser’s refresh button.

Can anyone tell me what I am doing wrong? :thinking:

Community Page
Last updated: