alert message in jQuery causing the jQuery code to run again and again Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of alert message in jQuery causing the jQuery code to run again and again without wasting too much if your time.

The question is published on by Tutorial Guruji team.

The following code is used to avoid duplicates input fields in HTML form

$(document).ready(function() {
  $(".classesName").submit(function(e) {
    e.preventDefault();
    var frm = document.querySelector('form.classesName');
    frm.addEventListener('submit', function(e) {
      e.preventDefault();
      var classArr = [];
      console.log("HI"); // To show that ajax is called again and again
      var inputs = frm.querySelectorAll('input[type=text]');
      inputs = Array.from(inputs); // So as to avoid UPPERCASE and lowercase i.e, HEL and hel
      for (var i = 0; i < inputs.length; i++) {
        inputs[i] = inputs[i].value.toUpperCase();
        console.log(inputs[i]);
        if (classArr.indexOf(inputs[i].value) != -1) {
          alert("Duplicate Name Found");
          return false;
        } else
          classArr.push(inputs[i].value);
      }
      frm.submit();
    });
  });
});

The problem is that when i enter HELLO and hello in the HTML form an alert message occurs saying the error, when i click ok and then edit to say HELLO and NEW.

#PROBLEM : the ajax call starts again, so now the alert message occurs twice when there is no duplicate values.

F12 BROWSER OUTPUT

HI
2HELLO
HI
HELLO
NEW
HI
HELLO
NEW

Answer

The problem is that you’re creating multiple event listeners. $(".classesName").submit() creates a jQuery listener. When you call that it creates a regular JavaScript listener with frm.addEventListener(). The next time you submit, it runs both event listeners, and also adds another event listener.

You don’t need to add the listener multiple times. Just use the jQuery listener.

Another problem is that you’re replacing inputs[i] with its uppercase value, but then you’re using inputs[i].value when searching classArr. Since inputs[i] is now a string, it doesn’t have a .value property. Instead of replacing the array element, use a new variable.

$(document).ready(function() {
  $(".classesName").submit(function(e) {
    e.preventDefault();
    var classArr = [];
    console.log("HI"); // To show that ajax is called again and again
    var inputs = $(this).find('input[type=text]');
    for (var i = 0; i < inputs.length; i++) {
      var val = inputs[i].value.toUpperCase();
      console.log(val);
      if (classArr.indexOf(val) != -1) {
        alert("Duplicate Name Found");
        return false;
      } else
        classArr.push(val);
    }
    this.submit();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="classesName">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit">
</form>
We are here to answer your question about alert message in jQuery causing the jQuery code to run again and again - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji