回答:
使用のいずれか<button>
の要素または使用<input type="button"/>
。
<button>
、フォームの外側に配置されてリフレッシュが発生しません!
type="button"
して<button>
も更新されない
HTML:
<form onsubmit="return false">
</form>
onclickが割り当てられている場合でも、すべての「ボタン」での更新を回避するため。
jQueryを使用してボタンにクリックハンドラーを追加し、falseを返すことができます。
$("input[type='submit']").click(function() { return false; });
または
$("form").submit(function() { return false; });
送信ボタンを含むフォームを使用できます。次に、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>
上記のコメント(埋められた)の1つで述べたように、これはformタグ内にbuttonタグを配置しないことで修正できます。ボタンがフォームの外側にある場合、ページは更新されません。
まだコメントできないので、これを回答として投稿しています。リロードを回避する最良の方法は、@ 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>
<input type='button' />
です。