Question

我有一个有stepy向导的表单。对于工作stepy向导，必须使用输入提交按钮而不是按钮。所以我使用提交按钮，但点击提交按钮时，它将重定向到主页面。我的代码

<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>

这是我的控制器

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

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

});

Answer 1

preventDefault是多余的，请参阅the docs。您只需要删除action属性。

此外，它会阻止默认操作（表单意味着将请求发送到服务器并重新加载当前页面），但仅限于表单不包含操作属性。

相反，请将ng-app添加到相应的HTML元素中，并确保正确加载控制器。

我已经创建了一个工作示例here，您可以在其中看到我建议的更改。

Answer 2

1-删除操作

2-从ng-submit =＆＃34; abc（$ event）＆＃34;

中删除$ event

3-您最好考虑在标签中使用PHP，这不是一个好主意：（

Answer 3

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

Answer 4

您是否已将控制器参考添加到表单标记中？

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

AngularJS ajax表单提交提交输入

4 个答案: