有没有办法用相同的选项验证 html 中的 2 个选择标签?使用 JavaScript

不定

我正在尝试建立一个网站,其中我有两个选择标签,并且两个标签都有相同的选项(来源和目的地),因此两个选择标签不能具有相同的提交选项。我的问题是如何验证用户是否发送相同的值选项?

我尝试做一些代码来验证它,但它不起作用,因为我是 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在没有javascript的HTML选择标签中对选项进行排序

来自分类Dev

在没有javascript的HTML选择标签中对选项进行排序

来自分类Dev

有没有办法在 Javascript/HTML 中单击按钮更新现有数组?

来自分类Dev

有没有办法使用 select2 为下拉列表中的每个选项添加描述?

来自分类Dev

有没有办法检查HTML / Javascript中是否单击了按钮?

来自分类Dev

有没有办法在HTML元素中获取javascript变量的值?

来自分类Dev

有没有办法找出JavaScript中更改HTML属性的行?

来自分类Dev

有没有办法使用css在html中隐藏没有id或class的元素?

来自分类Dev

有没有办法用Node JS在把手中嵌套2个不同的对象

来自分类Dev

有没有办法在autoit中使用firefox来填写html中没有表单标签的表单?

来自分类Dev

有没有办法使用 Flask (jinja2) 从带有用户输入的 HTML 表中删除一行?

来自分类Dev

有没有办法在html图像标签中显示位图数据?

来自分类Dev

如何使用JavaScript验证HTML中的“选择”标签

来自分类Dev

有没有办法在angular2组件中使用index.html中声明的全局变量?

来自分类Dev

有没有办法在Angular 7中为模板html属性* key *使用变量?

来自分类Dev

有没有办法使用Angularjs在HTML元素中显示数组json对象

来自分类Dev

有没有办法使用javascript从图片src网址中获取数字?

来自分类Dev

有没有办法使用JavaScript中的FileReader获取文件的特定部分?

来自分类Dev

有没有办法断开JavaFX LineChart中串联的2个点?

来自分类Dev

Google 表格:有没有办法在公式中包含 2 个非嵌套的 IF 语句?

来自分类Dev

有没有办法跟踪使用Javascript从哪个window.name打开新窗口(在新选项卡中打开)?

来自分类常见问题

有没有办法从Angular 2+中删除未使用的导入和声明?

来自分类Dev

有没有办法在特定的div中加载用javascript生成的html?

来自分类Dev

有没有办法使用jQuery从选择项中获取标签?

来自分类Dev

有没有办法用JavaScript中的单字母替换双字母?

来自分类Dev

有没有办法用JavaScript中的单字母替换双字母?

来自分类Dev

有没有办法在Chrome中的“选择选项元素”上添加事件?

来自分类Dev

有没有办法在下拉列表中显示以前选择的选项

来自分类Dev

有没有办法在新标签页中打开React组件的相同实例?

Related 相关文章

  1. 1

    在没有javascript的HTML选择标签中对选项进行排序

  2. 2

    在没有javascript的HTML选择标签中对选项进行排序

  3. 3

    有没有办法在 Javascript/HTML 中单击按钮更新现有数组?

  4. 4

    有没有办法使用 select2 为下拉列表中的每个选项添加描述?

  5. 5

    有没有办法检查HTML / Javascript中是否单击了按钮?

  6. 6

    有没有办法在HTML元素中获取javascript变量的值?

  7. 7

    有没有办法找出JavaScript中更改HTML属性的行?

  8. 8

    有没有办法使用css在html中隐藏没有id或class的元素?

  9. 9

    有没有办法用Node JS在把手中嵌套2个不同的对象

  10. 10

    有没有办法在autoit中使用firefox来填写html中没有表单标签的表单?

  11. 11

    有没有办法使用 Flask (jinja2) 从带有用户输入的 HTML 表中删除一行?

  12. 12

    有没有办法在html图像标签中显示位图数据?

  13. 13

    如何使用JavaScript验证HTML中的“选择”标签

  14. 14

    有没有办法在angular2组件中使用index.html中声明的全局变量?

  15. 15

    有没有办法在Angular 7中为模板html属性* key *使用变量?

  16. 16

    有没有办法使用Angularjs在HTML元素中显示数组json对象

  17. 17

    有没有办法使用javascript从图片src网址中获取数字?

  18. 18

    有没有办法使用JavaScript中的FileReader获取文件的特定部分?

  19. 19

    有没有办法断开JavaFX LineChart中串联的2个点?

  20. 20

    Google 表格:有没有办法在公式中包含 2 个非嵌套的 IF 语句?

  21. 21

    有没有办法跟踪使用Javascript从哪个window.name打开新窗口(在新选项卡中打开)?

  22. 22

    有没有办法从Angular 2+中删除未使用的导入和声明?

  23. 23

    有没有办法在特定的div中加载用javascript生成的html?

  24. 24

    有没有办法使用jQuery从选择项中获取标签?

  25. 25

    有没有办法用JavaScript中的单字母替换双字母?

  26. 26

    有没有办法用JavaScript中的单字母替换双字母?

  27. 27

    有没有办法在Chrome中的“选择选项元素”上添加事件?

  28. 28

    有没有办法在下拉列表中显示以前选择的选项

  29. 29

    有没有办法在新标签页中打开React组件的相同实例?

热门标签

归档