у меня есть эта форма
МояФорма.html
<form id = "MyForm" ENCTYPE = "application/x-www-form-urlencoded" class = "form form-horizontal" autocomplete = "off">
<fieldset>
<!-- .control-group -->
<div class = "control-group">
<div class = "control-label align-right">
<label for = "frm-shareDeliveryPopupForm-shareDeliveryForm-senderEmail">Your e-mail</label>
</div>
<!-- .control-label -->
<div class = "control-field">
<input type = "email" name = "Email" id = "senderEmail" required class = "input">
</div>
<!-- .control-field -->
</div>
<!-- .control-group -->
<div class = "control-group" id = "PasswordID">
<div class = "control-label align-right">
<label for = "senderPassword">Your password</label>
</div>
<!-- .control-label -->
<div class = "control-field">
<input type = "Password" name = "Pass" id = "Password" class = "input" pattern = ".{4,}" title = "6 characters minimum" required>
</div>
<!-- .control-field -->
</div>
<!-- .control-group -->
<!-- .control-group -->
<div id = "SendDiv" class = "control-group">
<div class = "control-label"></div>
<!-- .control-label -->
<div class = "Centered" id = "sendButton">
<a href = "#" data-name = "download-button" class = "btn btn-primary btn-large uppercase">
<span>Download</span>
<span class = "spinner"></span>
</a>
</div>
<!-- .control-field -->
</div>
<!-- .control-group -->
</fieldset>
</form>
А вот мой JS-файл для обработки:
/******************** START Submit Form by the click of an element ID *****************************************/
$(document).ready(function(){
$("#SendDiv").click(function(){
$("#MyForm").submit();
});
})
/******************** END Submit Form by the click of an element ID *****************************************/
/************** FORM PROCESSOR *******************************/
// process the form
$("#MyForm").submit(function(event) {
event.preventDefault();
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'Email' : $('input[name=Email]').val(),
'Password' : $('input[name=Pass]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : './process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
beforeSend: function()
{
$("#error").fadeOut();
},
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.info(data);
// here we will handle errors and validation messages
if (!data.success) {
// handle errors ---------------
if (data.errors.Error) {
window.location.href= "./error.php";
}
} else {
// ALL GOOD! just show the success message!
window.location.href= "./success.php";
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.info(data);
});
});
Я пытался отправить форму при нажатии на DIV с идентификатором элемента «SendDiv». Однако форма отказывается публиковать сообщения после нескольких попыток.
Я попытался отправить форму по идентификатору элемента или классу элемента, но, похоже, ничего не работает. Я не хочу использовать обычную кнопку отправки, так как не хочу обновлять страницу во время обработки формы. Может кто-нибудь помочь с этим?
Почему внутри $(document).ready() нет кода FORM PROCESSOR?
К вашему сведению: вы не можете отправлять электронные письма с помощью JQuery. Вы отправляете запрос AJAX в файлprocess.php с помощью jQuery, который отправляет электронное письмо на PHP.
@Barmar Я слишком много раз проверял консоль и не вижу никаких ошибок или вызова файла процессора. Просто все еще. Ничего не работает, когда я нажимаю элемент SendDiv в форме, которая обычно должна отправить форму. Кроме того, я не поместил обработчик форм в раздел $(document).ready(), потому что я использовал такой код в других формах, и они работают. Для меня это странно. Мне действительно нужна помощь.
Находится ли процессор формы в конце тела? Он должен быть после MyForm, чтобы селектор мог добавить прослушиватель событий. Вот почему код, добавляющий прослушиватели событий, обычно помещается внутри функции готовности.
@Barmar Спасибо, что написали. Я слишком долго ждал, пока мне кто-нибудь ответит. Можете ли вы написать мои коды так, как вы на самом деле хотите? Помощь.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поместите обработку формы внутри $(document).ready(), как и другой код, создающий прослушиватели событий. В противном случае он может запуститься до того, как MyForm окажется в DOM, и прослушиватель событий не будет добавлен.
$(document).ready(function() {
$("#SendDiv").click(function() {
$("#MyForm").submit();
});
// process the form
$("#MyForm").submit(function(event) {
event.preventDefault();
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'Email': $('input[name=Email]').val(),
'Password': $('input[name=Pass]').val()
};
// process the form
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: './process.php', // the url where we want to POST
data: formData, // our data object
dataType: 'json', // what type of data do we expect back from the server
beforeSend: function() {
$("#error").fadeOut();
},
encode: true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.info(data);
// here we will handle errors and validation messages
if (!data.success) {
// handle errors ---------------
if (data.errors.Error) {
window.location.href = "./error.php";
}
} else {
// ALL GOOD! just show the success message!
window.location.href = "./success.php";
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.info(data);
});
});
})Бармар, По некоторым причинам я приму твой ответ. Я попробовал фрагмент, который вы отправили в отдельной форме, и он сработал, как указано. Однако, когда я помещаю другие части HTML на страницу, в которой находится форма, она не работает. Что-то не так с моими файлами, и я не знаю, что это на данный момент. Повторяем это снова и снова, и это не работает. Работает только в том случае, если это только этот код плана без добавления остальных моих html-кодов. Спасибо.
Есть ли ошибки в консоли? Если вы проверите вкладку «Сеть», увидите ли вы отправленный запрос AJAX?