페이지를 다시로드하지 않는 HTML 버튼을 만드는 방법
버튼 ( <input type="submit">
)이 있습니다. 클릭하면 페이지가 다시로드됩니다. hide()
페이지로드시 호출되는 일부 jQuery 함수가 있으므로 이러한 요소가 다시 숨겨집니다. 버튼이 아무 작업도하지 않도록하려면 어떻게하면 버튼을 클릭했을 때 발생하는 일부 동작을 추가 할 수 있지만 페이지를 다시로드 할 수는 없습니다.
js 또는 jquery가 필요하지 않습니다. 페이지 다시로드를 중지하려면 버튼 유형을 '버튼'으로 지정하십시오. 버튼 유형을 지정하지 않으면 브라우저가 페이지를 다시로드하도록 '재설정'또는 '제출'마녀 원인을 설정합니다.
<button type='button'>submit</button>
중 하나를 사용하여 <button>
요소 또는를 사용합니다 <input type="button"/>
.
HTML에서 :
<form onsubmit="return false">
</form>
onclick이 할당 된 경우에도 모든 "버튼"을 새로 고치는 것을 방지합니다.
jQuery로 버튼에 클릭 핸들러를 추가하고 false를 반환 할 수 있습니다.
$("input[type='submit']").click(function() { return false; });
또는
$("form").submit(function() { return false; });
HTML에서 :
<input type="submit" onclick="return false">
이미 언급 된 유사한 변형 인 jQuery를 사용합니다.
제출 버튼이 포함 된 양식을 사용할 수 있습니다. 그런 다음 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>
위의 주석 중 하나 (burried)에서 언급했듯이 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>
참고URL : https://stackoverflow.com/questions/1878264/how-do-i-make-an-html-button-not-reload-the-page
'Programing' 카테고리의 다른 글
Django Admin에서 필드 크기 조정 (0) | 2020.08.15 |
---|---|
NSString의 처음 세 문자를 얻는 방법? (0) | 2020.08.15 |
CSS3 변환이 작동하지 않음 (0) | 2020.08.15 |
.NET에서 객체를 UTF-8 XML로 직렬화 (0) | 2020.08.15 |
Javascript 배열 검색 및 문자열 제거? (0) | 2020.08.15 |