提交成功后隐藏表单

时间:2016-10-07 09:39:05

标签: php

目前我有一个联系表单,但我需要在发送成功后隐藏表单。当'succes'消息运行时,我正在考虑点击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>

3 个答案:

答案 0 :(得分:5)

Nee,ik bel je niet terug: - )

您可以通过在发送邮件时不显示表单来执行此操作 因为您已经显示了消息,所以这应该足够了:

<?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语句中。

答案 1 :(得分:0)

如果您将表单保留得非常相似(虽然我会将处理帖子的php移动到另一个URL,然后重定向,如果不是AJAX请求),那么它将处理请求,如果Javascript被转换在用户的浏览器中关闭。

然后添加以下javascript(添加保存网址):

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

答案 2 :(得分:0)

将此添加到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;?>">