2

このフォームはChrome、FF、Safariで機能します。POST作品とは、送信ボタンを押すとリクエストが送信されているのを見ることができるという意味です。

POSTただし、IE9などのIEの開発ツールでは、リクエストが行われているのを確認できません。なぜ何かアイデアはありますか?

デバッグに役立つ一時的なサイトへのリンクは次のとおりです。http://polar-ravine-7414.herokuapp.com/

バグを再現する手順:

  1. ページを読み込む
  2. ポップアップを無視する
  3. 送信ボタンをクリックします
  4. POSTChrome開発ツールと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">&nbsp;</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">&nbsp;</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">&nbsp; </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">&nbsp;</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;
        }
    });
});
4

5 に答える 5

2

さて、あなたが直面している問題は、AJAX呼び出しがIEで成功して戻ってこないということです。代わりに、エラーをスローしています。まず、AJAX呼び出しを適切にコーディングする必要があります。これがAJAX呼び出しの更新されたコードです。

$.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    success: function(data){
        alert('success');
    },
    error: function(xhr, textStatus, errorThrown){
        alert(errorThrown);
    },
    dataType: 'json'
});

IEでエラーがスローされる理由は、「トランスポートなし」でした。これは、クロスドメインAJAX呼び出しが原因で発生します。これはjQueryの既知のバグです。jQueryチームは「これをコアでサポートする予定はなく、プラグインとしてより適しています」。IEはXMLHttpRequestを使用しませんが、XDomainRequestという名前の代替オブジェクトを使用します。

これを処理するJavaScriptコードを見つけました。コードはここにあります。

コードをファイルにコピーして、ページの外部ソースとして使用する必要があります。または、ページの先頭に直接埋め込むこともできます。ここでの実例。

于 2012-09-17T20:17:18.643 に答える
1

実はクロームでも動作していません。

属性セレクターはエラーを生成します:

キャッチされないエラー:構文エラー、認識されない式:= [name = elqInput31]

それを修正すれば、すべてうまくいくでしょう。

jsFiddleでの作業デモ

于 2012-09-08T01:38:23.757 に答える
0

エラーのある2行があります。

    var trainingNewsletter = $('input=[name=elqInput31]');
    var customerNewsletter = $('input=[name=elqInput32]');

実際には次のようになります。

    var trainingNewsletter = $('input[name=elqInput31]');
    var customerNewsletter = $('input[name=elqInput32]');

それで問題が完全に解決するかどうかはわかりませんが、確かにその一部です。

于 2012-09-11T03:29:46.197 に答える
0

input type="submit"やbuttontype= "submitではなく、divとspanを使用している理由はありますか?

フォームの送信を聞くのではなく、送信ボタンのクリックを聞いている理由はありますか?$( "#form")。on( "submit"、function(){etc.etc});

于 2012-09-12T15:22:40.457 に答える
0
  1. Chrome開発ツールにPOSTリクエストが表示されますか、それともPOSTリクエストを送信しようとしますか?私のクロームでは、試みが見られます。クロスドメインポリシーについてお読みください。フォームアクションのURLとページは異なるドメインにあります。また、クロスドメインのajaxリクエストを実行することはできません(ただし、ハックとその名前JSONPがあります)。したがって、フォームを同じドメインに送信するか、JSONPを使用することを検討してください。これにより、内部でGETリクエストが送信されます。
  2. 代わりに$.postより柔軟な$.ajaxを使用し、エラーコールバック関数を使用することをお勧めします。

    $ .ajax({ タイプ:'POST'、 url:form.attr('action')、 データ:form.serialize()、 成功:function(p、p1){ }、 エラー:error(jqXHR、textStatus、errorThrown){
    alert("リクエストの送信に失敗しました。textStatus="+ textStatus); }

    });

http://api.jquery.com/jQuery.ajax/ (ページにはクロスドメインリクエストに関する情報もいくつか含まれています)

于 2012-09-12T18:44:03.373 に答える