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

Wappler General How To
#1

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:

1 Like
#2

What if you make the form a Server Connect Action but don’t specify anything in the Action field? Just thinking out loud Antony, aka brain farting… Maybe this will stop the form submitting?

#3

Hello Antony,
Submitting form by using a submit button and submitting it using javascript .submit() are two different things for the browsers.
That’s the reason why the form.addEventListener('submit', function (ev) { does not detect the submission, when using .submit().
This event only fires when it is activated by an user - and does not fire when activated by javascript.

#4

Thanks for clarifying that for me @Teodor!

Do know how I can achieve what I want to achieve?

I really don’t know much about Javascript - that is why I use Wappler! :slight_smile:

#5
  1. Create a button inside the form. Set class d-none.
  2. Set the dmx-on:click of button to submit the form. (Or, you can make it a submit button. I don’t use it this way because user may hit ‘enter’ on an input and that will invoke the hidden ‘submit’ button click also.)
  3. In JS, do a click event on the button. Eg: $("#btnSubmitHidden").click()
  4. This will submit the form “Wappler-way”, and it will not reload the page.
#6

@sid, you are a genius.

Thank you soooooo much, that worked perfectly! :rocket: