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

        
<form autocomplete="off">
    <div class="form-group col-sm">
        <label for="fname">First Name</label>
        <input type="text" name="fname" id="fname" class="form-control">
    </div>
    <div class="form-group col-sm">
        <label for="lname">Last Name</label>
        <input type="text" name="lname" id="lname" class="form-control">
    </div>
    <div class="form-group col-sm">
        <button class="btn btn-primary" type="submit" id="submitBtn">Submit</button>
    </div>
</form>

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");   
        }

    }
});
})
});

Answer 1

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");   
        }
      }
    });
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<form id="myForm" autocomplete="off">
  <div class="form-group col-sm">
    <label for="fname">First Name</label>
    <input type="text" name="fname" id="fname" class="form-control">
  </div>
  <div class="form-group col-sm">
    <label for="lname">Last Name</label>
    <input type="text" name="lname" id="lname" class="form-control">
  </div>
  <div class="form-group col-sm">
    <button class="btn btn-primary" type="submit" id="submitBtn">Submit</button>
  </div>
</form>