[解決済み】フォーム内のボタンをクリックすると、ページが更新されます。
2022-04-21 02:44:52
質問
Angularのフォームがあり、その中に2つのボタンタグがあります。1つのボタンは、フォームの送信を
ng-click
. もう1つのボタンは、純粋にナビゲーション用で
ng-click
. しかし、この2つ目のボタンがクリックされると、AngularJSはページの更新を引き起こし、404をトリガーしています。私は関数にブレークポイントを落とし、それが私の関数をトリガーしています。以下のいずれかを実行すると、それは停止します。
-
を削除すると
ng-click
ボタンを押しても、ページが更新されません。 - 関数内のコードをコメントアウトしても、ページ更新が起きないのですが。
-
ボタンタグをアンカータグに変更すると(
<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要素と同じものを表します。
関連
-
[解決済み】Uncaught TypeError: nullのプロパティ'value'を読み取ることができない
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】Babel NodeJS ES6: SyntaxError: 予期しないトークンのエクスポート
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み】ng-includeの正しい文法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】NodeJS "ESモジュールをロードするためにインポートを使用する必要があります。"
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】 \u003C とは何ですか?