제출 시 페이지 새로 고침 중지
필드에 데이터가 없는 상태에서 보내기 버튼을 눌렀을 때 페이지가 새로 고쳐지지 않도록 하려면 어떻게 해야 합니까?
검증은 정상적으로 동작하고 있으며, 모든 필드가 빨간색이 되지만 페이지가 즉시 새로 고쳐집니다.JS에 대한 저의 지식은 비교적 기초적입니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.processForm()하단의 함수는 '불량'입니다.
HTML
<form id="prospects_form" method="post">
<input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
<input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
<input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
<textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
<button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
<div id="form_validation">
<span class="form_captcha_code"></span>
<input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
</div>
<div class="clearfix"></div>
</form>
JS
$(document).ready(function() {
// Add active class to inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });
///////////////////
// START VALIDATION
$("#prospects_form").ready(function() {
// DEFINE GLOBAL VARIABLES
var valName = $('#form_name'),
valEmail = $("#form_email"),
valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
valMsg = $('#form_message'),
valCaptcha = $('#form_captcha'),
valCaptchaCode = $('.form_captcha_code');
// Generate captcha
function randomgen() {
var rannumber = "";
// Iterate through 1 to 9, 4 times
for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
// Apply captcha to element
valCaptchaCode.html(rannumber);
}
randomgen();
// CAPTCHA VALIDATION
valCaptcha.blur(function() {
function formCaptcha() {
if ( valCaptcha.val() == valCaptchaCode.html() ) {
// Incorrect
valCaptcha.parent().addClass("invalid");
return false;
} else {
// Correct
valCaptcha.parent().removeClass("invalid");
return true;
}
}
formCaptcha();
});
// Remove invalid class from captcha if typing
valCaptcha.keypress(function() {
valCaptcha.parent().removeClass("invalid");
});
// EMAIL VALIDATION (BLUR)
valEmail.blur(function() {
function formEmail() {
if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
// Incorrect
valEmail.addClass("invalid");
} else {
// Correct
valEmail.removeClass("invalid");
}
}
formEmail();
});
// Remove invalid class from email if typing
valEmail.keypress(function() {
valEmail.removeClass("invalid");
});
// VALIDATION ON SUBMIT
$('#prospects_form').submit(function() {
console.log('user hit send button');
// EMAIL VALIDATION (SUBMIT)
function formEmailSubmit() {
if (!valEmailFormat.test(valEmail.val())) {
// Incorrect
valEmail.addClass("invalid");
} else {
// Correct
valEmail.removeClass("invalid");
}
}
formEmailSubmit();
// Validate captcha
function formCaptchaSubmit() {
if( valCaptcha.val() === valCaptchaCode.html() ) {
// Captcha is correct
} else {
// Captcha is incorrect
valCaptcha.parent().addClass("invalid");
randomgen();
}
}
formCaptchaSubmit();
// If NAME field is empty
function formNameSubmit() {
if ( valName.val() === "" ) {
// Name is empty
valName.addClass("invalid");
} else {
valName.removeClass("invalid");
}
}
formNameSubmit();
// If MESSAGE field is empty
function formMessageSubmit() {
if ( valMsg.val() === "" ) {
// Name is empty
valMsg.addClass("invalid");
} else {
valMsg.removeClass("invalid");
}
}
formMessageSubmit();
// Submit form (if all good)
function processForm() {
if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
$("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
$("#form_send").attr("type", "submit");
return true;
} else if( !formEmailSubmit() ) {
valEmail.addClass("invalid");
return false;
} else if ( !formCaptchaSubmit() ) {
valCaptcha.parent().addClass("invalid");
return false;
} else if ( !formNameSubmit() ) {
valName.addClass("invalid");
return false;
} else if ( !formMessageSubmit() ) {
valMsg.addClass("invalid");
return false;
} else {
return false;
}
}
});
});
// END VALIDATION
/////////////////
});
폼의 제출을 막을 수 있습니다.
$("#prospects_form").submit(function(e) {
e.preventDefault();
});
에서는 빈할 수 것이 , 빈 필드를 체크할 수 있습니다.e.preventDefault()송신 정지합니다.
jQuery 사용 안 함:
var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
추가 가onsubmit="return false" 삭제:
<form onsubmit="return false">
그걸로 해결됐어요.지정한 onClick 함수는 계속 실행됩니다.
의 타입을 「버튼의 타입」으로 .button:
<button type="button">My Cool Button</button>
할 때 하지 않도록 , 「」를 추가하는 .return falseattribute.onsubmit Attribute를 합니다.
<form onsubmit="yourJsFunction();return false">
<input type="text"/>
<input type="submit"/>
</form>
페이지를 새로 고치지 않고 양식을 제출할 때 이 코드를 사용할 수 있습니다.나는 내 프로젝트에서 이것을 했다.
$(function () {
$('#myFormName').on('submit',function (e) {
$.ajax({
type: 'post',
url: 'myPageName.php',
data: $('#myFormName').serialize(),
success: function () {
alert("Email has been sent!");
}
});
e.preventDefault();
});
});
이 문제는 사용자에게 폼을 송신할 수 있는2개의 가능성을 부여하면 더욱 복잡해집니다.
- 애드혹 버튼을 클릭하여
- Enter 키를 눌러서
이 경우 Enter 키를 눌렀을 때 폼을 전송할 누름 키를 감지하는 기능이 필요합니다.
여기서 IE(어느 경우든 버전 11)의 문제가 발생합니다.주의:이 문제는 Chrome이나 Fire Fox에서는 발생하지 않습니다.
- [ Submit ]버튼을 클릭하면 폼이 1회 송신됩니다.괜찮습니다.
- Enter 키를 누르면 폼이 두 번 제출되고 서블릿이 두 번 실행됩니다.PRG(post redirect get) 아키텍처 서버가 없는 경우 예기치 않은 결과가 발생할 수 있습니다.
사소한 해결책으로 보이지만, 이 문제를 해결하는 데 많은 시간이 걸렸기 때문에 다른 사람들에게 유용하게 쓰였으면 좋겠습니다.이 솔루션은 특히 IE(v 11.0.9600.18426), FF(v 40.03) 및 Chrome(v 53.02785.143m 64비트)에서 테스트에 성공했습니다.
소스코드 HTML 및 js는 스니펫에 기재되어 있습니다.원리는 여기에 설명되어 있습니다.경고:
포스트 액션이 정의되어 있지 않고 Enter 키를 누르면 stackoverflow와 간섭할 수 있기 때문에 스니펫에서 테스트할 수 없습니다.
이 문제에 직면한 경우 js 코드를 환경에 복사/붙여넣고 상황에 맞게 조정하십시오.
/*
* inForm points to the form
*/
var inForm = document.getElementById('idGetUserFrm');
/*
* IE submits the form twice
* To avoid this the boolean isSumbitted is:
* 1) initialized to false when the form is displayed 4 the first time
* Remark: it is not the same event as "body load"
*/
var isSumbitted = false;
function checkEnter(e) {
if (e && e.keyCode == 13) {
inForm.submit();
/*
* 2) set to true after the form submission was invoked
*/
isSumbitted = true;
}
}
function onSubmit () {
if (isSumbitted) {
/*
* 3) reset to false after the form submission executed
*/
isSumbitted = false;
return false;
}
}<!DOCTYPE html>
<html>
<body>
<form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<input type="submit" value="Submit">
</form>
</body>
</html>가장 좋은 해결책은 원하는 함수를 온서밋으로 호출하고 그 후에 false를 반환하는 것입니다.
onsubmit="xxx_xxx(); return false;"
대부분의 사람들은 함수를 호출하여 양식을 제출하지 못하게 할 것이다.
또 다른 방법은 버튼의 클릭 속성을 제거하고 코드를 가져오는 것입니다.processForm()로 나가다..submit(function() {~하듯이return false;그럼 폼이 송신되지 않습니다.그리고,formBlaSubmit()함수는 유효성에 따라 부울을 반환합니다.processForm();
katsh님의 답변은 동일합니다.소화되기 쉬울 뿐입니다.
(그런데 스택오버플로우는 처음이라 안내 부탁드립니다.)
순수 Javascript에서는 다음을 사용합니다.e.preventDefault()
e.preventDefault()jquery에서는 사용되지만 javascript에서는 작동합니다.
document.querySelector(".buttonclick").addEventListener("click",
function(e){
//some code
e.preventDefault();
})
개인적으로 저는 제출 시 폼을 확인하고 오류가 있으면 false를 반환합니다.
$('form').submit(function() {
var error;
if ( !$('input').val() ) {
error = true
}
if (error) {
alert('there are errors')
return false
}
});
$("#buttonID").click(function (e) {
e.preventDefault();
//some logic here
}
이를 위해 JS를 사용하는 가장 좋은 방법은 prevent Default() 함수를 사용하는 것입니다.아래 코드를 참고하십시오.
function loadForm(){
var loginForm = document.querySelector('form'); //Selecting the form
loginForm.addEventListener('submit', login); //looking for submit
}
function login(e){
e.preventDefault(); //to stop form action i.e. submit
}
Pure Javascript를 사용하고 싶다면 다음 스니펫이 가장 좋습니다.
예를 들어 다음과 같습니다.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Without Submiting With Pure JS</title>
<script type="text/javascript">
window.onload = function(){
/**
* Just Make sure to return false so that your request will not go the server script
*/
document.getElementById('simple_form').onsubmit = function(){
// After doing your logic that you want to do
return false
}
}
</script>
</head>
<body>
</body>
</html>
<form id="simple_form" method="post">
<!-- Your Inputs will go here -->
<input type="submit" value="Submit Me!!" />
</form>
당신에게 도움이 되길 바랍니다!!
액션을 사용하지 않을 경우 폼의 액션 속성에 "javascript:"를 사용하십시오.
제 생각에 대부분의 답변은 당신의 질문에 대한 문제를 해결하기 위해 노력하고 있지만, 저는 그것이 당신의 시나리오에 대한 최선의 접근법이라고 생각하지 않습니다.
필드에 데이터가 없는 상태에서 보내기 버튼을 눌렀을 때 페이지가 새로 고쳐지지 않도록 하려면 어떻게 해야 합니까?
A .preventDefault()는 페이지를 갱신하지 않습니다.하지만 내 생각에 이건 단순한require원하는 필드에 데이터를 입력하면 문제가 해결됩니다.
<form id="prospects_form" method="post">
<input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
<input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
<input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
<textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
</form>
주의:require각 끝에 추가되는 태그 추가input결과는 동일합니다.필드에 데이터가 없으면 페이지를 새로 고치지 않습니다.
<form onsubmit="myFunction(event)">
Name : <input type="text"/>
<input class="submit" type="submit">
</form>
<script>
function myFunction(event){
event.preventDefault();
//code here
}
</script>
function ajax_form(selector, obj)
{
var form = document.querySelectorAll(selector);
if(obj)
{
var before = obj.before ? obj.before : function(){return true;};
var $success = obj.success ? obj.success: function(){return true;};
for (var i = 0; i < form.length; i++)
{
var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;
var $form = form[i];
form[i].submit = function()
{
var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
var FD = new FormData($form);
/** prevent submiting twice */
if($form.disable === true)
return this;
$form.disable = true;
if(before() === false)
return;
xhttp.addEventListener('load', function()
{
$form.disable = false;
return $success(JSON.parse(this.response));
});
xhttp.send(FD);
}
}
}
return form;
}
어떻게 작동하는지는 확인하지 못했어.jquery ajaxForm처럼 동작하도록 바인딩할 수도 있습니다.
다음과 같이 사용:
ajax_form('form',
{
before: function()
{
alert('submiting form');
// if return false form shouldn't be submitted
},
success:function(data)
{
console.log(data)
}
}
)[0].submit();
위의 예에서 submit i와 같은 작업을 수행할 수 있도록 노드를 반환합니다.
완벽하지는 않지만 작동해야 하는 경우 오류 처리를 추가하거나 비활성화 조건을 제거해야 합니다.
e.provent Default(); works: works: works: works: 기쁘지만 works: works: works: works: works: works: works: works: works: w
첫 번째 코드가 작동하는 경우가 있습니다.
$("#prospects_form").submit(function(e) {
e.preventDefault();
});
두 번째 옵션은 왜 작동하지 않는가?jquery 또는 다른 javascript 라이브러리가 제대로 로드되지 않아 작동하지 않습니다. 모든 jquery 및 javascript 파일이 제대로 로드되었는지 콘솔에서 확인할 수 있습니다.
이것으로 내 문제는 해결되었다.이것이 당신에게 도움이 되기를 바랍니다.
이게 마지막 답이었으면 좋겠다
$('#the_form').submit(function(e){
e.preventDefault()
alert($(this).serialize())
// var values = $(this).serialize()
// logic....
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="the_form">
Label-A <input type="text" name='a'required><br>
Label-B <input type="text" name="b" required><br>
Label-C <input type="password" name="c" required><br>
Label-D <input type="number" name="d" required><br>
<input type="submit" value="Save without refresh">
</form>
다음과 같이 상태를 지우면 됩니다.이것을 document.ready 함수의 맨 앞에 추가합니다.
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
언급URL : https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit
'programing' 카테고리의 다른 글
| 사전에 키가 있는지 확인하려면 어떻게 해야 하나요? (0) | 2023.02.03 |
|---|---|
| MySQL에서 정수 시퀀스 생성 (0) | 2023.02.03 |
| 문자열 형식의 명명된 자리 표시자 (0) | 2023.02.03 |
| jQuery 플러그인 확인 - 간단한 사용자 지정 규칙을 만드는 방법 (0) | 2023.02.03 |
| Python 요청 라이브러리의 get 메서드와 함께 헤더 사용 (0) | 2023.02.03 |