Sumbit form with two buttons and ajax

Question

I have a form made with ajax, in this form there are 2 submits, both have the same function as sending an email but depending on whether the user uses one or the other the email must indicate this selection.

I tried to use the isset function to see which of the two buttons to submit but when I receive this parameter it is empty.

HTML form

<form id="form-landing" data-ajax="<?php echo admin_url('admin-ajax.php?action=contactlanding'); ?>">

    <?php while (have_posts()) : the_post();
        the_content();
    endwhile; ?>
    <?php wp_nonce_field(); ?>

    <div id="step1">
        <div class="group-form">
            <p>1.- question 1</p>
            <div>
                <label for="afrontarsi">Yes</label><input type="radio" name="afrontar" value="Si" id="afrontarsi">
                <label for="afrontarno">No</label><input type="radio" name="afrontar" value="No" id="afrontarno">
            </div>

        </div>

        <div class="group-form">
            <p>2. - Question 2</p>
            <div>
                <input type="text" name="importe" id="importe"> €
            </div>
        </div>


        <button class="send-button" name="1button" href="">Yes</button>
        <button class="send-button" name="2button" href="">No</button>


</form>

jQuery

if(is_page_template('template-landing.php')): ?>
$('#form-landing').submit(function(e){

  e.preventDefault();
    var form = $(this).addClass('loading');
    var alert = form.find('.alert').removeClass('alert-danger alert-success').html('');
        $.ajax({
        url:form.data('ajax'),
        type:'POST',
        data:new FormData(this),
        processData:false,
        contentType:false,
    }).done(function(data){
        form[0].reset();
        form.find('.btn').prop('disabled',true);
        alert.addClass('alert-success').html(data);
    }).fail(function(error){
        alert.addClass('alert-danger').html(error.responseText);

    }).always(function(){
        form.removeClass('loading');

  });
});
<?php endif;
?>

PHP function

function contactlanding(){

    if(check_ajax_referer()){

        $afrontar = sanitize_text_field($_POST['afrontar']);
        $importe = sanitize_text_field($_POST['importe']);
        if (isset($_POST['1button'])) {$button="First";} else{$button="Second";}        


        $web = parse_url(home_url(),PHP_URL_HOST);
        $message = '<p><strong>Afrontar:</strong> '.$afrontar.'</p>';
        $message .= '<p><strong>Importe:</strong> '.$importe.'</p>';
        $message .= '<p><strong>Button:</strong> '.$button.'</p>';


        $headers  = 'MIME-Version:1.0'."\r\n";
        $headers .= 'Content-type:text/html;charset=utf-8'."\r\n";
        $headers .= 'From:noreplay@'.$web."\r\n";
        $headers .= 'Reply-To:'.$email."\r\n";
        $send = mail(get_bloginfo('admin_email'),'Mensaje enviado desde '.$web,$message,$headers);
        if($send==true){
            echo 'Gracias, tu mensaje se ha enviado correctamente.';exit;
        }
    }
    http_response_code(400);echo 'Algo salió mal, por favor intenta más tarde.';exit;
}

Answer 1

You can store the action in an hidden input. Your server will receive the data, and you will be able to read it. Next, a very simple approach to show you the way :

$('.send-button').on('click', function (){  $(this).closest('form').find('[name="action"]').val($(this).data('submit')) 
})

$('form').on('submit', function(evt) {
  // form content :
  console.log($(this).serialize());
  // prevent form submission for the demo
  evt.preventDefault();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="firstname" value="Johon" /> 
  <input type="hidden" name="action" value="" /> 
  <button class="send-button" name="1button" href="" data-submit="yes">Yes</button>
  <button class="send-button" name="2button" href="" data-submit="no">No</button>
</form>