Sumbit form with two buttons and ajax - php

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>