时间戳

首页 > 解决方案 > 未捕获的 ReferenceError：在 HTMLButtonElement.onclick 中未定义 submitToAPI

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

问题描述

我正在创建一个表格填写网站，如果联系方式、电子邮件不符合我们的标准，它应该返回警报消息。

但是我收到了这个错误 Uncaught ReferenceError: submitToAPI is not defined at HTMLButtonElement.onclick

var URL 是我将这些数据传递给 AWS API 网关并触发 lambda 函数。

表单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>

标签： javascripthtmldom

解决方案

正确的方法是首先加载 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
});

推荐阅读