为什么在按下按钮时不会执行此html表单

时间:2016-12-12 00:00:40

标签: javascript jquery html5 forms function

我将我的javascript链接到html代码,但是当按下按钮时,没有警报/弹出窗口。我不明白按钮是如何工作的。我的代码在哪里错了?

<form method="post" onSubmit="return formcontact();">

                <table align="center" cellpadding="5" width="500">
                <tr>
                <td><b>Name:</b></td>
                <td><input name="name" id="name" type="text" maxlength="50" placeholder="Full Name" style="width:350px; border:1px solid black;" class="ui-corner-all" ></td>
                </tr><tr>
                <td><b>Phone number:</b></td>
                <td><input name="phonenumber" id="phonenumber" type="text" maxlength="23" placeholder="Phone Number" style="width:350px; border:1px solid black;" class="ui-corner-all" ></td>
                </tr><tr>
                <td><b>Email address:</b></td>
                <td><input name="email" id="email" type="text" maxlength="50" placeholder="Email Address" style="width:350px; border:1px solid black;" class="ui-corner-all" ></td>
                </tr><tr>
                <td><b>Comments and questions:</b></td>
                <td><textarea name="comments" id="comments" rows="7" cols="35" style="width:350px; border:1px solid black;" class="ui-corner-all"></textarea></td>
                </tr><tr>
                </table> <br />


                <button type="button" class="contact1" onclick="formcontact()">Submit</button>
                <p id="submit"> </p>
                </form>

function formcontact(){
    var x = getElementById("name").value
    var u = getElementById("phonenumber").value
    var m = getElementById("email").value 
    var stay = getElementById("comments").value 
    var middle = m.indexOf("@");
    var end = m.lastIndexOf(".");

    if (x == ""){
        alert("Please fill out name. It is required.");
        return false
    }
    if (u == ""){
        alert("Please fill out phone number. It is required.");
        return false 
    }
    if (m == ""){
        alert("Please fill out email. It is required.");
        return false 
    }
    if (middle < 1 || middle < end +2 || end +2>=x.length) {
        alert("Sorry, but this is not a valid e-mail address");
        return false;
    }
    if (stay == ""){
        alert("Please enter the comments or questions field.")
    }
    var enter = "Thank You. Your message has been submitted";
    document.getElementById("submit").innerHTML = enter;
}

https://jsfiddle.net/u0rbjvqL/

1 个答案:

答案 0 :(得分:0)

几个问题:

  • &#34; formcontact未定义&#34;。 JSFiddle在访问函数时遇到问题,因此将其更改为formcontact = function(){(使其成为全局范围)
  • 它是document.getElementById()' not just getElementById()`

基本上使用您的F12控制台查看错误并逐个排序:)