ajax提交表单以后,页面会弹回顶部

发布于 2022-09-06 10:44:33 字数 2636 浏览 10 评论 0

基于laravel做的一个表单提交功能,每次填写完表单,点击提交时,会显示提交成功,但页面会弹回到页面顶部,这事为什么?
页面效果截图:

clipboard.png

clipboard.png

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

︶ ̄淡然 2022-09-13 10:44:33

阻止了表单的默认事件了么?

公布 2022-09-13 10:44:33

你的swal函数中做了什么处理?

清风挽心 2022-09-13 10:44:33

表单的submit默认事件会自动刷新页面,可能是这个问题

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文