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

Question

我正在尝试创建一个使用onSubmit运行脚本/将一些数据传递给PHP页面的表单，然后再执行操作并将其定向到站点之外。

我这样做的原因是设置一个确认电子邮件发送给某人进入表单，而表单操作保存他们通过insightly输入的信息。

我已经试过了我所能想到的一切，所以我很抱歉那些杂乱无章的代码。

这是我的表格：

<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 (一个只包含回送和邮件()的临时文件)，如果它返回true，则应该继续正常提交。

但是，当我运行它时，它从不点击contactmail.php (我试图用页面上的快速警报来测试它)。这是故意的吗？我甚至可以得到一个在onSubmit中执行的第二个页面吗？或者只能用行动来解决这个问题？

Answer 1

我没有看到.submit()函数使用return false;来停止它，这样就可以触发ajax请求。

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

现在从withi调用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';
            }
        }
    });
}

上面有两件事要注意。我已经删除了你的可变任务。再说一遍，太冗长了。不需要只声明变量一次就可以了。此外，我正在寻找一个return true从contactmail.php在您的success function。此外，我还使用window.location重定向到thank you页面(如果为true )。

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的索引将与输入的属性名称相同。