未捕获的ReferenceError：HTMLButtonElement.onclick中未定义submitToAPI

Question

I am creating a form filling website it should return alert message if contact,email is not up to our standard.

But I am getting this error Uncaught ReferenceError: submitToAPI is not defined at HTMLButtonElement.onclick

var URL is I am passing these data to AWS API gateway and trigger a lambda function.

form html code

<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name here…" class="form-control" style="width:100%;" /><br/>
<h4>Company Name:</h4>
<input type="text" style="height:35px;" id="cname-input" placeholder="Enter name here…" class="form-control" style="width:100%;" /><br/>
<h4>Contact Number:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number" class="form-control" style="width:100%;"/><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email here…" class="form-control" style="width:100%;"/><br/>4>
<div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control" style="width:100%;"></div>
<button type="button" onClick="submitToAPI(event)" class="btn btn-lg" style="margin-top:20px;">Submit</button>

javascript

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
function submitToAPI(e) {
       e.preventDefault(e);
       var URL = "https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact";

            var e_name = /[A-Za-z]{1}[A-Za-z]/;
            if (!e_name.test($("#name-input").val())) {
                         alert ("Name can not less than 2 char");
                return;
            }
        var e_cname = /[A-Za-z]{1}[A-Za-z]/;
            if (!e_cname.test($("#cname-input").val())) {
                         alert ("Name can not less than 2 char");
                return;
            }
            var e_phone = /[0-9]{10}/;
            if (!e_phone.test($("#phone-input").val())) {
                alert ("Please enter valid mobile number");
                return;
            }
            if ($("#email-input").val()=="") {
                alert ("Please enter your email id");
                return;
            }

            var e_email = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
            if (!e_email.test($("#email-input").val())) {
                alert ("Please enter valid email address");
                return;
            }

       var e_name = $("#name-input").val();
       var e_cname = $("#cname-input").val();
       var e_phone = $("#phone-input").val();
       var e_email = $("#email-input").val();

       var data = {
          name : e_name,
      cname : e_cname,
          phone : e_phone,
          email : e_email,

        };

       $.ajax({
         type: "POST",
         url : "https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact",
         dataType: "json",
         crossDomain: "true",
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify(data),


         success: function () {
           // clear form and show a success message
           alert("Successfull");
           document.getElementById("contact-form").reset();
       location.reload();
         },
         error: function () {
           // show an error message
           alert("There is some issue with our servers please contact our landline for enquiry");
         }});
     }
</script>

Answer 1

You are using the script tag with a src attribute, your browser is only executing the remote JS ( Jquery )

Create a new script tag without the src and add your code in this new block!

Answer 2

Correct way is to first load jQuery as your script is dependent on it.

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</script>

After that you can include your script

<script> 
$(document).ready(function () {
  function submitToAPI(e) {
         // your code
}
});

</script>

Make sure jQuery is properly loaded into your page. Check network tab in dev console, make sure there is no "404".

$(document).ready(function () {
  // This code is being loaded after jQuery has been initialized
});