按下按钮后如何使 "submit" 表单从 Ajax 开始工作

Question

我有表格，需要使用 Ajax。当我在键盘上按下“输入”后发送电子邮件时一切正常。当我想在 HTML 中使用“按钮”时，它不起作用。我尝试在我的 JS 文件中为我的按钮使用“单击”，但它刷新了页面，我只是在空白页面上收到消息（自定义消息）。

 <form action="{{ route('odh.giftcode.email') }}" id="report"  method="post" name="form" style="text-align:center;">
        {{csrf_field()}}
        <input type="email" id="email" name="email"  class="section1_input" required  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Đại Hiệp vui lòng để lại Email">

        <span class="section1_message"style="display:block" id="result"> Vui lòng đăng ký = email của bạn để chúng tôi có thể gửi quà về</span>

        <button class="btn btn-outline section1_button" id="submit_form" type ="button" name="submit">
            <img class="" src="{{asset('images/ohdaihiepLandingPage/form/form_button.png')}}" style="width:100%;" alt="">
        </button>
    </form>

还有我的 JS

$(function () {
    $('#report').submit(function (e) {
        e.preventDefault()
        var url = e.target.action
        var formData = $(this).serialize()
        $.post(url, formData, function (response) {
            $('.section1_input').val('');
            var $res=response.message;
            $('#result').text($res);
        });
        $(".section1_message").empty()
    })
})

Answer 1

将您的按钮类型从 button 更改为 submit。它应该可以正常工作，否则将您的事件触发器更改为 click.

check this for more detail

按下按钮后如何使 "submit" 表单从 Ajax 开始工作

How make "submit" form work from Ajax after push on button

jquery

ajax

laravel

forms

submit