How to check if you've already entered the number in a dynamic input using JS

Question

I got stacked with this problem:

I just want to check if the number I entered is already entered in a dynamic inputs, then if it is, you cannot entered that number again, unless you delete it.
You can only enter a number up to the number of inputs (e.g. if you have 10 inputs, then you can only enter NOT greater than 10)

$(document).ready(function(){
  var arrayLen = $('.question').length;
  var numArray = [];
  var convertedArray;
  for(i = 1; i <= arrayLen; i++){
   numArray.push(i);
  }
 
  var currentVal;
  var maxAllowed = numArray[numArray.length - 1];
  var hasValue = [];
   
  $('.question').on('input', function(){
    currentVal = this.value;
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
  }).bind('keyup', function(){
   if(currentVal <= maxAllowed){
     $("#result").html("available");
    } else{
     $("#result").html("not available");
      return false;
    }
  });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="shortAnswer"><br><br>
<input type="text" class="question" placeholder="shortAnswer"><br><br>
<input type="text" class="question" placeholder="description"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>

<span id="result"></span>

You can't really do this via key events, because if there are ten inputs and one of them already contains the number "1" you wouldn't be able to enter the number "10" in another one (unless you pasted in "10" from the clipboard rather than typing a "1" followed by a "0"). — nnnnnn, Aug 31 '17 at 02:40
IDs need to be unique, you can't have multiple `id="question[]"` inputs. — Barmar, Aug 31 '17 at 02:40
@nnnnnn Indeed Sir. So, maybe you have an answer to my question? because I think you're a JavaScript master. — Jie, Aug 31 '17 at 02:45
@Barmar Why Sir? Please state it, together with your answer, so we can figure it out — Jie, Aug 31 '17 at 02:45
See https://stackoverflow.com/questions/14274982/how-can-i-apply-a-jquery-function-to-all-elements-with-the-same-id — Barmar, Aug 31 '17 at 02:46
@Barmar Nice link. Anyway, do you have any solution with my problem now? — Jie, Aug 31 '17 at 02:48
@Barmar I've updated my code now, changed `id` into `class`. — Jie, Aug 31 '17 at 02:55

score 0 · Answer 1 · answered Aug 31 '17 at 03:38

I did not do any validation or control what action to happen when your conditions are satisfied.

$(document).ready(function() {

  var $inputObj = $("#input-div input[type=text]");
  var inputCount = $inputObj.length;

  // alert(inputCount);

  $('#question\\[\\]').on('input', function() {

    var $currInput = $(this);
    var currInputVal = $currInput.val();
    console.log(currInputVal);

    var cond1 = currInputVal < inputCount;
    var cond2 = isFreshInput($currInput);

    //console.log("cond2:" + cond2);
    if (cond1 === false || cond2 === false) {
      //TODO action when conditions are satisfied       
      $("#result").html("not available");
      alert("Either value already exist or number is too large");
    } else {
      $("#result").html("available");
    }

  });

  function isFreshInput($currInput) {

    var currInputVal = Number($currInput.val());
    var res = true;

    $inputObj.not($currInput).each(function() {

      let inputVal = Number($(this).val());

      console.log("inputVal:" + inputVal);


      if (currInputVal === inputVal) {
        console.log("input already exist!");
        $(this).css({
          "border": "solid red 1px"
        })
        res = false;
        // return false;  // break loop once found
      }
    });
    console.log("res:" + res);
    return res;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-div">
  <input type="text" id="question[]" placeholder="multipleChoice"><br><br>
  <input type="text" id="question[]" placeholder="trueFalse"><br><br>
  <input type="text" id="question[]" placeholder="shortAnswer"><br><br>
  <input type="text" id="question[]" placeholder="shortAnswer"><br><br>
  <input type="text" id="question[]" placeholder="description"><br><br>
  <input type="text" id="question[]" placeholder="multipleChoice"><br><br>
  <input type="text" id="question[]" placeholder="multipleChoice"><br><br>
  <input type="text" id="question[]" placeholder="trueFalse"><br><br>
  <input type="text" id="question[]" placeholder="trueFalse"><br><br>
  <input type="text" id="question[]" placeholder="multipleChoice"><br><br>
  <input type="text" id="question[]" placeholder="multipleChoice"><br><br>
</div>
<span id="result"></span>

score 0 · Answer 2 · answered Aug 31 '17 at 04:23

Here you go with a solution https://jsfiddle.net/33zeL2fa/9/

$(document).ready(function(){
  var arrayLen = $('input.question').length;
  var numArray = [];
  var convertedArray = [];
  for(i = 1; i <= arrayLen; i++){
   numArray.push(i);
  }

  $('input.question').keydown(function(e){
  var val = $(this).val();
   if(e.which === 8 || e.keyCode === 8){
     numArray.push(parseInt($(this).attr('newval')));
      $(this).removeAttr('newval');
    } else {
     val += e.key;
      if(numArray.indexOf(parseInt(val)) != -1){
        $('#result').html("available");
        $(this).attr('newval', e.key);
        numArray.splice(numArray.indexOf(parseInt(val)), 1);
      } else{
        $("#result").html("not available");
        e.preventDefault();
      }
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="shortAnswer"><br><br>
<input type="text" class="question" placeholder="shortAnswer"><br><br>
<input type="text" class="question" placeholder="description"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>

<span id="result"></span>

Hope this will help you.

Barmar · Answer 3 · 2017-08-31T05:51:28.617

-1

Don't do this in the input event, because when you're in the middle of typing an input it may match another input, and you won't let them finish editing it. You should use the blur event; this fires when they try to leave the input field.

When they change the input, loop through all the other inputs, and check if this value is the same as any of the others. If it is, show the error.

$(document).ready(function() {
  var maxAllowed = $(".question").length;
  $('.question').on('blur', function() {
    var currentVal = this.value.trim();
    if (currentVal == '') {
      return;
    }
    var msg = "Available";
    if (currentVal < 1 || currentVal > maxAllowed) {
      msg = "Not available";
    } else {
      $('.question').not(this).each(function() {
        if (this.value == currentVal) {
          msg = "Not available";
          return false; // Stop the .each loop
        }
      });
    }
    $("#result").text(msg);
    if (msg == "Not available") {
      $(this).focus(); // Put them back in the bad input field
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="shortAnswer"><br><br>
<input type="text" class="question" placeholder="shortAnswer"><br><br>
<input type="text" class="question" placeholder="description"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="trueFalse"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>
<input type="text" class="question" placeholder="multipleChoice"><br><br>

<span id="result"></span>

edited Aug 31 '17 at 05:51

answered Aug 31 '17 at 03:00

Barmar

669,327
51
454
560

This is great. But, the second problem? – Jie Aug 31 '17 at 03:03
Isn't that what `currentVal > arrayLen` checks? – Barmar Aug 31 '17 at 03:04
`$(this).focus();` // Put them back in the bad input field – Jie Aug 31 '17 at 03:11
No, this doesn't work on submit, it's just on change. – Barmar Aug 31 '17 at 03:12
I've changed it to use `blur` instead of `change`, because the old one allowed you to enter a duplicate if you pressed tab twice -- the second one isn't a change. – Barmar Aug 31 '17 at 03:13
wait. let me check it first before you edit. Please provide all your code, create snippet every edit. – Jie Aug 31 '17 at 03:15
And please add the functionality where I can't enter a number if `currentVal > maxAllowed` – Jie Aug 31 '17 at 03:17
It's already there. Don't you see `if (currentVal < 1 || currentVal > maxAllowed) {`? – Barmar Aug 31 '17 at 03:19
Try typing `20` and it won't let you leave. – Barmar Aug 31 '17 at 03:20
What do you mean "it won't let you leave" ? It is working with `20`s, and I can leave the input and enter 20 again and again – Jie Aug 31 '17 at 03:21
I type `20` then TAB, it displays "Not available" and stays in that input. – Barmar Aug 31 '17 at 03:24
are you sure with this? It displays "not available", but I can still go to other inputs and type 20 again – Jie Aug 31 '17 at 03:27
I don't know why it's not working for you. It works for me. – Barmar Aug 31 '17 at 03:29
And what if I use mouse to focus in the other field? – Jie Aug 31 '17 at 03:30
The same thing happens for me. – Barmar Aug 31 '17 at 05:26
I'm using Chrome, what are you using? – Barmar Aug 31 '17 at 05:27
I'm using firefox. – Jie Aug 31 '17 at 05:45
You're right, it doesn't work in FF. See https://stackoverflow.com/questions/7046798/jquery-focus-fails-on-firefox – Barmar Aug 31 '17 at 05:53

How to check if you've already entered the number in a dynamic input using JS

3 Answers3