Problem submitting 2 forms on spa page

I’ve created a SPA which must have 2 forms – One for login username & password fields and the next one in the page order for a separate form processed by a different API for inserting the form fields to a table.

However, clicking the 2nd form Submit button only runs the 1st login API , not the form API whose button I click.

If this 2nd form is run as a separate page the form is processed by my insert API. But not when included into my SPA page.

I’ve tried to differentiate the buttons so that each Submit button refers to just its appropriate form like this –
Form 1 at top of SPA page works fine as the Action on Submit processes the Login API –
Top of form for login Submit –
<form dmx-param="" action="…/dmxConnect/api/loginvalidate.php" dmx-on:success=“browser1.goto(‘http://localhost:8888/trainings/trainingslogin.php’)” dmx-on:unauthorized="browser1.goto(‘http://localhost:8888/trainings/trainingslogin.php’); is=“dmx-serverconnect-form” name=“serverconnectform1” id=“serverconnectform1” method=“post” />

The referring Submit Button –
<button id="trainings_login" class="btn btn-primary" value="serverconnectform1" type="submit">Hier eingeben</button>

Form 2 –

<form is="dmx-serverconnect-form" name="serverconnectform2" id="serverconnectform2" method="post" action="../dmxConnect/api/myforminsert.php" dmx-generator="bootstrap5" dmx-form-type="vertical" dmx-on:submit="" dmx-bind:action="">

`

and the referring Submit button for this form –
<button class="btn btn-primary" id="serverformconnect2" dmx-bind:value="serverconnectform2" type="submit">Save</button>

Each works as separate page forms to authorize the login of the user
and the Form to collect their option choices and insert them into the table.

But on the SPA page using both forms when the second button is clicked the insert API specified in the form action for “serverformconnect2” is not activated and the form not saved.

As a try-out, could you remove type="submit" and replace it with a mouse on-click event with an action to submit the form as in:

<button class="btn btn-primary" id="serverformconnect2" dmx-bind:value="serverconnectform2" dmx-on:click="serverconnectform2.submit()">Save</button>
1 Like

Thanks, Ben!
I’m going to try this out.

But yesterday when I was thinking “Make this a javascript toggle action instead of Submit”
I went through the different Properties and what they offered and I didn’t see how to come up with your code.

Use a Dynamic Event > Mouse > Click

2 Likes

Thanks so much, @ben :ukraine: & @bpj :ukraine:

I would love to see complete complex projects that are downloadable as Projects where I could see the results and consult the Wappler UI to see where I should have applied a problem-solver!

1 Like