Question 36519 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to prevent form submission if only one out of two paired inputs is filled out – Jquery

I have a pair of inputs. I have no problem with a user leaving the both of them blank. But what I need is a way to force the user to fill the second input field if he decides to fill the first input field and vice versa(or prevent form submission in the event of that).

Here are my input elements:

<input name="cas[]" id="ca">
<input name="exams[]" id="exam">

<button type="submit" id="submit">Submit</submit>

I would also appreciate if there is also an implementation for multiple input pairs.

Tags:

2

Answers


  1. 0

    You can create a custom myXOR function to check whether the two values are different:

    // script.js

/**
* Returns true if values are different
*/
function myXOR(a,b) {
  return (a || b) && !(a && b);
}

    Then call it on the change event for either inputs, so the button is disabled if at any point only one input is filled in.

    // page.html

<form id="form">
  <input name="cas[]" id="ca">
  <input name="exams[]" id="exam">
  <button type="submit" id="submit">Submit</button>
</form>

    // script.js

// Get elements from DOM
const form = document.querySelector("#form");
const examInput = document.querySelector("#exam");
const caInput = document.querySelector("#ca");
const button = document.querySelector("#submit");

const handleChange = e => {
  // !! to cast value to boolean
  // Will disable button if values are different, ie. if one input is filled and the other isn't
  if(myXOR(!!examInput.value, !!caInput.value)) {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

// Listen for changes on either input
examInput.addEventListener("change", handleChange);
caInput.addEventListener("change", handleChange);
    Login or Signup to reply.
  2. 0

    A simple script like this should do the trick:

    var cas = document.getElementById("ca");
var exams = document.getElementById("exam");

cas.onkeyup = function() {nosubmit()}
exams.onkeyup = function() {nosubmit()}

function nosubmit() {
  if ((cas.value != "" && exams.value == "") || (cas.value == "" && exams.value != "")) {
    document.getElementById("submit").disabled = true;
  } else {
    document.getElementById("submit").disabled = false;
  }
}
    <input name="cas[]" id="ca">
<input name="exams[]" id="exam">

<button type="submit" id="submit">Submit</button>

    UPDATE:

    For more than one pair if inputs give them a class name instead of (or as well as) an id and then do this:

    var cas = document.getElementsByClassName("ca");
var exams = document.getElementsByClassName("exam");
var numOfPairs = cas.length;

window.oninput = function() {
  if (nosubmit().includes("d")) {
    document.getElementById("submit").disabled = true;
  } else {
    document.getElementById("submit").disabled = false;
  }
}

function nosubmit() {
  var check = ""
  for (i = 0; i < numOfPairs; i++) {
    if ((cas[i].value != "" && exams[i].value == "") || (cas[i].value == "" && exams[i].value != "")) {
      check += "d";
    } else {
      check += "e";
    }
  }
  return check
}
    <input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">
<br><br>
<input value="" name="cas[]" class="ca">
<input value="" name="exams[]" class="exam">

<button type="submit" id="submit">Submit</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search