multiple different form on same page and submitting one form after another one triggers validation for first submitted form

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Pravin Giradkar 2 posts 72 karma points

Feb 06, 2020 @ 16:15
0

Multiple different form on same page and submitting one form after another one triggers validation for first submitted form

Using Umbraco And Getting Started

Umbraco 8
I have two different form form1 and form2 on same page, both have fields that require validation.

Here are my steps:
1. The page where two forms are placed is loaded
2. I have filled form 1 and submitted the form.
3. The form 1 is submitted and the Thank you message was shown on page
4. Now without refreshing or reloading the page, I have filled the form 2 and submitted the form 2.
5. The page reloaded and form 2 stays filled with values and is not submitted, and form 1 (which was submitted previously) is showing validation message.
Expected Results : form 1 should be loaded with empty values and form 2 should be submitted and should show Thank you message

Is it a bug in Umbraco form 8.2.0 which needs to be fixed? Or This is just by design? If so, are there any workaround for this problem and how to fix this?

Thank you.
Copy Link
Marc-André 63 posts 279 karma points

Apr 07, 2020 @ 18:47

0

Hi! Did you find a solution for this? I got the same bug in my website and I don't know what to do

Copy Link
Vinícius Reif Biavatti 2 posts 71 karma points

Sep 07, 2021 @ 11:12
0
Hello,

I had the same problem. To have two or more forms in the same page Umbraco Forms doesn't identify the current form properly. I was checking how Umbraco Forms Script targets the current form and I suppose it uses the #submit identifier of the Form.cshtml submit input. In our case, we have two inputs with the same submit identifier because the Form.cshtml is rendered for each form (twice). So, when some of the inputs are actived, both forms are submited.

To solve this problem, I created a script that contains a JS code to change the id of the submit input depending witch form is actived in my page. I used tab buttons to show the current form (actived form), so, I needed just to update the id of the input by the actived tab. The code I used is (using jquery):
```
$(document).ready(function() {
    const formalFormSelector = ".formal-form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-navigation input[type=submit]";
    const applicationFormSelector = ".application-form .umbraco-forms-form form .umbraco-forms-page .umbraco-forms-navigation input[type=submit]";
    $(formalFormSelector).attr("id", "_submit");
    $("#formal-form-btn").click(function() {
            $(formalFormSelector).attr("id", "submit");
            $(applicationFormSelector).attr("id", "_submit");
    });
    $("#application-form-btn").click(function() {
            $(formalFormSelector).attr("id", "_submit");
            $(applicationFormSelector).attr("id", "submit");
    });
});
```
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?