One form 2 submit buttons 2 actions

Question

I have a form. Form has 1 action and 1 submit button. If I press submit it makes validation and if everything is ok it sends data to third-party site and card payment is done on that site and mail is sent to owner of the site that transaction has been made. Now I want to add another submit button that only send email. I have form like this:

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

and then I have fields like name, e-mail etc.

and submit button:

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

So I tried this:

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

and this:

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

but nothing works. So if somebody can help me I would appreciate it.

Now i added script that validate on submit click and I added process.php which sends mail. Validations is ok but when it needs to be proceeded to process.php it gives an error because it constantly adds domain name in front of path to process.php. Process.php is located inside theme folder and I defined path to like publichtml/pagename.com/wp/content/themes/mytheme/process.php and in console it says page can not be found http://www.example.com/publichtml/pagename.com/wp/content/themes/mytheme/process.php.

---

Now i made ajax call so it sends email on another button.

$(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;
}

and my 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;
    }

but I can not get values? Anybody knows where I made mistake?

Answer 1

I changed type to get and now it works.

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

So to have 2 action on 1 form just add second button and post it to php.

Answer 2

While clicking on the Submit Button 2, the form will be submitted before updating the action. So the result would be Same Action Page for both the buttons. You can use the preventDefault(); to prevent the form being submitted on click. Here is a working code:

<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>