Question

我试图在正确提交后隐藏表单。 ATM，我有这个代码，它保留表单，只显示表单下面的消息成功/错误。如果出现错误，我希望保留表单，因此用户仍然可以提供正确的详细信息，但如果成功，我希望通过隐藏表单来防止他们双重提交。

这是我的.js代码：

$(document).ready(function() {
const form = $('.js-form-contact');
form.submit(function(e) {
    // prevent form submission
    e.preventDefault();

    // submit the form via Ajax
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        dataType: 'html',
        data: form.serialize()
   success: function(result) {
            // Inject the result in the HTML
            $('#form-result').html(result);
        }
});

}）;

我正在考虑创建一个if语句并使用div的类和成功消息，但不确定要应用哪种方法。欢迎任何建议。

这是我的.html.twig文件，我在其中注入了表单：

<div id="{{ page.header.id }}">
    <div class="container">
        <h1>{{ page.header.header }}</h1>
        <div class="contact__form--hide-js">
        {% include "forms/form.html.twig" with {form: forms('contact_form')} %}
        </div>
        <div class="contact__form__bottom">
        </div>

        <div id="form-result"></div>
    </div>
</div>

这里有form-messages.html.twig文件：

{% if form.message %}
    {% set message = form.inline_errors and form.messages ? "FORM.VALIDATION_FAIL"|t : form.message %}

    <div class="alert notices {{ form.message_color ?: 'green' }}"><p>{{ message|raw }}</p></div>
{% endif %}

希望有所帮助。

Answer 1

您可以使用.ajax()请求代替.submit()，请阅读API文档以获取更多信息。

＆＃13;

$.ajax({
  'url': url,
  'type': 'POST',
  'data': $('.contact__form--hide-js').serialize()
}).done( function(data){
   $('.contact__form--hide-js').hide();
}).fail(function(jqXHR, textStatus, errorThrown){
   console.log( errorThrown );
});

＆＃13;

或者您可以使用.post()请求

＆＃13;

$.post( "url_to_file")
.done(function() {
  alert( "success" );
})
.fail(function() {
  alert( "error" );
})
.always(function() {
  alert( "finished" );
});

＆＃13;

如何在提交后隐藏表单，但不在错误时隐藏（jQuery）

1 个答案: