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

can you please make the fiddle of your issue? do you put any validation on your form? — Jay Patel
– Jay Patel, Commented Dec 4, 2015 at 11:38

Vivek · Accepted Answer · 2015-12-27 01:52:50Z

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

edited Dec 27, 2015 at 1:52

answered Dec 4, 2015 at 11:40

Vivek

13.6k19 gold badges101 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Form submission using AngularJS/AJAX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related