Бюллетень Magento AJAX при приеме ввода

Question

Я использую код для отправки информации о рассылке через AJAX через кнопку отправки, но, к сожалению, когда пользователь заполняет свой адрес электронной почты и нажимает кнопку, страница просто перезагружается и данные не сохраняются.

Я хотел бы, чтобы пользователь нажал enter, чтобы получить те же результаты, что и пользователь, нажав кнопку отправки. Спасибо за любую мудрость/руководство!

Вот мой текущий код:

<div class="block block-subscribe"> 
    <div id="feedback" style="display:none" class="mini-newsletter"> 
    Thank you for subscribing to our newsletter! 
    </div> 

    <form name="newsletter-form" id="newsletter-form" method="post"> 
     <div class="block-content"> 
     <div class="input-box"> 
      <input onkeypress="handleKeyPress(event,this.form)" type="text" placeholder="Email address" name="email" id="newsletter" title="<?php echo $this->__('Subscribe to Our Newsletter') ?>" class="required-entry input-subscribe" style="width:178px;" /> 
      <div class="error-news-msg" id="error-news-msg" style="display:none;">Please enter a valid email address.</div> 
     </div> 
     <div class="actions"> 
      <div class="news-loader" id="news-loader" style="text-align:center; display:none;"> 
       <img src="<?php echo $this->getSkinUrl('images/news-loader.gif'); ?>" /> 
      </div>  
      <button type="button" title="<?php echo $this->__('Subscribe') ?>" onclick="myfunc();" class="button"> 
       <span><span>Subscribe</span></span> 
      </button> 
     </div> 
     </div> 
    </form>  
</div>   

Javascript:

<script type="text/javascript">   
    function myfunc() 
     {  
      var newsletterSubscriberFormDetail = new VarienForm('newsletter-form'); 
      var form_email = $('newsletter').getValue(); 
      var params_form = $('newsletter-validate-detail'); 
      //alert(params_form); 
      new Validation('newsletter'); 
      if(echeck(form_email)) 
      { 
      //alert(form_email); 
      //alert(Form.serialize($('newsletter-validate-detail'))); 
      new Ajax.Updater({ success: 'newsletter-form' }, '<?php echo $this->getUrl('newsletter/subscriber/new') ?>', { 
       asynchronous:true, evalScripts:false, 
       parameters: { email: form_email }, 
       onComplete:function(request, json){Element.hide('newsletter-form'); Element.hide('news-loader'); Element.show('feedback');}, 
       onLoading:function(request, json){Element.show('news-loader');}, 

      }); 



      } 
      else 
      { 
      //alert(form_email); 
       return false; 
      } 

     }  



function echeck(str) { 

     var at="@" 
     var dot="." 
     var lat=str.indexOf(at) 
     var lstr=str.length 
     var ldot=str.indexOf(dot) 
     if (str.indexOf(at)==-1){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

     if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

     if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

     if (str.indexOf(at,(lat+1))!=-1){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

     if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

     if (str.indexOf(dot,(lat+2))==-1){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

     if (str.indexOf(" ")!=-1){ 
      //alert("Invalid E-mail ID") 
      goProcedural() 
      return false 
     } 

      return true      
    } 

function goProcedural() 
{ 
    Element.show('error-news-msg'); 
    Element.hide.delay(5, 'error-news-msg'); 
} 

</script> 

Answer 1

Я получил это для работы!

Я изменил:

<form name="newsletter-form" id="newsletter-form" method="post"> 

To:

<form name="newsletter-form" id="newsletter-form" method="post" onsubmit="myfunc(event)"> 

Затем изменилось:

function myfunc() 

To:

function myfunc(event) 

Тогда изменилось:

<button type="button" title="<?php echo $this->__('Subscribe') ?>" onclick="myfunc();" class="button"> 

To:

<button type="button" title="<?php echo $this->__('Subscribe') ?>" onclick="myfunc(event)" class="button"> 

А потом прямо перед этой линии:

var newsletterSubscriberFormDetail = new VarienForm('newsletter-form'); 

я добавил эту строку:

event.preventDefault(); 

Answer 2

Это одна общая проблема, и, кажется, специфичные для Internet Explorer.

Проблема в том, что нажатие кнопки представляет форму, а также запуск события onclick. Это два разных события, и представление формы кажется приоритетным.

Чтобы это исправить, нужно поставить return false; в вызов OnClick:

<button type="button" title="<?php echo $this->__('Subscribe') ?>" onclick="myfunc(); return false;" class="button"> 

Это остановит событие щелчка направляющее форму.

Answer 3

Open: приложение/дизайн/интерфейс/по умолчанию/современный/шаблон/newslet ter/subscribe.phtml

Создайте резервную копию этого файла и замените его на этот код.

<div class="awis-news-block"> 
<div class="ajax-newsletter-subscribe-form"> 
<form id="ajax_newsletter_subscribe_form" method="post"> 
<input type="text" name="email" id="newsletter" title="<?php echo $this->__('Sign up for our newsletter') ?>" class="input-text required-entry validate-email"> 
       <button id="ajax-newsletter-submit" class="button" type="submit" title="JOIN">. 
       <span><span>JOIN</span></span> 
       </button> 
<input type="hidden" class="url1" value="<?php echo $this->getFormActionUrl() ?>"> 
       <span class="error" style="display:none"> Please Enter Email Id.</span> 
       <span class="valid" style="display:none"> Please enter a valid email address.To review our privacy policy, please click here.</span> 
       <span class="success" style="display:none">Thank you for joining our email club. Check your email for your 15% off coupon!</span> 
    </form> 
</div> 
</div> 

    <script type="text/javascript"> 
    //<![CDATA[ 
     var newsletterSubscriberFormDetail = new VarienForm('newsletter-validate-detail'); 
    //]]> 
    </script> 

    <script type="text/javascript"> 
    $(function() { 
     $(".button").click(function() {   
     var email = $("#newsletter").val(); 
     var url1 = $(".url1").val(); 
     var dataString = 'email='+ email; 

      if(email=='') 
      { 
       $('.success').fadeOut(200).hide(); 
       $('.valid').fadeOut(200).hide();    

       $('.error').fadeIn(200).fadeOut(8000); 

      } 
      if (email!='') 
      { 

       var a = email; 

       var filter = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{1,4}$/; 
       if(filter.test(a)){ 
        ajaxn(); 
       } 
       else{ 
        $('.error').fadeOut(200).hide(); 
        $('.success').fadeOut(200).hide(); 
        $('.valid').fadeIn(200).fadeOut(8000); 
       } 

      } 
     function ajaxn() 
      { 
       $.ajax({ 
       type: "POST", 
       url: url1, 
       data: dataString, 
       success: function() 
        {     
        $('.error').fadeOut(200).hide(); 
        $('.valid').fadeOut(200).hide(); 
        $('.success').fadeIn(200).fadeOut(8000); 

        } 
       }); 
      } 
     return false; 
     }); 
    }); 

    </script> 

Для получения дополнительной информации submit magento newsletter using ajax