Javascript 表单无法正常工作

Posted 2023-03-03

【中文标题】Javascript 表单无法正常工作

【英文标题】：Javascript form not working as should

【发布时间】：2016-03-11 03:49:42

【问题描述】：

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

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

这是我正在使用的 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="[e-mail]" 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;

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

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

【问题讨论】：

例如，它应该像这样工作； (klfrxbrand.com/Contact.html)

[offtopic]那不是 PHP，那是 JavaScript[/offtopic]

“这是我拥有的 PHP 代码” - 那是 JS，而不是 PHP。检查错误，检查您的控制台。 “发送邮件配置” - 配置？

您的网络服务器响应 405 - 不允许用于访问此页面的 HTTP 动词。 ***.com/questions/6841139/…

<input type="hidden" value="[e-mail]" name="to" id="to" /> 电子邮件收割机很快就会明白这一点！您违背了使用电子邮件表单的目的。把它放在你的 PHP 中。

【参考方案1】：

尝试包含这个

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

【参考方案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;
);