时间戳

首页 > 解决方案 > 用户的 JavaScript 表单

javascript - 用户的 JavaScript 表单

问题描述

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

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

这是我的代码，但我无法使用 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>

标签： javascripthtmlformseventsonsubmit

解决方案

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

删除所有这些：

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

推荐阅读