반응형
제출시 양식 새로 고침 중지 페이지
필드에 데이터없이 전송 버튼을 누를 때 페이지가 새로 고쳐지지 않도록하려면 어떻게해야합니까?
유효성 검사가 올바르게 설정되고 모든 필드가 빨간색으로 바뀌지 만 페이지가 즉시 새로 고쳐집니다. 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()제출이 중지됩니다.
버튼 유형을 button다음으로 바꿉니다 .
<button type="button">My Cool Button</button>
이 onsubmit = "return false"코드를 추가하십시오.
<form name="formname" onsubmit="return false">
그것은 나를 위해 그것을 고쳤다. 지정한 onClick 기능을 계속 실행합니다.
이 코드를 사용하여 페이지를 새로 고치지 않고도 양식을 제출할 수 있습니다. 내 프로젝트 에서이 작업을 수행했습니다.
$(function () {
$('#myFormName').on('submit',function (e) {
$.ajax({
type: 'post',
url: 'myPageName.php',
data: $('#myFormName').serialize(),
success: function () {
alert("Email has been sent!");
}
});
e.preventDefault();
});
});
이 문제는 사용자에게 양식을 제출할 수있는 가능성을 제공 할 때 더욱 복잡해집니다.
- 애드혹 버튼을 클릭하여
- Enter 키를 쳐서
이 경우 Enter 키를 눌렀을 때 양식을 제출할 키를 감지하는 기능이 필요합니다.
이제 IE (어떤 경우에도 버전 11)에 문제가 발생합니다. 비고 :이 문제는 Chrome이나 FireFox에는 없습니다!
- 제출 버튼을 클릭하면 양식이 한 번 제출됩니다. 좋아.
- Enter 키를 누르면 양식이 두 번 제출됩니다 ... 서블릿이 두 번 실행됩니다. PRG (포스트 리디렉션 가져 오기) 아키텍처 서버 측이없는 경우 결과가 예상치 못한 것일 수 있습니다.
해결책이 사소한 것처럼 보이지만이 문제를 해결하는 데 많은 시간이 걸렸으므로 다른 사람들에게 유용 할 수 있기를 바랍니다. 이 솔루션은 특히 IE (v 11.0.9600.18426), FF (v 40.03) 및 Chrome (v 53.02785.143m 64 비트)에서 성공적으로 테스트되었습니다.
소스 코드 HTML 및 js는 스 니펫에 있습니다. 원칙이 여기에 설명되어 있습니다. 경고:
사후 조치가 정의되지 않았으며 Enter 키를 누르면 스택 오버 플로우를 방해 할 수 있으므로 스 니펫에서 테스트 할 수 없습니다.
이 문제가 발생하면 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>대부분의 사람들은 event.preventDefault()함수 를 호출하여 양식을 제출하지 못하게합니다 .
또 다른 수단의 코드 버튼의 OnClick 속성을 제거하고 얻을 수 있습니다 processForm()로 아웃 .submit(function() {로 return false;제출하지에 원인 양식. 또한 formBlaSubmit()함수가 유효성에 따라 부울을 반환하도록합니다.processForm();
katsh대답은 동일하며 소화하기가 더 쉽습니다.
(그런데, 나는 stackoverflow를 처음 사용하므로 지침을 제공하십시오.)
순수 자바 스크립트에서는 다음을 사용하십시오. e.preventDefault()
e.preventDefault() jquery에서 사용되지만 자바 스크립트에서 작동합니다.
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
}
양식을 사용하여 제출할 때 페이지를 다시로드하지 못하게하는 한 가지 좋은 방법은 return falseonsubmit 속성 을 추가 하는 것입니다.
<form action="#" onsubmit="yourJsFunction();return false">
<input type="text"/>
<input type="submit"/>
</form>
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>
희망이 당신을 위해 작동합니다!
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처럼 작동하도록 bind (this) 할 수 있습니다
다음과 같이 사용하십시오.
ajax_form('form',
{
before: function()
{
alert('submiting form');
// if return false form shouldn't be submitted
},
success:function(data)
{
console.log(data)
}
}
)[0].submit();
노드를 반환하므로 위의 예제를 제출하는 것과 같은 작업을 수행 할 수 있습니다
완벽에서 멀리 떨어져 있지만 작동한다고 가정하면 오류 처리를 추가하거나 비활성화 조건을 제거해야합니다
조치를 사용하지 않는 경우 양식의 조치 속성에 "javascript :"를 사용하십시오.
순수한 JavaScript의 경우 click 메소드를 대신 사용하십시오.
<div id="loginForm">
<ul class="sign-in-form">
<li><input type="text" name="username"/></li>
<li><input type="password" name="password"/></li>
<li>
<input type="submit" onclick="loginForm()" value="click" />
</li>
</ul>
</div>
<script>
function loginForm() {
document.getElementById("loginForm").click();
}
</script>
<form></form>게시 및 새로 고침을 방지하려는 섹션에서 제거하여 매우 간단하지만 작동하는 솔루션을 찾았습니다 .
<select id="youId" name="yourName">
<select>
<option value="1</option>
<option value="2</option>
<option value="3</option>
</select>
<input id="formStockVal1" type="number"><br><br>
<form>
<button type="reset" id="stockCancel">Cancel</button>
<button type="reset" id="stockConfirm">Add</button>
</form>
여기서는 버튼 만 제출해야합니다.
다음과 같이 반품하십시오.
function validate()
{
var username=document.getElementById('username').value;
if(username=="")
{
return false;
}
if(username.length<5&&username.length<15)
{
alert("Length should between 5 to 15 characters");
return false;
}
return true;
}body{
padding: 0px;
margin:0px;
}
input{
display: block;
margin-bottom:10px;
height:25px;
width:200px;
}
input[type="submit"]{
margin:auto;
}
label{
display:block;
margin-bottom:10px;
}
form{
width:500px;
height:500px;
border:1px solid green;
padding:10px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
}
.labels{
width: 35%;
box-sizing:border-box;
display: inline-block;
}
.inputs{
width: 63%;
box-sizing:border-box;
padding:10px;
display: inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FORM VALIDATION</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form action="#">
<div class="labels">
<label>Name</label>
<label>Email</label>
</div>
<div class="inputs">
<input type="text" name="username" id="username" required>
<input type="text" name="email" id="email" required>
</div>
<input type="submit" value="submit" onclick="return validate();">
</form>
</body>
</html>validate ()에서 true와 false를 반환합니다. 요구 사항에 따라 기능
참고 URL : https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit
반응형
'program story' 카테고리의 다른 글
| LINQ에서 날짜가 가장 높은 레코드 만 선택하는 방법 (0) | 2020.07.26 |
|---|---|
| MySQL에 데이터를 JSON으로 저장 (0) | 2020.07.26 |
| jQuery 아약스 오류 함수 (0) | 2020.07.26 |
| 로그인 페이지로의 각도 재 지정 (0) | 2020.07.26 |
| vi에서 중복 행을 제거 하시겠습니까? (0) | 2020.07.26 |