AngularJS ajax表单提交并提交输入

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');
  };

});

Answer 1

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.

Answer 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:(

Answer 3

相信您可以删除表单上的操作。

Answer 4

Did you add the controller reference to your form tag?

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