JavaScript不适用于表单内的按钮

Question

我正在尝试第一次同时使用JavaScript和PHP。

据我所知，PHP要求“提交”按钮位于表单标签内。 但是，由于某些原因，仅当提交按钮位于表单外部时，JavaScript才起作用。 如果在表单标签内移动提交按钮，则会出现以下错误：“ index.html：94 Uncaught TypeError：submitBtn不是函数”。

有没有一种方法可以1）使PHP与表单外的按钮一起使用？ 或者2）使JavaScript可以与表单内的按钮一起使用？

HTML：

<form>
    <div class="form" id="form">
        <label for="name">Name</label><br>
            <input type="text" name="username" id="name"><br>
                <label for="email">Email</label><br>
                <input type="text" name="username" id="email"><br>
                <label for="comment">Reason for contacting</label><br>
                <textarea rows="3" id="comment" name="comment"></textarea>
                <br>
    </div>      
    <button type="button" name="submitButton" id="submitBtn" onclick="submitBtn()">SEND</button>
</form>

JavaScript：

function submitBtn() {
    var name = document.getElementById('name');
    var email = document.getElementById('email').value;
    var comment = document.getElementById('comment');
    if(name.value.length > 1 && name.value.length < 50) {
        if(email.length > 5 && email.length < 50 && email.indexOf('@') >= 0 && email.indexOf('.') >= 0 && !(email.indexOf(' ') >= 0)) {
            if(comment.value.length > 9 && comment.value.length < 500) {
        alert("Thanks");
            } else {
        alert("Message must be between 10 and 500 characters");
    }
        } else {
  alert("Not a valid email");
}
    } else {
alert("Name must be longer than three characters");
    }
};

Answer 1

将按钮的ID更改为SubmitBtnId

元素的ID和函数的名称不能相同，因为它们都是标识符。

<button type="button" name="submitButton" id="submitBtnId" onclick="submitBtn()">SEND</button>

Answer 2

您必须更改函数名称或按钮ID，因为两者相同。