2
送信ボタンを使用してAJAX経由でニュースレター情報を送信するコードを使用していますが、残念ながらユーザーが電子メールアドレスを入力して押し込むと、ページが再ロードされ、Magento AJAX newsletter submitを入力したときに送信
ユーザーが[送信]ボタンをクリックしたときと同じ結果を得るには、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>
一般的に言って、コードブロックのための良い方法は、他に、関連するJSを1つのブロックにのみ関連するHTMLを入れてすることです。十分な量を含んでいない場合は、それを拡張するように求められるかもしれませんが、ソース全体に貼り付けることで読みにくくなります。 – ramblinjan