按下按钮后如何使“提交”表单从 Ajax 工作

Posted 2023-05-08

【中文标题】按下按钮后如何使“提交”表单从 Ajax 工作

【英文标题】：How make "submit" form work from Ajax after push on button

【发布时间】：2021-04-05 19:49:33

【问题描述】：

我有表单并且需要使用 Ajax。当我在键盘上按“enter”后发送电子邮件时一切正常。当我想在 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%;" >
        </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()
    )
)

【问题讨论】：

您确定页面刷新吗？因为你使用了type="button" .

如果我使用 click ，点击后我会得到带有自定义消息的空白页面 也许我错误地返回查看我的页面，如果我以这种方式使用“输入”，我同样会收到消息 消息：自定义文字

当type="submit" 时将调用您的提交处理程序，因此将type="button" 更改为type="submit" 并重试。

让它成为你的答案。非常感谢你！我在 type="submit" 上更改了类型，它仍然可以正常工作。

【参考方案1】：

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

check this for more detail