[英]Ajax submit doesn't submit anything
Looked into this post but didn't help me im afraid, at the moment I press submit and the page refreshes but nothing is actualy submitted with my ajax call... Can you guys see any error?看了这篇文章,但恐怕没有帮助我,此刻我按下提交,页面刷新,但我的 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!");
}
});
});
I tried to put an alert when the form is submitted but nothing happend我试图在提交表单时发出警报,但什么也没发生
book.php 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>
And yes the values are defined, I think the problem is my submit function. This is what shows in my url when i press submit.php?name=David&email=Test%40asdsa&datum=2020-05-28&room=1&submit= What am I missing?是的,值已定义,我认为问题出在我的提交 function。这是我按下提交时 url 中显示的内容。php?name=David&email=Test%40asdsa&datum=2020-05-28&room=1&submit= 我错过了什么? I get the form by clicking on a button which I aswell include with ajax:
我通过单击一个按钮来获取表单,该按钮也包含在 ajax 中:
$(document).on("click", '.boka', function() {
$.ajax({
url:"book.php",
type:"POST",
data:{'date': $(this).data('date')},
success: function(data){
$("#conf").html(data);
}
});
});
Pass the event
to your submit
function and prevent the event from submitting the form which is its default functionality like this:将
event
传递给您的submit
function 并阻止事件提交表单,这是其默认功能,如下所示:
$('.formen').on('submit', function(event){
event.preventDefault();
.... # your rest of the code
});
PS $('#namn, #epost').val()
condition would only check if the value of name
is present, if it does the form will get submitted even if the email
value is null
PS
$('#namn, #epost').val()
条件只会检查name
的值是否存在,如果存在,即使email
值为null
,表单也会被提交
Your code lacks document.ready() function.您的代码缺少document.ready() function。
so this should alert TEST.所以这应该提醒测试。 and works
和工作
$(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!");
}
});
});
});
or you can try another way.或者你可以尝试另一种方式。 1.) Remove the form elements
1.) 移除表单元素
2.) Add loader div to show a text during submision 2.) 添加加载器 div 以在提交期间显示文本
3.) Add result div to display data from server end 3.) 添加result div来展示服务端的数据
4.) add formen variable to class in a submit form 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 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.