Uncaught ReferenceError: submitToAPI не определен в HTMLButtonElement.onclick

Question

Я создаю веб-сайт, заполняющий форму, он должен возвращать предупреждающее сообщение, если контакт, электронная почта не соответствует нашему стандарту.

Но я получаю эту ошибку Uncaught ReferenceError: submitToAPI не определен в HTMLButtonElement.onclick

var URL-адрес: я передаю эти данные в шлюз API AWS и запускаю лямбда-функцию.

Форма HTML-код

<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

Правильный способ - сначала загрузить jQuery, поскольку ваш скрипт зависит от него.

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

После этого вы можете включить свой скрипт

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

</script>

Убедитесь, что jQuery правильно загружен на вашу страницу. Проверьте вкладку сети в консоли разработчика, убедитесь, что нет «404».

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

Answer 2

Вы используете тег script с атрибутом src, ваш браузер только выполняет удаленный JS (Jquery)

Создайте новый тег script без src и добавьте свой код в этот новый блок!