ajax提交表单以后,页面会弹回顶部
基于laravel做的一个表单提交功能,每次填写完表单,点击提交时,会显示提交成功,但页面会弹回到页面顶部,这事为什么?
页面效果截图:
HTML代码:
<div class="d-flex flex-column justify-content-between align-items-center mb-5">
<h3 class="contact-text text-uppercase">send us message if you have any questions</h3>
<div class="d-flex flex-column justify-content-between align-items-center w-75">
<div class="form-group">
<label for="exampleFormControlInput1">Your Name</label>
<input type="text" name="name" class="form-control" placeholder="How could we address you?" id="form-name">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Working Email</label>
<input type="email" name="email" class="form-control" placeholder="name@example.com" id="form-email">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Cell Phone</label>
<input type="phone" name="phone" class="form-control" placeholder="+CountryCode ..." id="form-phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Your Question</label>
<textarea class="form-control" name="question" rows="3" placeholder="Please enter your info" id="form-question"></textarea>
</div>
<button class="btn btn-outline-primary btn-lg" id="submit-form" onclick="ajaxseed();return false;">Send Message</button>
</div>
</div>
JS代码:
// form sublime
function ajaxseed() {
var name = $('#form-name').val();
var email = $('#form-email').val();
var phone = $('#form-phone').val();
var question = $('#form-question').val();
$.ajax({
type: "POST",
url: url,
data: data,
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
success: function(){
swal('success', 'We received your advise', 'success');
$('#form-name').val('');
$('#form-email').val('');
$('#form-phone').val('');
$('#form-question').val('');
}
});
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
阻止了表单的默认事件了么?
你的swal函数中做了什么处理?
表单的submit默认事件会自动刷新页面,可能是这个问题