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（）的临时文件）和if它返回true应继续正常提交。

当我运行它时，它从不pinging 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页面。

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

使用表单参数onSubmit运行PHP脚本（发送电子邮件）

2 个答案: