JavaScript 用户表单
JavaScript form for users
我需要这方面的帮助
所以我创建了一个表单,但我希望在用户单击复选框时弹出一条警告消息和一条消息。我如何使用 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>
您的问题中没有任何 '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 ...');
})
我需要这方面的帮助 所以我创建了一个表单,但我希望在用户单击复选框时弹出一条警告消息和一条消息。我如何使用 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>
您的问题中没有任何 '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 ...');
})