一个表单 2 个提交按钮 2 个操作

Question

我有一个表格。表单有 1 个操作和 1 个提交按钮。如果我按下提交，它会进行验证，如果一切正常，它会将数据发送到第三方站点，并在该站点上完成卡支付，并将邮件发送给已进行交易的站点所有者。现在我想添加另一个只发送电子邮件的提交按钮。我有这样的表格：

<form name="bookingForm" class="cmxform" id="bookingForm" method="post"  action="third-party-site.php" accept-charset="utf-8">

然后我有姓名、电子邮件等字段

并提交按钮：

<input type="submit" value="PROCEED TO BOOKING" name="submit1" id="submitButton" class="btn btn-info pull-right" title="Click here to submit!"/>

所以我尝试了这个：

$('#submitButton2').click(function(){
$('form[name=bookingForm]').setAttrib('action','send_mail.php');
$('form[name=bookingForm]').submit();
});

还有这个：

$('#submitButton2').click(function(){
$('#bookingForm').attr('action', 'send_mail.php');
});

但没有任何效果。所以如果有人能帮助我，我将不胜感激。

现在我添加了验证提交点击的脚本，我添加了 process.php 来发送邮件。验证是可以的，但是当它需要进行到 process.php 时，它会给出一个错误，因为它不断地在 process.php 的路径前面添加域名。 Process.php 位于主题文件夹内，我定义了喜欢 publichtml/pagename.com/wp/content/themes/mytheme/process.php 的路径，在控制台中它说找不到页面 http://www.example.com/publichtml/pagename.com/wp/content/themes/mytheme/process.php.

现在我进行了 ajax 调用，因此它通过另一个按钮发送电子邮件。

$(document).ready( function() {
$('input[placeholder], textarea[placeholder]').placeholder();
$('#submit2').removeAttr('disabled');



$('#bookingForm').validate({
    debug: true,
    //submitHandler: ajaxSubmit
            rules: {

            },
            messages: {
                first_name: "First name field required.",
                last_name: "Last name field required.",
                email: {
                    required: "Email address required",
                    email: "Email address must be in the format name@domain.com."                        
                }


            }

});

$('#submit2').click( function() {
    if( $('#bookingForm').valid() ) {
            ajaxSubmit();
    }
    else {
        $('label.error').hide().fadeIn('slow');
    }
});

});

function ajaxSubmit() {

$('#bookingForm').attr('disabled', 'disabled');
var firstName = $('#first_name').val();
var lastName = $('#last_name').val();
var email = $('#email').val();


var data = 'firstName=' +firstName+ '&lastName=' +lastName+ '&email='  +email;

$.ajax({
    url: '<?php bloginfo('template_directory'); ?>/process.php',
    type: 'POST',
    dataType: 'json',
    data: data,
    cache: false,
    success: function(response) {
        if( response.error != 'true' ) {
            $('#loading, #bookingForm, .message').fadeOut('slow');
            $('#response').html('<h3>Message sent successfully!    </h3>').fadeIn('slow');
        }
        else {
                $('#loading').fadeOut('slow');
                $('#submit2').attr('disabled', 'disabled');
                $('#response').html('<h3>There was a problem sending mail!</h3>').fadeIn('slow');
        }
    },
    error: function(jqXHR, textStatus, errorThrown) {
                            $('#loading').fadeOut('slow');
            $('#submit2').removeAttr('disabled');
            $('#response').text('Error Thrown: ' +errorThrown+ '<br>jqXHR: ' +jqXHR+ '<br>textStatus: ' +textStatus ).show();
    }
});
return false;
}

和我的 process.php :

<?php

sleep(2);
define('TO', 'example.mail@mail.com');
define('FROM', $_POST['email']);
define('SUBJECT', 'inquiry');
$isValid = true;
$return = array("error" => "false");
if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
global $return;
if ( sendEmail() ) {
    //return "Message sent successfully!";
    echo json_encode($return);
}
else {
    echo json_encode($return);
}
}
function sendEmail() {
    global $return;
    $body = "";
    $body .= "From: ".$_POST['email']."\nSubject: " . 'inquiry';
    $body .= "\nFirst Name: ".$_POST['first_name'];
    $body .= "\nLast Name: " .$_POST['lastName'];

    if ( @mail( TO, 'inquiry', $body ) ) {
    //if(true) {
        $return['error'] = 'false';
    }
    else {
            $return['error'] = 'true';
    }
    return $return;
    }

但我无法获取值？有人知道我哪里弄错了吗？

Answer 1

点击提交按钮 2 时，将在更新操作之前提交表单。所以结果将是两个按钮的相同操作页面。您可以使用 preventDefault(); 来防止单击时提交表单。这是一个工作代码：

<form action="" method="post" id="bookingForm">
    <input type="submit" value="Payment" name="s1" id='s1'>
    <input type="submit" value="Email" name="s2" id='s2'>
</form>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(function() {
       $('#s2').click(function(e){
        alert('hi');
       e.preventDefault();
       $('#bookingForm').attr('action', 'send_mail.php');
       $('#bookingForm').submit();
     });
    });
</script>

Answer 2

我将类型更改为 get，现在可以使用了。

$body .= "\nFirst Name: ".$_GET['firstName'];

因此，要在 1 个表单上执行 2 个操作，只需添加第二个按钮并将其 post 添加到 php。

一个表单 2 个提交按钮 2 个操作

One form 2 submit buttons 2 actions

php

forms

action

submit