时间戳

首页 > 解决方案 > 当需要填写表格时，如何禁用弹出成功消息？

javascript - 当需要填写表格时，如何禁用弹出成功消息？

问题描述

我计划在单击提交按钮时显示成功消息。但是，每当需要填写表格时，我想禁用或隐藏成功消息。那么如何通过更改脚本中的代码来做到这一点？请帮助我，非常感谢您的支持！

这是我的代码：

<div class="contact-wrapper">
  <main class="flex-container">
    <section class="main-content">
      <form class="contact-form" action="index.html" method="post" onsubmit="return false">
        <input type="text" class="contact-form-text" placeholder="Name" id="name" required/>
        <input type="email" class="contact-form-text" placeholder="Email" id="email" required/>
        <input type="text" class="contact-form-text" placeholder="Title">
        <textarea class="contact-form-text" placeholder="Type your message..."></textarea>
        <button>Send</button>

        <div class="alert">
          <span class="message">Success: You Message Sent Successfully!</span>
        </div>
      </form>
    </section>

<script>
  function validateForm() {
    var name =  document.getElementById('name').value;
    var name =  document.getElementById('email').value;
  }

  $('button').click(function(){
    $('.alert').addClass("show");
    $('.alert').addClass("showAlert");
    $('.alert').removeClass("hide");
    setTimeout(function(){
      $('.alert').addClass("hide");
      $('.alert').removeClass("show");
    },3000);
  });
</script>

标签： javascripthtmlforms

解决方案

考虑最初隐藏消息并仅在成功提交时显示

<div class="alert hide">
     <span class="message">Success: You Message Sent Successfully!</span>
</div>

仅当表单验证返回 true 时才应显示警报。

function validateForm() {
    var name =  document.getElementById('name').value;
    var email =  document.getElementById('email').value;
    if(name == '' || name == null || email == '' || email == null){
       alert("Please Fill All Required Field");
       return false;
      }
    return true;
  }

$('button').click(function(){
     if(validateForm()){
       // your code for submission
       // after successful submission display the alert message
       $('.alert').removeClass("hide");
       $('.alert').addClass("show");
       $('.alert').addClass("showAlert");    
     }
    
  });

我建议您遵循form validationand的标准格式form submission。链接在这里

推荐阅读