CODEWITHSUNDEEP
javascripthtmlvalidationselect
indefinite
indefinite

Reputation: 431

Is there a way to validate 2 select tag in html with the same options? using javascript

I'm trying to build a website, where I have two select tag and both tags have the same options(origin and destination) so both select tag can't have the same submitted options. my question is how can I validate if the user send same value options?

I tried doing some code to validate it, but it doesn't work since I'm new at javascript I don't know what else to do. thank you in advance!

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>

my expected output is that there should be an alert message that select(origin) and select (destination) must not have the same value and so the user can't submit the form.

Upvotes: 0

Views: 117

Answers (3)

yunzen
yunzen

Reputation: 33439

Move the onsubmit to the form:

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>

Or better, use 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>

Upvotes: 2

Andrew Daly
Andrew Daly

Reputation: 537

What about this, you don't need to submit the form to validate it in this case:

 <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>

Upvotes: 0

p0rter
p0rter

Reputation: 989

Although there are many other ways to achieve this, this one should actually work. Tiny detail you have missed:

onsubmit belongs to the <form> and not to the <input>!

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

Upvotes: 2

Related Questions