I have a simple html code as below

<input type="text" id="key" name="key">
<input type="text" id="value" name="value">
<button id="check">Check</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

and I have related jQuery code as well

var keyArray = [];
var valueArray = [];
$("#check").click(function() {
  var keyVal = $("#key").val();
  var valueVal = $("#value").val();
  keyArray.push(keyVal);
  valueArray.push(valueVal);
  console.log(keyArray);
  console.log(valueArray);
  for ($i = 0; $i < keyVal.length; $i  ) {
    //Need to add some code here to check
  }
});

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

What I want is, whenever if someone click the Check button, it has to check if there is a similar item added before into the respective index of keyArray and valueArray. Eg: First I add 1 into the id key and 2 into the id value. If I add 1 and 2 into key and value fields a second time, it should prompt me such a pair already added.

How can I achieve this with JavaScript or jQuery?

CodePudding user response：

var keyArray = [];
var valueArray = [];
$("#check").click(function() {
  var keyVal = $("#key").val();
  var valueVal = $("#value").val();
  var exist=false;
  
  if(keyArray.length>0){
    for (i = 0; i < keyArray.length; i  ) {
    if(keyArray[i]==keyVal && valueArray[i]==valueVal)
    {
      console.log("pair exist");
      exist=true;
      break;
    }
  }
  }  
  if(!exist)
  {
     keyArray.push(keyVal);
     valueArray.push(valueVal);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="key" name="key">
<input type="text" id="value" name="value">
<button id="check">Check</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you want, you can introduce a third array and store data in it, and compare it with your value.

var keyArray = [];
var valueArray = [];
var newArray = [];
$("#check").click(function() {
  var keyVal = $("#key").val();
  var valueVal = $("#value").val();
  
  var isExist = false;
  for (i = 0; i < newArray.length; i  ) {
     if(newArray[i].key == keyVal && newArray[i].value == valueVal ){
      isExist = true; 
      break;
     }
     else{
      isExist = false;
     }
  }
  
 
  if (isExist){
      alert("such a pair already added");
  }
  else{
     keyArray.push(keyVal);
     valueArray.push(valueVal);
     newArray.push({ key : keyVal, value : valueVal });
  }
  
  console.log(keyVal);
  console.log(valueVal);
  console.log(newArray);
  
  

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="key" name="key">
<input type="text" id="value" name="value">
<button id="check">Check</button>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>