2016-10-07 192 views
1

目前我有一個聯繫表單工作,但在發送成功後我需要隱藏表單本身。我想在'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 protected]' . "\r\n" . 
     'Reply-To: [email protected]' . "\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> 
+0

@Fester那一個是JavaScript中,在這個問題上沒有任何JavaScript的,所以它不是一個重複那。 – Blaatpraat

+0

@Blaatpraat是的,我認爲JavaScript標記需要從這篇文章中刪除。這都是HTML和PHP。 – Keith

+0

@Fester:好點,讓我們刪除標籤 – Blaatpraat

回答

4

倪,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語句中。

+0

太棒了! 只需將「<?php echo $ response;?>」置於if =之外) (必須等待幾分鐘才能將其標記爲正確) – rwzdoorn

0

如果您將表單保持原樣(儘管我會將php處理郵件移動到不同的url,然後重定向回去,如果不是AJAX請求),那麼它會處理請求,如果Javascript是在用戶的瀏覽器中關閉。

然後添加以下JavaScript(在保存的網址添加):

$('#my-form').submit(function(evt){ 
 
\t // stop form submitting 
 
\t evt.preventDefault(); 
 

 
\t $.ajax(function(){ 
 
    \t method: "POST", 
 
    \t url: "[ADD_SAVE_URL]]", 
 
    success(function(data){ 
 
    \t // debug response 
 
    \t console.log(data); 
 
     
 
     $('#response-message').html(response.message); 
 
     if (response.success){ 
 
     $('#my-form').hide(); 
 
     } 
 
    }), 
 
    fail(function(jqXHR, textStatus){ 
 
    \t // debug response 
 
    \t 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>