具有两个按钮和 ajax 的 sumbit 窗体

Question

>我有一个用ajax制作的表单，在这个表格中有2个提交，两者都具有与发送电子邮件相同的功能，但根据用户是否使用一个或另一个，电子邮件必须指示此选择。

我尝试使用 isset 函数查看要提交的两个按钮中的哪一个，但是当我收到此参数时它是空的。

网页表单

<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 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'."rn";
$headers .= 'Content-type:text/html;charset=utf-8'."rn";
$headers .= 'From:noreplay@'.$web."rn";
$headers .= 'Reply-To:'.$email."rn";
$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

您可以将操作存储在隐藏的输入中。 您的服务器将接收数据，您将能够读取它。接下来，一个非常简单的方法向您展示方法：

$('.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>