Question

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

但是我遇到此错误Uncaught ReferenceError：HTMLButtonElement.onclick上未定义SubmitToAPI

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>

Answer 1

您正在使用带有script属性的src标记，您的浏览器仅执行远程JS（Jquery）

创建一个没有script的新src标记，并将代码添加到这个新块中！

Answer 2

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

未捕获的ReferenceError：未在HTMLButtonElement.onclick上定义SubmitToAPI

2 个答案: