用户的 JavaScript 表单

问题描述

我需要这方面的帮助 所以我创建了一个表单，但我希望当用户单击复选框时弹出一条警告消息和一条消息。我如何使用 onsubmit 事件来做到这一点？

当新用户填写表单时，输出应如下所示。new user 当返回的用户填写表单时，它应该看起来像这样。 Returning user

这是我的代码，但我无法使用 onsubmit 事件

<form>
    <table>
        <tr>
            <td>
                <label for="uname"> Enter Name: </label> <br> <br>
            </td>
            <td>
                <input type="text" id="uname" name="username" onblur="myFunction()" onsubmit="return validateForm()" method="post" required> <br> <br> 
            </td>
        </tr>
        <tr>
            <td>
                <label for="uemail">Enter Email: </label>
            </td>
            <td>
                <input type="text" id="uemail" name="usermail" onblur="myFunction()" onsubmit="return validateForm()" method="post" required>
    </table>
    <br>
         <label>Write question below:</label>
         <br> 
         <textarea rows="2" cols="40"></textarea>
    <br> <br> 
    <input name = "contacting" type = "checkBox" value = "contacting" onblur="myFunction()" onsubmit="return validateForm()" method="post" /> <label>First time contacting me?  </label> 
    <br> 
    <p> <input type = "submit" value = "send" />

    </form>
    <style>
        div {
          text-align: left;
        }
      </style>

解决方法

您的问题中没有任何“代码”，只是标记，但是...

删除所有这些：

onblur="myFunction()" onsubmit="return validateForm()"

对于第一次使用复选框，您可以执行以下简单操作：

<input name="contacting" type="checkbox" value="contacting" onclick="if (this.checked){ alert('Thank you for contacting me!');}" /> <label>First time contacting me?  </label> 

你的表单标签应该是这样的：

<form onsubmit="return validateForm()">

并且在 validationForm() 函数中，您可以捕获如下返回用户：

function validateForm() {
  // ... all your current validation stuff
  // if the validation doesn't check out,you can display an alert if you like,but must return false to prevent the form submit from going through
  // for example: if (!ok) return false
  // once you've validated all the inputs and are ready to submit...
  let name = document.querySelector('[name="name"]').value
  if (!document.querySelector('[name="contacting"]').checked) alert(`Welcome back ${name}!`);
  return true;
 }

注意 不建议使用诸如“onsubmit”和“onclick”之类的内联事件处理程序。执行这些操作的正确方法是在页面加载后在您的 javascript 中设置它们，例如

document.querySelector('[name="contacting"]').addEventListener('click',(e) => {
if (e.target.getAttribute('checked')) alert('Thanks for ...');
})