Magento AJAX 时事通讯按 Enter 键提交

Question

我正在使用代码通过提交按钮通过 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>

Answer 1

打开：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>

更多信息submit magento newsletter using ajax

Answer 2

我得到了这个工作！

我变了：

<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();

Answer 3

这是一个常见问题，似乎是 Internet Explorer 特有的问题。

问题在于按钮单击正在提交表单以及触发 onclick 事件。这是两个不同的事件，表单提交似乎优先。

要解决此问题，您需要在 onclick 调用中添加 return false;：

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

这将停止点击事件提交表单。