web-dev-qa-db-ja.com

HTMLボタンがページをリロードしないようにする方法

ボタンがあります（<input type="submit">）。クリックすると、ページがリロードされます。ページの読み込み時に呼び出されるjQuery hide()関数があるため、これらの要素が再び非表示になります。ボタンが何もしないようにするにはどうすればよいですか？ボタンがクリックされたときに発生するアクションを追加できますが、ページはリロードできません。

htmljavascript-eventsbutton
100
Ankur

jsやjqueryを使用する必要はありません。ページの再読み込みを停止するには、ボタンタイプを「ボタン」として指定します。ボタンの種類を指定しない場合、ブラウザはページの再読み込みを引き起こす「リセット」または「送信」に設定します。

 <button type='button'>submit</button>
187
Jafar Rasooli

<button> 要素を使用するか、<input type="button"/>を使用します。

78
Andrew Hare

HTMLの場合：

<form onsubmit="return false">
</form>

onclickが割り当てられている場合でも、すべての「ボタン」での更新を回避するため。

17
user2868288

JQueryを使用してボタンにクリックハンドラーを追加し、falseを返すことができます。

$("input[type='submit']").click(function() { return false; });

または

$("form").submit(function() { return false; });
14
Chris Gutierrez

HTMLの場合：

<input type="submit" onclick="return false">

JQueryでは、いくつかの同様のバリアントが既に説明されています。

13
pestilence669

送信ボタンを含むフォームを使用できます。次に、jQueryを使用して、フォームのデフォルトの動作を防止します。

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>
5
ProgrammingWithRandy

上記のコメントの1つ（埋められている）で述べたように、これはボタンタグをフォームタグ内に配置しないことで修正できます。ボタンがフォームの外側にある場合、ページは自動的に更新されません。

3
CommonCoreTawan

まだコメントできないので、回答として投稿しています。リロードを回避する最善の方法は、@ user2868288が言った方法です。onsubmitタグでformを使用します。

ここで言及した他のすべての可能性から、新しいHTML5ブラウザーのデータ入力検証をトリガーできる（<button>はjQuery/JSハンドラーも実行しない）jQuery/AJAX動的情報を許可する唯一の方法ですページに追加されます。例えば：

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>
2
Gusstavv Gil