使用表单参数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应该继续正常提交。

但是，当我运行它时，它永远不会对contactmail.php进行ping操作（我试图通过页面上的快速警报对其进行测试）。 这是故意的吗？ 我什至可以在o​​nSubmit中执行第二页吗？ 或者只能为此采取行动？

Answer 1

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

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

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

下一个问题是您在函数中声明了一个函数，但从未真正执行内部函数。 我也看不到这里需要两个函数，这完全是多余的，而且不必要冗长

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

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 function contactmail.php return true 。 另外，当使用true时，我使用window.location重定向到“ thank you页面。

Answer 2

我认为您应该使用jquery serialize() 。 像这样的东西：

$('#commentForm').submit(function(e) {
    e.preventDefault();
       $.ajax({
         type: 'post',
         url: 'contactmail.php',
         data:$(this).serialize(),
         success: function(data){
             return true;
         }
     });
});

然后，在您的contactmail.php文件中，所有数据都将在$_POST 。 请注意， $_POST _ $_POST的索引将与输入的属性名称相同。