JavaScript 用户表单

Question

我需要这方面的帮助所以我创建了一个表单，但我希望在用户单击复选框时弹出一条警告消息和一条消息。我如何使用 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>

Answer 1

您的问题中没有任何 'code'，只是标记，但是...

删除所有这些：

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() 函数中，您可以捕获 return 用户，如：

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 ...');
})

JavaScript 用户表单

JavaScript form for users

javascript

html

forms

events

onsubmit