-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;
    }
  }
10
  • 1
    did you consider using input type="number", if you want to allow only numeric characters? Commented Mar 23, 2017 at 9:37
  • It would be very helpful but I may want to allow alphanumeric values in the future to add additional functionality. Commented Mar 23, 2017 at 9: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. 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. Commented Mar 23, 2017 at 9:49
  • 1
    @chrisniko Fair enough, for checking if an entry is numeric see this ► 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 Commented Mar 23, 2017 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 Commented Mar 23, 2017 at 10:40

1 Answer 1

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;
  });
}
Sign up to request clarification or add additional context in comments.

1 Comment

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.