Form submission using AngularJS/AJAX

Question

So normally, I would submit my forms using AJAX which will capture the form data, pass it to my PHP and the receive back any response from my php with the code below;

<script>
    $("input#submit").click(function() {
        $("#login-form").submit(function(e) {
            $('#loader').show();
            // Client side validation
            if ($("#email").val() == "" || $("#password").val() == "") {
                $('#loader').hide();
                fieldError();
            }
            else {

                var postData = $(this).serializeArray();
                var formURL = $(this).attr("action");

                $.ajax(
                    {
                        url : formURL,
                        type: "POST",
                        data : postData,
                        success:function(response) 
                        {
                            switch(response) {
                                case "Valid":
                                    $('#loader').hide();
                                    $('#login-form').trigger("reset");
                                    window.location.href="index.php";
                                    break;
                                case "not eValid":
                                    $('#loader').hide();
                                    emailError();
                                    break;
                                case "not aValid":
                                    $('#loader').hide();
                                    window.location.href="cverify.php";
                                    break;
                                case "not Valid":
                                    $('#loader').hide();
                                    credError();
                                    break;
                            }
                        }
                    });
            }
            e.preventDefault(); //STOP default action
            e.unbind();
        });
    });
</script>

I now have a form which uses Angular that I want to submit the same way as above bu doesn't seem to be working. In this form I'm using a button as submit.

<button type="submit" 
        id="submit"
        class="btn btn-fluid-full btn-primary btn-large" 
        ng-disabled="!blockCheckout()">
    Checkout
</button>

Using my form submission code from above replacing input#submit with button#submit isn't working and I'm just navigated to my form's action URL.

Any help appreciated

Answer 1

You can use ng-submit directive on form tag.

Syntax

<form
  ng-submit="expression/function">
...
</form>

Example

<form ng-submit="submit()">

Now, you can define the submit function in your controller, which calls a service (Ajax) to submit form data.

To stop redirection, remove type="submit" attribute from button tag.

Reference