我正在尝试建立一个网站,其中我有两个选择标签,并且两个标签都有相同的选项(来源和目的地),因此两个选择标签不能具有相同的提交选项。我的问题是如何验证用户是否发送相同的值选项?
我尝试做一些代码来验证它,但它不起作用,因为我是 javascript 新手,我不知道还能做什么。先感谢您!
console.clear()
function submitForm() {
var origin = document.getElementById("origin").value;
var destination = document.getElementById("destination").value;
if (origin == destination) {
alert("origin and destination can't be the same");
}
}
<form action="">
<select name="origin" id="origin">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<select name="destination" id="destination">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<input type="submit" value="submit" onsubmit="submitForm()">
</form>
我的预期输出是应该有一条警告消息, select(origin) 和 select (destination) 不能具有相同的值,因此用户无法提交表单。
移动onsubmit
到表格:
console.clear()
function submitForm(e) {
var origin = e.target.querySelector("[name=origin]").value;
var destination = e.target.querySelector("[name=destination]").value;
if (origin == destination) {
e.stopPropagation()
e.preventDefault()
alert("origin and destination can't be the same");
return false;
}
}
<form action="#" onsubmit="submitForm(event)">
<select name="origin">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<select name="destination">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<input type="submit" value="submit">
</form>
或者更好,使用 addEventListener
console.clear()
function submitForm(e) {
var origin = e.target.querySelector("[name=origin]").value;
var destination = e.target.querySelector("[name=destination]").value;
if (origin == destination) {
e.stopPropagation()
e.preventDefault()
alert("origin and destination can't be the same");
return false;
}
}
document.getElementById('flight').addEventListener('submit', submitForm)
<form action="#" id="flight">
<select name="origin">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<select name="destination">
<option value="manila">manila</option>
<option value="QC">QC</option>
<option value="makati">Makati</option>
<option value="marikina">marikina</option>
</select>
<input type="submit" value="submit">
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句