提交完成后如何显示div而不是单击按钮？答案

【问题标题】：How to show div after Submit is complet instead click button?提交完成后如何显示div而不是单击按钮？
【发布时间】：2016-02-28 18:40:49
【问题描述】：

我有一个包含许多字段表单的联系表单。表单发送一封电子邮件，我想在提交完成后显示一个div（该div有css属性显示无，可见隐藏）。

当我使用 onClick 时，如果我单击一个带有所有空表单的按钮，则会出现 div。有什么帮助吗？

我的 JavaScript 函数：

$(document).ready(function () {
    $('.ipva_form_calculation').submit(function(event){
        $('.ipva_result').show();
            return false;
    });
});

我的 HTML 表单：

<form action="http://localhost/pedespachante/" method="post"       class="avia_ajax_form av-form-labels-hidden   avia-builder-el-4      el_after_av_heading  avia-builder-el-last  ipva_form_calculation av-centered-form  av-custom-form-color av-light-form" data-avia-form-id="1" data-avia-redirect="" style="display: none;">...</form>

【问题讨论】：

所以你想在表单提交后显示一个div？
您需要使用 ajax 并在从 ajax 调用获得成功结果后显示 div。请发布您的一些代码。
@mags 我已经发布了一些代码。

标签： javascript jquery html css forms

【解决方案1】：

使用 jQuery submit() 处理程序代替：https://api.jquery.com/submit/

$('#myForm').submit(function(event) {
  //do some form validations
  $(this).find('input[type="text"]').each(function() {
      if ($(this).val() == '') {
          //one or more fields is empty, hence stop here
          return false;
      }
  });

  $('.div').show();
});

【讨论】：

我就是这样做的，但实际上不起作用:(我已经添加了代码。@divix
您仍然缺少输入验证，我已在代码中添加了一些示例验证。

【解决方案2】：

使用JQuery的提交事件

$('#ur_form_id').submit(function(e) {
  $('.div_class_name').show();
});

【讨论】：

为什么一定要使用e参数？我确实添加了代码，但不起作用，请检查我的更新。

【解决方案3】：

这是表格

<form action="http://localhost/pedespachante/" method="post" id="form_id">
   <input type="text"  name="contact" />
   <div class="error" style="display:none;">Please Fill Contact</div>
</form>

这里是 jquery

$('#form_id').submit(function() {
   $(this).find('input[type="text"]').each(function() {
   if ($(this).val() == '') {
    //one or more fields is empty, hence stop here
      return false;
    }
  });
  $('.error').show();
});

希望它对你有用！

【讨论】：