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

Question

前提・実現したいこと

ページに動的に付与される変数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);
}

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

Answer 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);

と、思いました。。。

Comments

[indigo3232]

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>
の記述の部分はこちらで変えることができません。

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

[mix-peach]

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

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

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

[mix-peach]

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

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

[indigo3232]

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

Answer 2

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

Comments

[mix-peach]

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