Monday, January 3, 2011

Ajax newsletter subscribe with validation Using Ajax Call Ajax.Updater

Newsletter subcribing in magento with input validation is as below:

<div class="news-loader" id="news-loader" style="text-align:center; display:none;">
        <img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif'); ?>" />
</div>    
<div id="feedback" style="display:none" class="mini-newsletter">
Thank you for subscribing to our newsletter! 
</div>
<div class="error-news-msg" id="error-news-msg" style="display:none;">Please insert a valid email address.</div>
<form name="newsletter-form" id="newsletter-form" method="post"> 
    <div class="block-content">
     <div class="input-box input_bg" style="float: left;">
      <input type="text" name="email" id="newsletter" title="<?php echo $this->__('Subscribe to Our Newsletter') ?>" class="input-text required-entry validate-email input-subscribe" style="" />
    </div>
    <button type="button" title="<?php echo $this->__('Subscribe') ?>" onclick="newsletter_validation();" class="submit-butn">Go</button>
    </div>
</form>  
<script type="text/javascript">
function newsletter_validation_bak()
 {    
  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>            

Demo: http://demo.themagentolab.com/tattoo

Source:http://www.magentocommerce.com/boards/viewthread/207715/

No comments:

Post a Comment