提交表單並阻止刷新它

Question

我正在處理項目上的電子郵件發送功能。這裏當我填寫表格後，發送它的網站頁面刷新並顯示白色背景頁面。我需要防止刷新並提交表單。這裏我附上代碼，並且有人能告訴我這個問題的答案。表單

<form class="form-vertical" onsubmit="return sendEmail();" id="tell_a_friend_form" method="post" action="index.php?route=product/product/tellaFriendEmail" enctype="multipart/form-data"> 
    <div class="form-group "> 
    <label class="control-label ">Your Name <span >* </span> </label><br> 
     <div class="form-group-default"> 
     <input type="text" id="senders_name" name="sender_name" value="" class="form-control input-lg required" > 
     </div> 
    </div> 

    <div id="notify2" class=""> 
     <div id="notification-text2" class="xs-m-t-10 fs-12"></div> 
     <!--<button type="button" class ="close" id="noti-hide">×</button>--> 
     </div> 


     <div class="form-group "> 
     <label class="control-label ">Your Email <span >* </span> </label><br> 
     <div class="form-group-default"> 
      <input type="text" id="sender_email_ID" name="sender_email" value="" class="form-control input-lg" > 
     </div> 
     </div> 

     <div id="notify1" class=""> 
     <div id="notification-text1" class="xs-m-t-10 fs-12"></div> 
      <!--<button type="button" class ="close" id="noti-hide">×</button>--> 
      </div> 

      <div class="form-group "> 
      <label class="control-label">Your Friends' Email <span >* </span></label> 
       <p class="lineStyle">Enter one or more email addresses, separated by a comma.</p> 

      <div class="form-group-default"> 
      <input type="text" value="" id="receiver_email" class="form-control required" name="receivers_email" > 
      </div> 
      </div> 

      <div id="notify" class=""> 
      <div id="notification-text" class="xs-m-t-10 fs-12"></div> 
       <!--<button type="button" class ="close" id="noti-hide">×</button>--> 
       </div> 

      <div > 
       <label domainsclass="control-label ">Add a personal message below (Optional) <br></label> 
       <div class="form-group-default"> 
        <textarea type="text" id="tell_a_friend_message" name="tell_a_friend_message" class="form-control" rows="10" col="100" style=" width: 330px; height: 100px;"></textarea> 
        </div> 
       </div> 

       <div id="notify3" class=""> 
       <div id="notification-text3" class="xs-m-t-10 fs-12"></div> 
        <!--<button type="button" class ="close" id="noti-hide">×</button>--> 
       </div> 

       <input type="hidden" name="product_url" id="product_url_field" value=""> 

       <div class="p-t-15 p-b-20 pull-right"> 
       <button id="send_mail_button" class="btn btn-rounded btn-rounded-fl-gold text-uppercase" name="submit" onclick="return sendEmail();" >Send</button> 
        <button id="cancel_email_form" class="btn btn-rounded btn-rounded-gold text-uppercase btn-margin-left" data-dismiss="modal" aria-hidden="true" >Cancel</button> 

       </div> 

HTML代碼JavaScript代碼：

<script> 

    function sendEmail() { 

     document.getElementById('product_url_field').value = window.location.href 
     var emailpattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
     var receivers_email = $("#receiver_email").val(); 
     var sender_email = $("#sender_email_ID").val(); 
     var sender_name  = $("#senders_name").val(); 
     var email_pathname = window.location.pathname; 
     var product_url  = window.location.href; 


     if (receivers_email == '') { 

       $('#notify').removeClass().addClass("alert-danger"); 
       $('#notification-text').empty().html("Invalid e-mail or fill the email address correctly"); 
       $('#notification-text').show(); 
       setTimeout(function() { 
        $('#notification-text').fadeOut('slow'); 
       }, 10000); 
       return false; 

      } 
      else { 
       !emailpattern.test(receivers_email); 
        } 

     if(sender_name == ''){ 

      $('#notify2').removeClass().addClass("alert-danger"); 
      $('#notification-text2').empty().html("please fill the name"); 
      $('#notification-text2').show(); 
      setTimeout(function() { 
       $('#notification-text2').fadeOut('slow'); 
      }, 10000); 
      return false; 
     } 


     if (sender_email == '') { 

       $('#notify1').removeClass().addClass("alert-danger"); 
       $('#notification-text1').empty().html("Invalid e-mail or fill the email address correctly"); 
       $('#notification-text1').show(); 
       setTimeout(function() { 
        $('#notification-text1').fadeOut('slow'); 
       }, 10000); 
       return false; 

     } 
     else { 
      !emailpattern.test(sender_email); 

     } 
     $('#notify3').removeClass().addClass("alert-success"); 
     $('#sender_email').val(''); 
     $('#notification-text3').empty().html("Email has sent successfully"); 
     $('#notification-text3').show(); 
     setTimeout(function() { 
      $('#notification-text3').fadeOut('slow'); 
     }, 10000); 
     return true; 
    } 




</script> 

控制器PHP類：

public function tellaFriendEmail(){ 


     if (isset($_POST['submit'])) { 

      $receiver_email = $_POST['receivers_email']; 
      $name = $_POST['sender_name']; 
      $email = $_POST['sender_email']; 
      $message = $_POST['tell_a_friend_message']; 
      $products_url = $_POST['product_url']; 



      $mail = new Mail(); 
      $mail->protocol = $this->config->get('config_mail_protocol'); 
      $mail->parameter = $this->config->get('config_mail_parameter'); 
      $mail->smtp_hostname = $this->config->get('config_mail_smtp_hostname'); 
      $mail->smtp_username = $this->config->get('config_mail_smtp_username'); 
      $mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8'); 
      $mail->smtp_port = $this->config->get('config_mail_smtp_port'); 
      $mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout'); 
      $mail->setTo($receiver_email); 

      $mail->setFrom($this->config->get('config_email')); 
      $mail->setSender("Waltersbay"); 
      $mail->setSubject($name.' '.'wants you to checkout this product from waltersbay.com'); 

        if ($message !=''){ 
         $mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'.'<br/> Thank you, <br/> '); 
        } 
         else{ 
         $mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'/*.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'*/.'<br/> Thank you, <br/> '); 
         } 
      $mail->send(); 





     } 
     else{ 
      header('location : tella_friend.tpl'); 


     } 
    } 
} 

Answer 1

將一個隱藏的輸入您的形式。在您的js中提交之前，請根據時間填寫一個新密鑰。

在你的php文件中檢查鍵是否重複？或者即使它的填充？

因爲js在點擊提交按鈕後填寫了這個輸入，所以每次提交表單時都有一個新的密鑰！如果刷新表單，則會再次發送前一個值。

Answer 2

對於你的問題，那麼建議的最佳做法是使用jquery ajax請求。

首先，如果你假裝用「提交」那麼，元件就以下，

$(".form-vertical").submit(function(e) { 
    e.preventDefault(); 
    //send ajax with your form data. Ample examples on SO already. 
    $.ajax(.....); 
}); 

我們推薦另一種選擇是避免使用在對您有一定的要求放在第一位「提交」的行爲。

1. Use button elements instead of submit element. 
2. Attach click event on button. i.e. in your case 'send'. 
3. On click, send ajax as described above. This will avoid doing things like onsubmit="return sendEmail();" you had to do. 
4. Also following is not required as well, 
    $(".form-vertical").submit(function(e) { 
     e.preventDefault(); 
as it will be done as follows, 
    $("button#buttonId").click(function(e) { 
    // your ajax call..... 
    }