Javascript 表单无法正常工作

Question

我目前正在尝试创建一个我在之前开发的其他网站上使用过的联系表格，但是，我遇到了这个问题。 如果未填写必填字段，则错误消息应在提交按钮附近淡出并显示“...是必需的”。

填写完所有必要字段并单击“发送消息”按钮后，表单应该会逐渐消失，并且成功消息应该会逐渐消失，但是此时，当您单击时，表单什么也不做按钮。

这是我正在使用的 HTML；

<form id="contactForm" action="#" method="post">
  <fieldset>
    <div><input name="name" type="text" id="name" title="Name" value="Name &#8226;" /></div>
    <div><input name="email" type="text" id="email" title="Email" value="Email &#8226;" /></div>
    <div><input name="number" type="text" id="number" title="Contact Number" value="Contact number" /></div>
    <div><input name="datepicker" type="text" id="datepicker" title="Date required" value="Date required"><div id="datepicker"></div></div>
    <div><textarea name="message" class="form-poshytip" id="message" title="Message">Enter your message below; &#8226;</textarea></div>

发送邮件配置；

<!-- send mail configuration -->
    <input type="hidden" value="my@email.co.uk" name="to" id="to" />
    <input type="hidden" value="You have mail" name="subject" id="subject" />
    <input type="hidden" value="send-mail.php" name="sendMailUrl" id="sendMailUrl" />
<!-- ENDS send mail configuration -->

    <p><input type="button" value="Send message" name="Button" id="submit"  span id="error" class="warning"></span></p>
  </fieldset>
</form>

我尝试从

更改按钮的输入类型

<input type="button" 到 <input type="submit"

所做的只是在不发送表单的情况下重新加载页面。

这是我的 Javascript 代码；

// hide messages 
$("#error").hide();
$("#sent-form-msg").hide();

// on submit...
$("#contactForm #submit").click(function() {
    $("#error").hide();

    // number
    var number = $("input#number").val();

    //datepicker
    var name = $("input#datepicker").val();

    //required:

    //name
    var name = $("input#name").val();
    if(name == ""){
        $("#error").fadeIn().text("Name required.");
        $("input#name").focus();
        return false;
    }

    // email
    var email = $("input#email").val();
    if(email == ""){
        $("#error").fadeIn().text("Email required.");
        $("input#email").focus();
        return false;
    }

    // message
    var message = $("#message").val();
    if(message == ""){
        $("#message").fadeIn().text("Message required.");
        $("input#message").focus();
        return false;
    }       

    // send mail php
    var sendMailUrl = $("#sendMailUrl").val();

    //to, from & subject
    var to = $("#to").val();
    var from = $("#from").val();
    var subject = $("#subject").val();

    // data string
    var dataString = 'name='+ name
                    + '&email=' + email
                    + '&message=' + message
                    + '&to=' + to
                    + '&from=' + from
                    + '&subject=' + subject;                                 
    // ajax
    $.ajax({
        type:"POST",
        url: sendMailUrl,
        data: dataString,
        success: success()
    });
});  


// on success...
 function success(){
    $("#sent-form-msg").fadeIn();
    $("#contactForm").fadeOut();
 }

return false;

我一遍又一遍地尝试让它工作，但它没有......而且它没有任何意义为什么它不在我正在开发的这个网页上但在其他网页上......

是否有一些我看不到的东西我错过了，或者这段代码完全被嘲笑了？

Answer 1

尝试包含这个

$(document).ready(function(){
   //your code here
});

Answer 2

javascript 中的函数捕获单击按钮，但如果您没有捕获它，您的表单当前正在工作.. 试试这段代码，希望对您有所帮助 将您的代码更改为

$("#contactForm").submit(function(e) {
    $("#error").hide();

    // number
    var number = $("input#number").val();

    //datepicker
    var name = $("input#datepicker").val();

    //required:

    //name
    var name = $("input#name").val();
    if(name == ""){
        $("#error").fadeIn().text("Name required.");
        $("input#name").focus();
        return false;
    }

    // email
    var email = $("input#email").val();
    if(email == ""){
        $("#error").fadeIn().text("Email required.");
        $("input#email").focus();
        return false;
    }

    // message
    var message = $("#message").val();
    if(message == ""){
        $("#message").fadeIn().text("Message required.");
        $("input#message").focus();
        return false;
    }       

    // send mail php
    var sendMailUrl = $("#sendMailUrl").val();

    //to, from & subject
    var to = $("#to").val();
    var from = $("#from").val();
    var subject = $("#subject").val();

    // data string
    var dataString = 'name='+ name
                    + '&email=' + email
                    + '&message=' + message
                    + '&to=' + to
                    + '&from=' + from
                    + '&subject=' + subject;                                 
    // ajax
    $.ajax({
        type:"POST",
        url: sendMailUrl,
        data: dataString,
        success: success()
    });
    return false;
});