[英]Ajax submit doesn't submit anything
看了这篇文章,但恐怕没有帮助我,此刻我按下提交,页面刷新,但我的 ajax 电话实际上没有提交任何内容……你们能看到任何错误吗?
$('.formen').on('submit',function(e){
alert("TEST");
e.preventDefault();
$.ajax({
type: "POST",
url: "booked.php",
data: $('.formen').serialize(),
complete: function(data){
$('#namn, #epost').val('');
},
success: function(response){
alert("Complete!");
}
});
});
我试图在提交表单时发出警报,但什么也没发生
book.php
<form class = "formen" autocomplete="off">
<div class="form-group">
<label for="">Name</label>
<input type="text" id = "namn" class="form-control" name="name">
</div>
<div class="form-group">
<label for="">Email</label>
<input type="email" id = "epost"class="form-control" name="email">
</div>
<input type = 'hidden' name = "datum" id = "datum" value = "<?php echo $date; ?>">
<input type = 'hidden' name = "room" id = "room" value = "<?php echo $room; ?>">
<button class="btn btn-primary" type="submit" name="submit">Submit</button>
</form>
是的,值已定义,我认为问题出在我的提交 function。这是我按下提交时 url 中显示的内容。php?name=David&email=Test%40asdsa&datum=2020-05-28&room=1&submit= 我错过了什么? 我通过单击一个按钮来获取表单,该按钮也包含在 ajax 中:
$(document).on("click", '.boka', function() {
$.ajax({
url:"book.php",
type:"POST",
data:{'date': $(this).data('date')},
success: function(data){
$("#conf").html(data);
}
});
});
将event
传递给您的submit
function 并阻止事件提交表单,这是其默认功能,如下所示:
$('.formen').on('submit', function(event){
event.preventDefault();
.... # your rest of the code
});
PS $('#namn, #epost').val()
条件只会检查name
的值是否存在,如果存在,即使email
值为null
,表单也会被提交
您的代码缺少document.ready() function。
所以这应该提醒测试。 和工作
$(document).ready(function(){
$('.formen').on('submit',function(e){
alert("TEST");
e.preventDefault();
$.ajax({
type: "POST",
url: "booked.php",
data: $('.formen').serialize(),
complete: function(data){
$('#namn, #epost').val('');
},
success: function(response){
alert("Complete!");
}
});
});
});
或者你可以尝试另一种方式。 1.) 移除表单元素
2.) 添加加载器 div 以在提交期间显示文本
3.) 添加result div来展示服务端的数据
4.) 在提交表单中将formen变量添加到 class
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.formen').click(function(e){
e.preventDefault();
var name = $('#name').val();
var email = $('#email').val();
var datum = $('#datum').val();
var room = $('#room').val();
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if(name==""){
alert('please Enter name');
}
else if(email==""){
alert('please Enter Email');
}
else if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email Address")
return false;
}
else{
$('#loader').fadeIn(400).html('<br><span> Please Wait, Your Data is being Submitted</span>');
var datasend = "name="+ name + "&email=" + email + "&datum=" + datum + "&room=" + room;
$.ajax({
type:'POST',
url:'booked.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(data){
$('#name').val('');
$('#email').val('');
$('#loader').hide();
$('#result').fadeIn('slow').prepend(data);
alert('data submitted');
}
});
}
})
});
</script>
<div class="form-group">
<label for="">Name</label>
<input type="text" id = "name" class="form-control" name="name">
</div>
<div class="form-group">
<label for="">Email</label>
<input type="email" id = "email" class="form-control" name="email">
</div>
<input type = '' name = "datum" id = "datum" value = "">
<input type = '' name = "room" id = "room" value = "">
<div id="loader"></div>
<div id="result"></div>
<button class="formen btn btn-primary" type="submit" name="submit">Submit</button>
booked.php
<?php
echo $name =$_POST['name'];
echo $email =$_POST['email'];
echo $datum =$_POST['datum'];
echo $room =$_POST['room'];
?>
$('.formen').on('submit',function(e){
// preventDefault() method stops the default action of an element from happening.
// https://www.w3schools.com/jquery/event_preventdefault.asp
e.preventDefault();
$.ajax({
type: "POST",
url: "booked.php",
data: $('.formen').serialize(),
success: function(response){
console.log(response);
alert("Complete!");
},
error: function(error){
console.log(error);
},
complete: function(data){
$('.formen').get(0).reset();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.