このフォームはChrome、FF、Safariで機能します。POST
作品とは、送信ボタンを押すとリクエストが送信されているのを見ることができるという意味です。
POST
ただし、IE9などのIEの開発ツールでは、リクエストが行われているのを確認できません。なぜ何かアイデアはありますか?
デバッグに役立つ一時的なサイトへのリンクは次のとおりです。http://polar-ravine-7414.herokuapp.com/
バグを再現する手順:
- ページを読み込む
- ポップアップを無視する
- 送信ボタンをクリックします
POST
Chrome開発ツールとFFFirebugで送信されたリクエストが表示されますが、IE開発ツールでは送信されません
アップデート
Eliranの提案に従って、セレクターを更新しました。ただし、IE開発者のツールネットワークバーで行われたPOSTリクエストをまだ確認できません。
Update2
このページは、フォームが投稿される場所とは別のサーバーでホストされていることを付け加えておく必要があります。これは、ブラウザがクロスブラウザリクエストを防止していることが原因である可能性がありますか?
HTML
<form name="newsletter-subscription-en" id="form" action="https://abc.com/e/f2" method="post">
<input type="hidden" name="elqFormName" value="newsletter-subscription-en">
<input type="hidden" name="elqSiteID" value="1795">
<input type="hidden" id="firstNameField" name="C_FirstName" value="">
<input type="hidden" id="lastNameField" name="C_LastName" value="">
<div id="step1" class="block">
<div id="circle_1" class="circle">
<div id="bullet_1" class="left white is-bold s24"><span class="bullet">1.</span></div>
</div>
<div id="bullet_spacer_1" class="left"> </div>
<div class="content">
<p class="white is-regular s18">This is the email you will be subscribing with, if you'd like to change it, please enter here now.</p>
<label id="label_email" class="white is-bold s22" for="emailField">YOUR EMAIL: </label>
<input id="emailField" value="" name="C_EmailAddress" type="text">
</div>
</div>
<div class="clearfix"></div>
<div id="step2" class="block">
<div id="circle_2" class="circle">
<div id="bullet_2" class="left white is-bold s24"><span class="bullet">2.</span></div>
</div>
<div id="bullet_spacer_2" class="left"> </div>
<div class="content">
<p class="white is-regular s18">Choose your newsletter:</p>
<div id="checkbox_customer" class="left">
<div class="box">
<input id="elqInput31" type="checkbox" name="elqInput31" checked="checked">
<label class="white is-bold s20" for="elqInput31">CUSTOMER</label>
</div>
<div class="arrow-up"></div>
<div class="nip_box">
<span class="is-bold s12">Customer Newsletter</span>
<p class="is-light s115">
Monthly collective on latest industry news, technology pieces from experts, product resources, success examples and exclusive customer promotions.
</p>
</div>
</div>
<div id="spacer" class="left"> </div>
<div id="checkbox_training" class="left">
<div class="box">
<input id="elqInput32" type="checkbox" name="elqInput32" checked="checked">
<label class="white is-bold s20" for="elqInput32">TRAINING</label>
</div>
<div class="arrow-up"></div>
<div class="nip_box">
<span class="is-bold s12">Training Newsletter</span>
<p class="is-light s115">
Exclusive newsletter for current and aspiring IT professionals. Updated with training tips and tricks, industry news, free online training resources and latest information on available certification and training.
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div id="step3" class="block">
<div id="circle_3" class="circle">
<div id="bullet_3" class="left white is-bold s24"><span class="bullet">3.</span></div>
</div>
<div id="bullet_spacer_3" class="left"> </div>
<div class="content">
<div id="submit" class="box right">
<span class="right white is-bold s24">SIGN-UP</span>
</div>
</div>
</div>
<div class="clearfix"></div>
</form>
JavaScript
エリランの回答に基づいて更新
$(document).ready(function() {
$('#submit').click(function () {
//Get the data from all the fields
var email = $('input[name=C_EmailAddress]');
var trainingNewsletter = $('input[name=elqInput31]');
var customerNewsletter = $('input[name=elqInput32]');
var regExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
var validationPass = true;
var form = $('#redhat_form');
if (validationPass === true) {
$.post(form.attr('action'), form.serialize(), function(data) {});
$('#alert').removeClass('hide');
$('#alert').removeClass('alert-success');
$('#alert').removeClass('alert-error');
$('#alert_text').remove();
$('#alert').addClass('alert-success');
$('#alert').append('<p id="alert_text" class="is-regular s16">Thank you for subscribing.</p>');
$('#emailField').val("");
//window.location='http://afternoon-leaf-7565.herokuapp.com/thankyou/';
return false;
}
});
});