1. ホーム
  2. ジャバスクリプト

[解決済み】フォーム内のボタンをクリックすると、ページが更新されます。

2022-04-21 02:44:52

質問

Angularのフォームがあり、その中に2つのボタンタグがあります。1つのボタンは、フォームの送信を ng-click . もう1つのボタンは、純粋にナビゲーション用で ng-click . しかし、この2つ目のボタンがクリックされると、AngularJSはページの更新を引き起こし、404をトリガーしています。私は関数にブレークポイントを落とし、それが私の関数をトリガーしています。以下のいずれかを実行すると、それは停止します。

  1. を削除すると ng-click ボタンを押しても、ページが更新されません。
  2. 関数内のコードをコメントアウトしても、ページ更新が起きないのですが。
  3. ボタンタグをアンカータグに変更すると( <a> ) を使って href="" であれば、リフレッシュは発生しません。

後者は最も簡単な回避策のように思えますが、なぜAngularJSは、ページを再読み込みさせる私の関数の後に、何らかのコードを実行しているのでしょうか?バグのように思えます。

以下、フォームです。

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</label>
      <div class="controls">
        <button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
      </div>
    </div>

    <div class="buttonBar">
      <button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
    </div>
  </fieldset>
</form>

以下は、コントローラのメソッドです。

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};

解決方法は?

をご覧ください。 W3C仕様 でマークすることであるように思えます。 type='button' を送信させないようにします。

特に注意したいのは、次のように書かれているところです。

type属性が指定されていないbutton要素は、type属性に"submit"が指定されているbutton要素と同じものを表します。