Есть ли способ проверить 2 выберите тег в HTML с теми же параметрами? используя JavaScript

Question

Я пытаюсь создать веб-сайт, где у меня есть два тега select, и оба тега имеют одинаковые параметры (источник и место назначения), поэтому оба тега select не могут иметь одинаковые отправленные параметры. мой вопрос, как я могу проверить, если пользователь отправляет те же параметры значения?

Я пытался создать какой-то код для его проверки, но он не работает, так как я новичок в 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) не должны иметь одинаковое значение, поэтому пользователь не может отправить форму.

Answer 1

Переместите 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>

Answer 2

Хотя есть много других способов добиться этого, этот должен действительно работать.Крошечные детали, которые вы пропустили:

onsubmit принадлежит <form>, а не <input>!

<form action="" onsubmit="submitForm()">

Answer 3

Как насчет этого, вам не нужно отправлять форму для проверки в этом случае:

 <script>
    function validateForm(){
        var origin = document.getElementById("origin");
        var destination = document.getElementById("destination");
        if(origin.value == destination.value){
            alert("origin and destination can't be the same");
        }
    }
</script>

<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="button" value="Validate" onclick="validateForm()">
    </form>