无法使用Jquery提交表单
无法使用Jquery提交表单
提问于 2022-11-29 22:45:35
我需要知道代码中的错误是什么，因为所有内容都是正确的，但是表单数据无法提交；在php文件中，在未定义的索引lname中，错误弹出，同时将表示表单的表单通过jquery提交，但是数据不会进入后端。所以请解决这个错误，或者帮我找出代码中的错误。
这是html代码：-
<span id="answer"></span>
<form id='contact_form' method="post">
<div class="modal-body">
<div id='name_error' class='error'>Please enter your name.</div>
<div>
<input type='text' name='lname' id='name' class="form-control" placeholder="Your Name" required>
</div>
<div id='email_error' class='error'>Please enter your valid E-mail ID.</div>
<div>
<input type='email' name='email' id='email' class="form-control" placeholder="Your Email" required>
</div>
<div id='phone_error' class='error'>Please enter your phone number.</div>
<div>
<input type='text' name='phone' id='phone' class="form-control" placeholder="Your Phone" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" onclick="formSubmit(event);" class="btn btn-primary">I Agree</button>
</div>
</form>这是jquery代码：-
$('#subButton').click(function(e) {
console.log('in');
e.preventDefault();
var FormData = $('#contact-form').submit();
$.ajax({
type: "POST",
url: "admin/backend/leads.php",
data: FormData,
dataType: "json",
success: function(data) {
var html = '';
if (data.errors) {
html = '<div class="alert alert-danger">' + data.errors + '</div>';
}
if (data.success) {
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#contact-form')[0].reset();
localStorage.setItem('#phone', true);
}
$('#answer').html(html);
},
error: function(data) {
html = '<div class="alert alert-danger">' + data.errors + '</div>';
$('#answer').html(html);
}
});
});回答 2
Stack Overflow用户
发布于 2022-11-29 23:05:01
你代码中的问题是..。
id="subButton"中没有任何元素- 没有
formSubmit函数 $('#contact-form').submit()通常提交您不想要的表单。它还返回一个jQuery对象，而不是表单数据。
首先，从提交按钮中删除onClick。
<button type="submit" class="btn btn-primary">I Agree</button>第二，要么将id="subButton"添加到<button>中，要么像我喜欢的那样，听表单上的submit事件。
第三，使用jQuery的.serialize()捕获所有表单数据
$("#contact_form").on("submit", (e) => {
e.preventDefault();
const postData = $(e.target).serialize();
$.post("admin/backend/leads.php", postData, null, "json")
.done((data) => {
// make HTML changes, etc
})
.fail((_, textStatus, errorThrown) => {
// report error, etc
});
});是2022年和您可能不需要jQuery
document
.getElementById("contact_form")
.addEventListener("submit", async (e) => {
e.preventDefault();
const body = new URLSearchParams(new FormData(e.target));
try {
const res = await fetch("admin/backend/leads.php", {
method: "POST",
body,
});
if (!res.ok) {
throw res;
}
const data = await res.json();
// make HTML changes, etc
} catch (err) {
// report error, etc
}
});Stack Overflow用户
发布于 2022-12-01 07:43:31
尝尝这个,
$('#contact-form').submit(function(e) {
console.log('in');
e.preventDefault();
var body = $(this).serialize();
$.ajax({
type: "POST",
url: "admin/backend/leads.php",
data: JSON.stringify(body),
dataType: "json",
success: function(data) {
var html = '';
if (data.errors) {
html = '<div class="alert alert-danger">' + data.errors + '</div>';
}
if (data.success) {
html = '<div class="alert alert-success">' + data.success + '</div>';
$('#contact-form')[0].reset();
localStorage.setItem('#phone', true);
}
$('#answer').html(html);
},
error: function(data) {
html = '<div class="alert alert-danger">' + data.errors + '</div>';
$('#answer').html(html);
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74621056
复制相关文章
相似问题
腾讯云开发者
