Copied to clipboard

Flag this post as spam?

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


  • Nathan Woulfe 422 posts 1580 karma points MVP 3x c-trib
    Apr 08, 2015 @ 01:10
    Nathan Woulfe
    0

    BeginUmbracoForm + ng-submit

    Is it possible to submit an MvcForm using AngularJS? I'm rendering the form like so:

    @using (Html.BeginUmbracoForm("Action", "Controller", FormMethod.Post,
        new { name = "enquiryForm", ng_controller = "FormCtrl", novalidate = true, ng_submit = "submitForm()" } ))
    {
        ... // form fields
        @Html.LabelFor(m => m.Message)
        @Html.TextAreaFor(m => m.Message, new { ng_model = "formData.message", required = true })
    }
    

    Controller is simple, but will ultimately include a service reference to post the form:

    .controller('FormCtrl', ['$scope', function ($scope) {
    
        $scope.formData = {};
        $scope.submitForm = function () {
            console.table($scope.formData);
        };
    } ]);
    

    At the moment, the submitForm method is not called. Angular knows about the form as the validation classes are all set correctly.

    I want to submit using AngularJs and fallback to the browser POST if javascript is not available.

  • Peter Kongyik 28 posts 170 karma points
    Apr 08, 2015 @ 01:35
    Peter Kongyik
    0

    Hi!

    ng-form documentation: https://docs.angularjs.org/api/ng/directive/ngSubmit

    I think since your form has the "action" attribute your directive is not called. However you could submit your form if you subscribed to your button's click event and do: angular.element("#formId").submit() or with jquery: $("#formId").submit(); Of course the default event needs to get prevented.

    So as a demonstration I'd use jQuery:

    $(".submit-button").on("click", function (event) {
        // prevent the default event - form won't get submited unless you manually do
        event.preventDefault();
    
        // do whatever you need before submitting
    
        // then submit
        $("#formId").submit();
    });
    

    cheers, Peter

  • Nathan Woulfe 422 posts 1580 karma points MVP 3x c-trib
    Apr 08, 2015 @ 01:56
    Nathan Woulfe
    0

    Thanks Peter, not sure how I missed that given it's the first freaking line of the Angular docs...

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies