Question

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

填写所有必填字段后，＆＃34;发送消息＆＃34;单击按钮，表单应该消失，成功消息应该淡入，但是在那一刻，单击按钮时表单不执行任何操作。

这是我正在使用的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;
});

Javascript表单不能正常工作

2 个答案: