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


116

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

回答:


228

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

 <button type='button'>submit</button> 

3
これは機能します!これはに代わる良い方法<input type='button' />です。
リック

5
これは適切に機能し、特にChromeの場合(受け入れられた回答が機能しない場合)
hobailey

3
Windows 10でChromeに取り組んでいます。
ssdscott

82

使用のいずれか<button>の要素または使用<input type="button"/>


110
<button>要素はデフォルトで、(少なくとも)chromeでリロードを引き起こします。
AdamC

2
フォームのonsubmitイベントを使用して、戻りたくない場合はfalseを返すことができます
neu-rah

4
@Joeは実際には快適ではありません:/ IE8で動作するように私のWebアプリケーションが必要であり、そのリロードはちょっと面倒です...
Ms. Nobody

24
@pbeardshearフォーム内に配置された場合に実行されます。とき<button>、フォームの外側に配置されてリフレッシュが発生しません!
Kevinvhengst 2014年

13
要素をクロムで追加type="button"して<button>も更新されない
Johnny Metz

21

HTML:

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

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


15

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

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

または

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

6
これは機能しません。少なくとも最新バージョンでは、Chromeでfalseを返すと、まだ更新が発生します。
user3690202 14年

これは実際に私のために働いた唯一の答えです。私は自分の関数でfalseを返し、サファリとクロムの両方で更新が停止しました。
VessoVit 2016

13

HTML:

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

jQueryを使用すると、既に述べたいくつかの類似のバリアントがあります。


9

送信ボタンを含むフォームを使用できます。次に、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>


4

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


2

まだコメントできないので、これを回答として投稿しています。リロードを回避する最良の方法は、@ 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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.