When inserting data to database using JavaScript Error creates in console 'Maximum call stack size exceeded'

Question

I searched a lot to fix my JavaScript Error I'm facing from the last few days. I see lots of questions answered on StackOverFlow, but unfortunately, no one is matching to my error.

What I want is to send a simple record to the database using JavaScript and PHP.

but I'm getting "jquery.js:8638 Uncaught RangeError: Maximum call stack size exceeded" error in Console.
Thanks for your response.

My simple HTML code

        

    
        First Name
        
    
    
        Last Name

And javaScript code

$(document).ready(function(){
$("#submitBtn").on("click",function(e){
e.preventDefault();
var fname = $("#fname").val();
var lanme = $("#lname").val();

$.ajax({
    url : "insertData.php",
    type : "POST",
    data : {fname:fname, lname:lname},
    success : function(data){
        if(data == 1){
            tableData();
        }else{
         alert("Can't save record");   
        }

    }
});
})
});

user_13669048 · Answer

You can use submit function on your form instead of using a click function on type="submit" button.

Also, you had the wrong variable typed in while sending the ajax request its lname but you have it as lanme

Live Demo: (Code tested and works)

$(document).ready(function() {
  $("#myForm").on("submit", function(e) {
    e.preventDefault();

    //Values
    var fname = $("#fname").val();
    var lname = $("#lname").val();

    //Ajax
    $.ajax({
      url: "insertData.php",
      type: "POST",
      data: {
        fname: fname,
        lname: lname
      },
      success: function(data) {
        if (data == 1) {
          //tableData();
        } else {
          //alert("Can't save record");   
        }
      }
    });
  })
});




  
    First Name
    
  
  
    Last Name

user_4151043 · Answer

Created a question from this post: Why the form field ids are populated as JavaScript variables on submit button click?

There is a bit more to the problem - why the stack overflow exception from jquery instead of some indication for the misspelled variable.

Consider this code:

As you can see, the variable a is defined and references the HTML element with the id "a". Can anybody explain why?

This is what happened in the original code - the lname field in the data JSON was set to a reference of an HTML element, which is handled badly by jquery, meaning it lead to an infinite recursion.

When inserting data to database using JavaScript Error creates in console 'Maximum call stack size exceeded'

2 Answers