Copied to clipboard

Flag this post as spam?

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


  • Fredrik Esseen 590 posts 805 karma points
    Jan 24, 2017 @ 16:10
    Fredrik Esseen
    1

    Multiple forms

    Noob-question:

    I have multiple forms on the same page and when submitting all success divs is triggered. Is it possible to only show it for the form being submitted..?

  • Nicholas Westby 1902 posts 6356 karma points c-trib
    Jan 24, 2017 @ 17:25
    Nicholas Westby
    0

    I am assuming you are rendering your forms using some variation of this approach: http://www.formulate.rocks/render-form

    If so, I can imagine the scenario you explain happening if you are sharing the same JavaScript status variable amongst all of your forms:

    Status Variable

    One way to avoid that would be to create an Angular directive that shows the status (i.e., unsubmitted, success, failure). By wrapping all that up in a directive, you can isolate the Angular $scope, which will ensure your status variables only affect one form at a time.

    Let me know if you need any tips on how to do that.

  • Fredrik Esseen 590 posts 805 karma points
    Jan 25, 2017 @ 08:00
    Fredrik Esseen
    0

    As Im a total beginner in Angular I feel out on deep water here :) I would be grateful for some example code!

  • Nicholas Westby 1902 posts 6356 karma points c-trib
    Jan 25, 2017 @ 08:07
    Nicholas Westby
    0

    Sure thing. I'll work on an alternative version of that page that shows how to make use of an Angular directive. In the meantime, if you've deviated from the instructions, would be useful to know so I can be sure to answer in the most appropriate way possible.

    Here are the instructions I'm talking about: http://www.formulate.rocks/render-form

  • Fredrik Esseen 590 posts 805 karma points
    Jan 25, 2017 @ 08:26
    Fredrik Esseen
    0

    Thanks!

    I used the exact same code as you so Im trying to not mess anything up :)

  • Nicholas Westby 1902 posts 6356 karma points c-trib
    Jan 26, 2017 @ 05:41
    Nicholas Westby
    0

    After looking into this a bit, I think it was simply a bug in Formulate that was broadcasting the form submission status event too broadly (causing it to be picked up by all forms on the page). I think I have it fixed in this commit: https://github.com/rhythmagency/formulate/commit/13cfd73a5b051362327031dcb822b3bdaa3b5a93

    I'm going to run it by a coworker tomorrow before I create a release with this fix.

  • Fredrik Esseen 590 posts 805 karma points
    Jan 26, 2017 @ 07:10
    Fredrik Esseen
    0

    Super! Thanks for fast support!

  • Nicholas Westby 1902 posts 6356 karma points c-trib
    Jan 26, 2017 @ 20:53
    Nicholas Westby
    100

    FYI, I just released Formulate 1.2.5, which contains a change for the propagation of events, which I believe will fix your issue (i.e., only one success message will appear when you submit a form on a page with multiple forms).

    Let me know if that works for you.

  • Fredrik Esseen 590 posts 805 karma points
    Jan 27, 2017 @ 09:37
    Fredrik Esseen
    0

    Work perfect! Thank you!

  • Angelo 78 posts 179 karma points
    Sep 25, 2018 @ 20:49
    Angelo
    0

    Hello Nicholas im having problems rendering my second form on hte same page (forms are inside bootstrap tabs) it does not show :(

    this is what im doing :

    <script>
    var app@(sFormName) = angular.module("app@(sFormName)", ["formulate"]);
    app@(sFormName).controller("formWrapper@(sFormName)", function ($scope) {
        $scope.status = "pending";
        $scope.$on("Formulate.formSubmit.OK", function () {
            $scope.status = "success";
            $('form').each(function() { this.reset() });
            showAlertWithButton("@Umbracos.GetTranslation(Model.MacroParameters["title"].ToString())", "@Umbracos.GetTranslation(Model.MacroParameters["message"].ToString())","Ok", null);
        });
        $scope.$on("Formulate.formSubmit.Failed", function () {
            $scope.status = "failure";
            showAlertWithButton("@Umbracos.GetTranslation("Error")", "@Umbracos.GetTranslation("Error on submit")","Ok", null);
        });
    });
    

    @Html.Partial("~/Views/Partials/Formulate/RenderForm.cshtml", vm)

    but the second form does not appear is that something more that i have to change ?

    let me tell you that im rendering this in a macro. That is why i have the variable "sFormName" to avoid clashing with ohter instances of the same macro

    thank you

    Angelo

  • Nicholas Westby 1902 posts 6356 karma points c-trib
    Sep 25, 2018 @ 21:16
    Nicholas Westby
    0

    Hi Angelo,

    I don't see why you are doing angular.module("app@(sFormName)"). I would think that would cause problems, as I would think you only have one AngularJS app on the page (at least, you should). Similarly, you should only have one ng-app="app" on the page (typically, on the body tag).

    Also, I don't think you need to define your AngularJS controller in your macro (i.e., you should only need one per page).

    It may help to refer again to this page, which shows some example markup/JavaScript: http://www.formulate.rocks/render-form

  • Angelo 78 posts 179 karma points
    Sep 26, 2018 @ 08:30
    Angelo
    0

    mmmm ok ... the problem can be the fact that im enstaciating this macro twice with the same JS

    let me try with only one call to the angular js

    thank you once again

    Angelo

Please Sign in or register to post replies

Write your reply to:

Draft