반응형
jquery 및 .submit으로 양식 제출 캡처
jQuery를 사용하여 제출 이벤트를 캡처 한 다음 JSON 형식의 양식 요소를 PHP 페이지로 보내려고합니다. 제출물을 캡처하는 데 문제가 .click()있지만 이벤트로 시작 했지만 .submit()대신 이벤트로 이동했습니다 .
이제 다음과 같은 코드가 정리되었습니다.
HTML
<form method="POST" id="login_form">
<label>Username:</label>
<input type="text" name="username" id="username"/>
<label>Password:</label>
<input type="password" name="password" id="password"/>
<input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>
자바 스크립트
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
});
문서 준비에 코드를 래핑하고 기본 제출 작업을 방지합니다.
$(function() { //shorthand document.ready function
$('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
var data = $("#login_form :input").serializeArray();
console.log(data); //use the console for debugging, F12 in Chrome, not alerts
});
});
이 시도:
이벤트의 흐름을 줄이려면 ´return false´를 사용하십시오.
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
편집하다
jQuery의 '길이'를 가진 양식 요소가 다음과 같은지 확증하십시오.
alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
또는:
DOM이 준비 될 때까지 기다립니다.
jQuery(function() {
alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
});
문서의 "준비된"이벤트 안에 코드를 넣습니까, 아니면 DOM이 준비된 후에 있습니까?
form.submit 함수를 자신의 구현으로 바꾸십시오.
var form = document.getElementById('form');
var formSubmit = form.submit; //save reference to original submit function
form.onsubmit = function(e)
{
formHandler();
return false;
};
var formHandler = form.submit = function()
{
alert('hi there');
formSubmit(); //optionally submit the form
};
Just a tip: Remember to put the code detection on document.ready, otherwise it might not work. That was my case.
$(document).ready(function () {
var form = $('#login_form')[0];
form.onsubmit = function(e){
var data = $("#login_form :input").serializeArray();
console.log(data);
$.ajax({
url: "the url to post",
data: data,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
},
error: function(xhrRequest, status, error) {
alert(JSON.stringify(xhrRequest));
}
});
return false;
}
});<!DOCTYPE html>
<html>
<head>
<title>Capturing sumit action</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" id="login_form">
<label>Username:</label>
<input type="text" name="username" id="username"/>
<label>Password:</label>
<input type="password" name="password" id="password"/>
<input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>
</body>
</html>ReferenceURL : https://stackoverflow.com/questions/12252378/capturing-a-form-submit-with-jquery-and-submit
반응형
'programing' 카테고리의 다른 글
| 'Unchecked runtime.lastError : The message port closed before a response was received'크롬 문제를 해결하는 방법? (0) | 2020.12.29 |
|---|---|
| "완료 / 돌아 가기"버튼을 눌렀을 때 텍스트 상자 키보드를 숨기는 방법 Xcode 4.2 (0) | 2020.12.28 |
| Windows 7에서 mysql 서버를 다시 시작하십시오. (0) | 2020.12.28 |
| PHP-배열 내부의 배열 병합 방법 (0) | 2020.12.28 |
| C / C ++의 무한 루프 (0) | 2020.12.28 |