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

Question

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

Why are you calling `frm.addEventListener` inside `$(".classesName").submit()`? — Barmar, Jun 30 '20 at 15:12
Each time you submit you append a new handler, so it will keep being invoked more and more times with each submit. — Alex, Jun 30 '20 at 15:13
@Barmar i am new, so i don't know i removed it and tried still same — NR17, Jun 30 '20 at 15:17
@Alex yes, but how do i remove the previos handler or anything else — NR17, Jun 30 '20 at 15:18

Barmar · Accepted Answer · 2020-06-30T15:32:36.160

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>

I tried it but it shows the alert message when i click submit button, even when there is no duplicates in the input field. like click submit then alert ok, click submit then alert ok and so on. — NR17, Jun 30 '20 at 15:26
The problem is with the way you use `inputs[i].value` after replacing `inputs[i]` with its value. I've updated the answer. — Barmar, Jun 30 '20 at 15:33
See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Jun 30 '20 at 15:45
The above code itself solved even for dynamic forms. Thank You — NR17, Jun 30 '20 at 15:55

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

1 Answers1