質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.20%

ページに動的に付与される変数の中身の値を、バナーをクリックしたとき別ドメインの次ページへPOSTしたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 142

indigo3232

score 4

前提・実現したいこと

ページに動的に付与される変数userNumの中身の値を導線バナーをクリックしたとき、別ドメインの次ページへPOSTしたい。

該当のソースコード

<div id="btn_topContents"> <!---この導線のdiv記述はインクルードファイルに記述されている--->
<a href="javascript:void(0);" class="btn_top" id="btn_top" name="btn_top" data-url="https://XXXX" data-val=""><img src="../bnr_top.png" width="100%"></a>
</div>

<!---以下、導線以外はTOPページに直に記述される--->
<div id="Cont-form"></div>

<script>
var userNum = '0000123456'; //システムによりHTML上に自動的に付与
</script>
$(window).load(function() {
            $(".btn_top").on("click", function(e) {
                e.preventDefault();
                postContents($(this).attr('data-url'), $(this).attr('data-val'));
            });
        });

function autoLogIn(e) {

    if(typeof e === "undefined" || e == null || e == "undefined" || e == '') return false;

    var form = document.createElement("form");
    var element1 = document.createElement("input");

    form.method = "POST";
    form.action = e.url;
    form.target = "_blank";

    element1.value=e.account;
    element1.name="ACCOUNT";
    form.appendChild(element1);
}
function postContents(e1,e2) {

    if(typeof e1 === "undefined" || e1 == null || e1 == "undefined" || e1 == '') return false;

    var clicked = document.getElementsByClassName("btn_top")[0];
    if(!clicked.classList.contains("clicked")) {
        clicked.classList.add("clicked");
        var form = document.createElement("form");
        var element1 = document.createElement("input");

        form.method = "POST";
        form.action = e1;
        form.target = "_blank";

        element1.value=e2;
        element1.name="user_id";
        form.appendChild(element1);

        //add form to tag div
        document.getElementById('Cont-form').appendChild(form);

        form.submit();

        //remove form to tag div
        document.getElementById('Cont-form').innerHTML = "";

        setTimeout(function() {
            clicked.classList.remove("clicked");
        }, 500);
    }
}

$(document).ready(function() {
        $("#btn_top").attr("data-val", userNum);
    });

試したこと

data-val内に直に値を入れておくと正しくPOSTしますが、
空のdata-valにuserNumを格納してからPOSTさせようとするとうまくいきませんでした。

最終的にはuserNumの値を次ページに引き継げたら良いので、localStorageの方法もためしましたが、userNumが拾えず困っています。

window.onload = function() {
  setTimeout(function(){
    var array = [];
    var obj = {
      'user_id': userNum
    };
    array.push(obj);
    var setjson = JSON.stringify(obj);
    localStorage.setItem('user_', setjson);
  },2000);
}

知識不足で説明に分かりづらい部分あるかもしれませんが、お知恵を拝借できたらうれしいです。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

一番怪しそうなところは、

クリックイベントの設定は、$(".btn_top")とクラス指定なのに対して、
data-valの設定は、$("#btn_top")とID指定であるところ・・だと思います。

もし、id="btn_top"に該当する要素が複数ある状態なのであれば、data-valはHTMLを上から読んで行って最初に出てくる#btn_topが設定されている要素1個にしか設定されません。

なのでHTML上2つ目以降の.btn_topをクリックして動作確認すると、data-valは空っぽですので「引き継げません」という状態が発生すると思います。

ID重複は、HTMLのルール違反ですし、それらを使ってjsを組むのであればバグの温床になりますので、直しましょう。

data-valは、クリックイベント同様クラス指定で設定できますのでidがなくても問題有りません。

$(".btn_top").attr("data-val", userNum);

上記で、もし解決するのであれば・・・ の余談。

コードを見る限り、postContetns()は、.btn_topをクリックしたとき専用の処理のようです。さらに、.btn_topのdata-valには、全て同じ値=userNumを入れています。

もし、.btn_topのdata-valの値が、他に記述されたJS等で更新されることがないのであれば、data-valに設定して引数で渡す・・・なんて回りくどいことはせず、postContents()内で、直に変数を参照しても良いんじゃないかなぁ・・・

※postContetnsから一部抜粋

        element1.value=userNum; //←直接変数を入れる
        element1.name="user_id";
        form.appendChild(element1);

と、思いました。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/04 14:27 編集

    mix-peachさん
    丁寧なアドバイスありがとうございます…!!
    クリックイベントの設定とdata-valの設定を合わせてみた(クラス・ID両方)のですが、変わらずでした…。
    ちなみにID、クラスともに「btn_top」はページに一つずつしかありません。

    テストをしていて分かってきたのですが、そもそも
    $(document).ready(function() {
    $("#btn_top").attr("data-val", userNum);
    });
    に問題があるようで、data-valの中にuserNumの値が入っていないようです…。
    たとえば、
    $(document).ready(function() {
    $("#btn_top").attr("data-val", "aaa");
    });
    とすると、ちゃんとdata-valのなかにaaaが入ることが確認できました。

    userNumの中身を認識させるのはどうしたらよいでしょうか…
    ちなみに、
    <script>
    var userNum = ' ';
    </script>
    の記述の部分はこちらで変えることができません。

    また、後半のご指摘も大変参考になりました!
    まどろっこしいことになっていますね…。改善しようとおもいます。

    キャンセル

  • 2019/10/04 14:41

    > $(document).ready(function() {
    > $("#btn_top").attr("data-val", "aaa");
    > });
    > とすると、ちゃんとdata-valのなかにaaaが入る

    ので、あれば、data-valの中にuserNumが、設定されていないというよりも、
    data-valに設定しようとしているタイミングでは、「userNumが空っぽ」なのでは?

    コンソールに、何かエラーは出ていないでしょうか?
    エラーが出てない場合、readyの中で、console.log(userNum); と書いてみて、ページを再表示した時に、コンソールになんと表示されるか確認してみてください。

    キャンセル

  • 2019/10/04 14:44

    readyの中で、console.log(userNum); が、undefinedになる場合、
    恐らく、
    <script>
    var userNum = '0000123456'; //システムによりHTML上に自動的に付与
    </script>
    この記述自体が、javascript等で、DOMに追記されている要素なのではないかと推測します。

    この場合、postContents()の中で、直に変数を参照する等の修正を行った場合、きちんとuserNumが渡せるようになると思いますよ。

    キャンセル

  • 2019/10/04 17:13

    本件、全く別の問題で値が取れておりませんでした…。(今回作成外の既存のjsが邪魔をしていました)
    console.log(userNum);で上からくまなく確認を行ったところ根源がみつかりました。
    mix-peachさん、たくさんの助言まことに有難うございました!

    キャンセル

check解決した方法

0

本件、全く別の問題で値が取れておりませんでした…。(今回作成外の既存のjsが邪魔をしていました)
console.log(userNum);で上からくまなく確認を行ったところ根源がみつかりました。
mix-peachさん、たくさんの助言まことに有難うございました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/04 17:29

    解決したのであれば、何よりです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • トップ
  • JavaScriptに関する質問
  • ページに動的に付与される変数の中身の値を、バナーをクリックしたとき別ドメインの次ページへPOSTしたい