提交表单并阻止刷新它

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..... 
    }