Рассылка новостей Magento AJAX при нажатии Enter - PullRequest
Новая
       14

Рассылка новостей Magento AJAX при нажатии Enter

2 голосов
/ 30 марта 2012

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

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

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

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

Ответы [ 3 ]

1 голос
/ 30 марта 2012

Я получил это на работу!

Я изменил: 

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

Кому: 

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

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

function myfunc()

Кому: 

function myfunc(event)

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

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

Кому: 

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

А потом прямо перед этой строкой: 

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

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

event.preventDefault();
0 голосов
/ 06 апреля 2012

Открыть: app / design / frontend / default / modern / template / newsletter / 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>

Для получения дополнительной информации отправьте информационный бюллетень magento, используя ajax

0 голосов
/ 30 марта 2012

Это общая проблема, которая, похоже, относится только к Internet Explorer.

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

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

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

Это остановит событие нажатия, отправившее форму.

...