我正在使用代码通过提交按钮通过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>
答案 0 :(得分：1)
我让这个工作！
我改变了：
<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();
答案 1 :(得分：0)
这是一个常见问题，似乎是特定于Internet Explorer。
问题是按钮单击是提交表单以及触发onclick事件。这是两个不同的事件，表单提交似乎优先。
要解决此问题，您需要将return false;加入onclick调用：
<button type="button" title="<?php echo $this->__('Subscribe') ?>" onclick="myfunc(); return false;" class="button">
这将停止提交表单的点击事件。
答案 2 :(得分：0)
打开：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>