AngularJS ajax form submit with submit input

Question

I have a form which having stepy wizard.For working stepy wizard,it is must to use input submit button not a button.So I am using submit button,but while clicking submit button it is redirecting to main page. My code

<form action="#" id="wizard" class="form-horizontal"  ng-submit="abc($event)">
   <!-- Step 1 -->
   <fieldset title="Step 1">
      <legend>Registration</legend>
      <div class="form-group">
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_number'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"  required="required" ng-model="newItem.housenumber"/></div>
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_house_name'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"  required="required" ng-model="newItem.housename"/></div>
      </div>
   </fieldset>
   <fieldset title="Step 2">
      <legend>Registration</legend>
      <div class="form-group">
      <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_place'); ?></label>
      <div class="col-md-3"><input type="text" class="form-control"  required="required" ng-model="newItem.place"/></div>
      <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_land_mark'); ?></label>
      <div class="col-md-3"><input type="text" class="form-control"   ng-model="newItem.language"/></div>
   </fieldset>
   <fieldset title="Step 3">
      <legend><?php echo $this->lang->line('label_fac'); ?></legend>
      <div class="form-group">
         <label class="col-sm-3 control-label"></label>
         <div class="col-sm-6">
            <label class="radio-inline">
            <input type="checkbox"  ng-model="newItem.electricity"  value="electricity" /><?php echo $this->lang->line('label_electricty'); ?>
            </label>
         </div>
      </div>
   </fieldset>
   <fieldset title="Step 4">
      <legend>Agriculture</legend>
      <div class="form-group">
         <label class="col-sm-3 control-label"></label>
         <div class="col-sm-6">
            <label class="radio-inline">
            <input type="checkbox"  ng-model="newItem.cocunut"  value="cocunut" /><?php echo $this->lang->line('label_cocunut'); ?>
            </label>
         </div>
      </div>
   </fieldset>
   <fieldset title="Step 5">
      <legend> Other</legend>
      <div class="form-group">
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_get_any_help'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"   ng-model="newItem.help"/></div>
         <label for="" class="col-md-2 control-label"><?php echo $this->lang->line('label_source'); ?></label>
         <div class="col-md-3"><input type="text" class="form-control"   ng-model="newItem.source"/></div>
      </div>
   </fieldset>
   <input type="submit" class="finish btn-success btn" value="Submit"/>
</form>

and this is my controller

mahalPlus.controller('familyRegistrationController', function($scope) {

  $scope.abc = function(event){
    event.preventDefault();
    alert('submitted');
  };

});

SomeKittens · Accepted Answer · 2014-01-26 07:31:08Z

3

The preventDefault is redundant, see the docs. You'll just need to remove the action attribute.

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page) but only if the form does not contain an action attribute.

Instead, add ng-app to the appropriate HTML Element and ensure that your controller is properly loaded.

I've created a working example here, where you can see the changes I've suggested.

edited Jan 26, 2014 at 7:31

answered Jan 26, 2014 at 7:10

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

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

1 Comment

Nisham Mahsin Over a year ago

I am using routing for my application,

.when('/family-registration', {       templateUrl: 'api/index.php/templates/family_registration',       controller: 'familyRegistrationController'     })

and I have the function defined inside the controller. Everything working excluding this one.

Milad · Accepted Answer · 2014-06-10 16:36:17Z

2

1- remove action

2- remove $event from ng-submit="abc($event)"

3- You better think about your using of PHP in your tags , this is not a good Idea:(

answered Jun 10, 2014 at 16:36

Milad

28.8k11 gold badges78 silver badges91 bronze badges

Comments

shaunhusain · Accepted Answer · 2014-01-26 06:45:15Z

0

Believe you can just remove the action on the form.

answered Jan 26, 2014 at 6:45

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

1 Comment

Nisham Mahsin Over a year ago

Now the form is not redirecting. But the alert also not working..! Any idea?

Jay · Accepted Answer · 2014-01-26 07:08:34Z

0

Did you add the controller reference to your form tag?

    <form id="wizard" class="form-horizontal"  ng-submit="abc($event)" 
ng-controller="familyRegistrationController">

answered Jan 26, 2014 at 7:08

Jay

7117 silver badges19 bronze badges

3 Comments

Nisham Mahsin Over a year ago

Yes i have that in html body itself

Jay Over a year ago

please post your complete code, otherwise its very difficult to answer the question.

Nisham Mahsin Over a year ago

I am using routing for my application, .when('/family-registration', { templateUrl: 'api/index.php/templates/family_registration', controller: 'familyRegistrationController' }) and I have the function defined inside the controller. Everything working excluding this one.

Collectives™ on Stack Overflow

AngularJS ajax form submit with submit input

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related