-1

I want to loop through all the input elements and find if the same value exists.

For example when a user inserts 1(one) and then inserts again the number 1(one), I would like to apply CSS to change the background color of the input element for these 2 equal values or no matter how many they may be.

If the user tries to insert an alphanumerical value then JavaScript handles the code and adds the selected-wrong-input CSS class.

I would like on that element to have a setInterval for 2 seconds and take out the alphanumerical value from the input in order for the user to be able to insert a number again.

I don't mind if the proposed solution is with JavaScript, jQuery or a combination of both.

The html code:

<div class="bus-builder-seat-box-container" id="dynamic-bus-builder-1">       
  <input id="posA100" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA101" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA102" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA103" type="text" class="input seat_box" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA104" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA105" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA106" type="text" class="input seat_box selected" onchange="bc.seatBoxHandleEvent(this)">
  <input id="posA107" type="text" class="input seat_box selected-wrong-input" onchange="bc.seatBoxHandleEvent(this)">
</div>

The JavaScript code. The first is the event which is called in the html input element onchange

bc.seatBoxHandleEvent = function (el) {
  bc.checkInput(el);

  var seatNumberFirstFloor = $('#dynamic-bus-builder-1');

  if (seatNumberFirstFloor && seatNumberFirstFloor.valueOf()) {
    var leftStreaming = (event.target.id);
    var rightStreaming = 'posB1' + leftStreaming.substring(5, 7);
    document.getElementById(rightStreaming).innerHTML = event.target.value;
  }
}

bc.checkInput = function (el) {

  let $el = $(el); 

  var targetValue = event.target.value;
  var id = event.target.id;
  var classOfInput = event.target.classList;

  if (targetValue !== 8 && targetValue !== 0 && (targetValue < 48 || targetValue > 57)) {
    console.log('valid number');
    console.log(classOfInput);
    $(el).toggleClass('selected');

  }
  else {
    console.log('invalid character');
    $(el).toggleClass('selected-wrong-input');
    //console.log(el.value);
  }

  var array = new Array(120);
  var existsValue = false;

  for(var i = 0; i <= array.length; i++) {
    console.log(el.value);
    console.log(i);
    if (el.value === array[i]) {
        console.log('hi');
        console.log(el.value);
        console.log(array[i]);

        var existsValue = true;
        console.log('existsValue');
        console.log('equal number forbidden');
        //break;
    }
  }
chris niko
  • 112
  • 1
  • 12
  • 1
    did you consider using `input type="number"`, if you want to allow only numeric characters? – AmeRyoki Mar 23 '17 at 09:37
  • It would be very helpful but I may want to allow alphanumeric values in the future to add additional functionality. – chris niko Mar 23 '17 at 09:43
  • @chrisniko If you want to allow alphanumeric in the future, then deal with the code changes then. Don't write code for what you might need in the future but for what you need right now - See [**YAGNI**](https://martinfowler.com/bliki/Yagni.html). At this time setting the input to numeric is the best solution for your current requirement. Best of all it requires no code so you are flexible in changing it easily going forward. The day you want to allow Alphanumeric values and have all the requirements for that use-case in hand you change your code. – Nope Mar 23 '17 at 09:49
  • @chrisniko In regards to your duplicate entry requirement, I would suggest to record entries in a JavaScript object as you enter them, recording the element id and the value. The method you call each time an entry is added/changed within the object instead of iterating through the DOM each time. You can then do a jQuery `.removeClass` on all elements before assigning your required CSS to the ids with duplicate values. – Nope Mar 23 '17 at 09:58
  • @Fran Its inevitable because I finally want to allow the alphanumeric values for sure... – chris niko Mar 23 '17 at 09:58
  • @chrisniko `I finally want to allow the alphanumeric values for sure.` Then why say `I may want to allow alphanumeric values in the future` ? Very confusing feedback. - You need to update your question as it currently implies not to allow alphanumerics ► `I would like on that element to have a setInterval for 2 seconds and take out the alphanumerical value from the input in order for the user to be able to insert a number again.` – Nope Mar 23 '17 at 09:59
  • @Fran I got an update on the functionality and this is the way it has to be developed... So this is the case: I would like on that element to have a setInterval for 2 seconds and take out the alphanumerical value from the input in order for the user to be able to insert a number again. – chris niko Mar 23 '17 at 10:05
  • @chrisniko So if you remove the alphanumeric value every time then you don't allow alphanumeric entries. I'm lost why in that case you don't use numeric inputs. Going by the requirements from your comments where you say `Alphanumerics are allowed` and the requirements in your question `Only numbers are allowed.` they seem to be in direct contradiction with each other on that. Sorry if I don't understand the requirements correctly :( – Nope Mar 23 '17 at 10:13
  • 1
    @chrisniko Fair enough, for checking if an entry is numeric see this ► [**jquery keyup function check if number**](http://stackoverflow.com/questions/17209180/jquery-keyup-function-check-if-number) and to clear a value `$(element).val('')` As you are not using a numeric input you also want to check the expected behavior for `User enters a number and then an alphanumeric character` Will only the last character be removed or the whole value, etc... - What if users copy pastes text containing both, numbers and alphanumeric after entering a number - What if users enters a letter between numbers – Nope Mar 23 '17 at 10:36
  • 1
    Also is it a requirement to have interval of 2 seconds before your remove the value? Why not remove right away? `IsNaN()` function is a good way to check for number input in JS. Also I'd suggest to use a `keyup` event instead of `onchange` – AmeRyoki Mar 23 '17 at 10:40

1 Answers1

1

I'd suggest to use IsNaN() function to check if the input is a number. Also a keyup event is better for input fields. 

var inputList = [];
 $('.seat_box').keyup(function(elem){  
   if(IsNaN(elem.value)) return;  //input isn't numeric, add your functionality
   if (!valueExists(elem)) inputList.push(elem.value);
   else //dublicate value, add functionality   
 });

function valueExists(elem) {
  $(".seat_box").each(function(elem) {
    if ($.inArray(this.value, inputList) != -1) return true;
    else return false;
  });
}
AmeRyoki
  • 376
  • 1
  • 3
  • 14
  • I would like to do it as it is implemented right now but check for equal values... I have added this small javascript block of code: `var seatBoxArray = new Array(120); for (var i = 0; i <= seatBoxArray.length; i++) { console.log(targetValue); console.log(seatBoxArray[i]); //undefined if (targetValue === seatBoxArray[i]) { console.log('equalNumber'); } }` but it returns undefined (see //comments on code) – chris niko Mar 23 '17 at 12:42