我希望在单击提交后出现一个消息框

Question

<form name="contactForm" class="customform" action="contact.php" method="post">
            <div class="s-12">
              <div class="margin">
                <div class="s-12 m-12 l-6">
                  <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
                  <p class="name-error form-error">Please enter your name.</p>
                </div>
                <div class="s-12 m-12 l-6">
                  <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
                  <p class="email-error form-error">Please enter your e-mail.</p>
                </div>
              </div>
            </div>
            <div class="s-12"> 
              <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
              <p class="subject-error form-error">Please enter the subject.</p>
            </div>
            <div class="s-12">
              <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
              <p class="message-error form-error">Please enter your message.</p>
            </div>
            <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
            </form>
            
            <script> 
            function A1()
            {
                alert("Thank You!");
                return true;
            }   
            </script>

表单中的所有内容都工作正常，但单击提交后未显示消息框！我只是希望弹出一个消息框，显示“提交已发送！”一旦用户单击“提交”就会出现。我尝试了 onclick="active" 但这个问题是即使整个表单留空它也会弹出。

Answer 1

onsubmit 事件的正确位置是在

<form>

标签内，而不是在按钮元素上。当在表单中使用类型为 submit 的按钮或输入时，必须将“onsubmit”事件附加到

<form>

标签本身。

这是更正后的版本形式：

<form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="A1()">
    <div class="s-12">
      <div class="margin">
        <div class="s-12 m-12 l-6">
          <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
          <p class="name-error form-error">Please enter your name.</p>
        </div>
        <div class="s-12 m-12 l-6">
          <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
          <p class="email-error form-error">Please enter your e-mail.</p>
        </div>
      </div>
    </div>
    <div class="s-12"> 
      <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
      <p class="subject-error form-error">Please enter the subject.</p>
    </div>
    <div class="s-12">
      <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
      <p class="message-error form-error">Please enter your message.</p>
    </div>
    <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
    </form>
    
    <script> 
    function A1()
    {
        alert("Thank You!");
        return true;
    }   
    </script>

Answer 2

要让用户点击提交后弹出消息框，需要调整标签中的onsubmit属性，以正确调用A1()函数。目前，它只是将属性设置为“A1”，但应该是 onsubmit="return A1()" 才能正确调用该函数并处理表单提交。这是带有消息框的更正后的表格：

<form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="return A1()">
  <div class="s-12">
    <div class="margin">
      <div class="s-12 m-12 l-6">
        <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required>
        <p class="name-error form-error">Please enter your name.</p>
      </div>
      <div class="s-12 m-12 l-6">
        <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required>
        <p class="email-error form-error">Please enter your e-mail.</p>
      </div>
    </div>
  </div>
  <div class="s-12"> 
    <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required>
    <p class="subject-error form-error">Please enter the subject.</p>
  </div>
  <div class="s-12">
    <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea>
    <p class="message-error form-error">Please enter your message.</p>
  </div>
  <div class="s-12"><button class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div>
</form>

<script> 
function A1() {
    alert("Submission has been sent!");
    return true;
}   
</script>

此更改将确保仅在表单提交成功时才弹出消息框。