Ajax Request Issue - Maximum call stack size exceeded

Question

Good afternoon,

I have this simple code below using js but it returns me the error that is in the print below:

I am using Codeigniter 3.0.10, Ajaxm jQuery 3.0.0 Minifed and Bootstrap 4

**Code:*

        jQuery(document).ready(function() {

                var base = $("#base_url").val();
                $('#telefone').mask('(99) 99999-9999');

            jQuery("#form-registrar-estilo").submit(function(e) {

                e.preventDefault();

                var email_validar = $("#email").val();

                for (let el of jQuery('#form-registrar-estilo input')) {
                        if (el.value == "") el.classList.add("error");
                        else el.classList.remove("error");
                    }


                if (!jQuery('#form-registrar-estilo input.error').length) {
                        jQuery.ajax({
                        url:  base + "painel/cadastrar/valida_email",
                        type: "POST",
                        data: {email:email},
                        dataType: "json",

                        success: function(data) {
                            alert(data);
                        }


                    })
                };
            });
        });

Answer 1

The error is in the value of data: ajax:

data: {email:email},

Should be:

data: {email:email_validar},

When using the variable email as argument value email:, is selecting the input element with the id#email instead of the value of the field, and thereby causing an error in jQuery when dealing with the data:, for email, if not declared earlier, it is a global variable referring to the element with id of the same name.