javascript - 使用表单参数 onSubmit 运行 PHP 脚本(发送电子邮件)

Question

我正在尝试制作一个表单，该表单使用 onSubmit 来运行脚本/将一些数据传递到 PHP 页面，然后再执行操作并离开该站点。

我这样做的原因是设置一封确认电子邮件，发送给输入表单的人，同时表单操作会保存他们输入的信息。

我已经尝试了所有我能想到的方法，所以我对粗糙的代码感到抱歉。

这是我的表格:

<form id="commentForm" action="contactmail.php" method="post" onSubmit="">

    <input type="hidden" name="formId" value="/*InsightlyKeyString*/"/>

    <p class="normal">
        <label for="insightly_firstName">First Name * :<br></label>
        <input id="insightly_firstName" name="FirstName"  type="text" placeholder=" First Name"/>
    </p>

    <p class="normal">
        <label for="insightly_lastName">Last Name :<br></label>
        <input id="insightly_lastName" name="LastName"  type="text" placeholder=" Last Name" />
    </p>
    <p class="normal">
        <input type="hidden" name="emails[0].Label" value="Work"/>
        <label for="emails[0]_Value">E-Mail * :</label>
        <input id="emails[0]_Value" type="email" name="email" class="emails" placeholder=" your@email.com"/>
    </p>
    <p class="normal">
        <input type="hidden" name="phones[0].Label" value="Work" id="phones"/>
        <label for= "phones[0]_Value">Phone * :</label>
        <input id="phones[0]_Value" name="phones" type="text" placeholder="(incl. Area Code) Contact No. "/>
        <span id="instructions">Fields marked with an * required</span>
    </p>

    <p class="normal">
        <input class="buttoninput" type="submit" value="Submit"/>
    </p>

这是我的 javascript:

    var fname = $('#insightly_firstname').val();
var lname = $('#insightly_lastName').val();
var email = $('.emails').val();
var phone = $('.phones').val();

//$.post("contactmail.php", {FirstName: fname, LastName: lname, email: email, phones: phone});
//      From a previous attempt - is it right track?

function sendMail(){          

var fname = $('#insightly_firstName').val();
var lname = $('#insightly_lastName').val();
var email = $('.emails').val();
var phone = $('.phones').val();

function mailUser(email, fname, lname){
    alert('MAILING USER NOW');
    $.ajax({
        type: 'post',
        url: 'contactmail.php',
        data:{
            uemail: email,
            ufname: fname,
            ulname: lname
        },
        success: function(data){
            return true;
        }
    });

}

所以基本上我设想的工作方式是我的表单应该运行 sendMail()，使用 ajax 调用将数据传递给 contactmail.php(一个只包含 echo 和 mail() 的临时文件)，如果它返回 true 应该继续正常提交。

当我运行它时，它从不 ping contactmail.php(我试图通过页面上的快速警报来测试它)。这是故意的吗？我什至可以让辅助页面在 onSubmit 中执行吗？还是只能为此使用操作？

Answer 1

我没有看到 .submit() 函数，您可以在其中使用 return false; 停止它，因此您可以触发您的 ajax 请求。

$('form').on('submit', function(){
    sendMail();
    return false; //stop the default form submission
});

现在使用此函数调用 sendMail()。但是需要对其进行修改，以便在您从服务器收到真正的回复时正确执行重定向。

下一个问题是您在函数内声明了一个函数，但从未实际执行内部函数。我也没有看到这里需要两个功能，它完全是多余的并且 unnecessarily verbose

现在我们需要修改发送邮件函数并确定完成后我们希望重定向到的位置。

function sendMail(){          

    $.ajax({
        type: 'post',
        url: 'contactmail.php',
        data:{
            uemail: $('.emails').val(),
            ufname: $('#insightly_lastName').val(),
            ulname: $('#insightly_firstName').val()
        },
        success: function(data){
            if(data == true){
                window.location = 'mysite.com/thank-you.php';
            }
        }
    });
}

上面有两点需要注意。我已经删除了您的变量分配。再一次，它过于冗长。无需声明一个仅供使用一次的变量。此外，我正在寻找 success 函数 中 contactmail.php 的 return true。此外，我还使用了 window.location 重定向到 thank you 页面。