目前我有一个联系人表单工作，但我需要隐藏表单本身发送成功后。当"成功"消息运行时，我正在考虑击中javascript调用，但我不知道如何做到这一点。
如何隐藏表单，但保留成功消息，如果它已经完成?
提前感谢!
<?php
//response generation function
$response = "";
//function to generate response
function my_contact_form_generate_response($type, $message){
global $response;
if($type == "success") $response = "<div class='success'>{$message}</div>";
else $response = "<div class='error'>{$message}</div>";
}
//response messages
$not_human = "<div class='alert alert-danger'>Verificatie incorrect.</div>";
$missing_content = "<div class='alert alert-danger'>U heeft niet alle verplichte velden ingevuld</div>";
$email_invalid = "<div class='alert alert-danger'>Incorrect e-mail adres.</div>";
$message_unsent = "<div class='alert alert-danger'>Bericht niet verzonden. Probeer opnieuw.</div>";
$message_sent = "<div class='alert alert-success'>Bedankt, wij nemen binnenkort contact met u op</div>";
//user posted variables
$name = $_POST['message_name'];
$email = $_POST['message_email'];
$phone = $_POST['message_phone'];
$message = $_POST['message_text'];
$human = $_POST['message_human'];
$totalmessage = "
Naam: $name 'n
Telefoonnummer: $phone 'n
E-mail: $email 'n
Bericht: $message 'n ";
//php mailer variables
$to = "$curauth->user_email";
$subject = "Bel mij terug";
$headers = 'From: email@email.com' . "'r'n" .
'Reply-To: email@email.com' . "'r'n" .
'X-Mailer: PHP/' . phpversion();
if(!$human == 0){
if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
else {
//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
my_contact_form_generate_response("error", $email_invalid);
else //email is valid
{
//validate presence of name and message
if(empty($name)){
my_contact_form_generate_response("error", $missing_content);
}
else //ready to go!
{
$sent = wp_mail($to, $subject, $totalmessage, $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
}
}
}
}
else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
?>
<div id="respond">
<?php echo $response; ?>
<form action="<?php the_permalink(); ?>" method="post">
<p><label for="name">Uw naam (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
<p><label for="message_phone">Uw Telefoonnummer (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_phone" value="<?php echo esc_attr($_POST['message_phone']); ?>"></label></p>
<p><label for="message_email">Uw e-mail adres: <span>*</span> <br><input type="text" name="message_email" class="wpcf7-form-control wpcf7-text" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
<p><label for="message_text">Uw vraag: <span></span> <br><textarea type="text" name="message_text" class="wpcf7-form-control wpcf7-textarea"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
<p><label for="message_human">Verificatie: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
<input type="hidden" name="submitted" class="wpcf7-form-control wpcf7-submit" value="1">
<p><input type="submit"></p>
</form>
</div>
不，不，不，不。
您可以通过在发送邮件时不显示表单来实现这一点。
因为您已经显示了一条消息，这应该足够了:
<?php
if (!isset($sent) || !$sent) {
?>
<form action="<?php the_permalink(); ?>" method="post">
<p><label for="name">Uw naam (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
<p><label for="message_phone">Uw Telefoonnummer (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_phone" value="<?php echo esc_attr($_POST['message_phone']); ?>"></label></p>
<p><label for="message_email">Uw e-mail adres: <span>*</span> <br><input type="text" name="message_email" class="wpcf7-form-control wpcf7-text" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
<p><label for="message_text">Uw vraag: <span></span> <br><textarea type="text" name="message_text" class="wpcf7-form-control wpcf7-textarea"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
<p><label for="message_human">Verificatie: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
<input type="hidden" name="submitted" class="wpcf7-form-control wpcf7-submit" value="1">
<p><input type="submit"></p>
</form>
<?php
}
?>
将表单放入if语句中
添加到你的CSS:
.none {display:none;}
.block {display:block;}
添加到你的代码中:
<?php
//response generation function
$hide_form = 'block';
if(isset($_POST['submitted'])) {
...
else //ready to go!
{
$hide_form = 'none';
...
在<form>标签中放入:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" class="<?php echo $hide_form;?>">
如果您保持表单基本不变(尽管我会将处理post的php移到另一个url，然后在不是AJAX请求时重定向回来)，那么如果在用户的浏览器中关闭Javascript，它将处理请求。
然后添加以下javascript(在保存url中添加):
$('#my-form').submit(function(evt){
// stop form submitting
evt.preventDefault();
$.ajax(function(){
method: "POST",
url: "[ADD_SAVE_URL]]",
success(function(data){
// debug response
console.log(data);
$('#response-message').html(response.message);
if (response.success){
$('#my-form').hide();
}
}),
fail(function(jqXHR, textStatus){
// debug response
console.log(jqXHR, textStatus);
$('#response-message').html('Ajax error!');
})
});
});<div id="respond">
<div id="response-message"><?php echo $response; ?></div>div>
<form action="<?php the_permalink(); ?>" method="post" id="my-form">
<p><label for="name">Uw naam (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p>
<p><label for="message_phone">Uw Telefoonnummer (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_phone" value="<?php echo esc_attr($_POST['message_phone']); ?>"></label></p>
<p><label for="message_email">Uw e-mail adres: <span>*</span> <br><input type="text" name="message_email" class="wpcf7-form-control wpcf7-text" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p>
<p><label for="message_text">Uw vraag: <span></span> <br><textarea type="text" name="message_text" class="wpcf7-form-control wpcf7-textarea"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p>
<p><label for="message_human">Verificatie: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p>
<input type="hidden" name="submitted" class="wpcf7-form-control wpcf7-submit" value="1">
<p><input type="submit"></p>
</form>
</div>