最初のイベントがうまく拾えない

Question

前提・実現したいこと

ボタンをクリックした際に、チェックボックスにチェックを付けて
そのままフォーム送信するという処理を行いたいと考えております。

発生している問題・エラーメッセージ

最初の1回目でonclickに設定されているイベントが
拾えません。2回目以降は正常に拾えます。
どうすれば最初の1回目もきちんとイベントを拾えるでしょうか。

該当のソースコード

<script type="text/javascript">
    //チェックボックス
    function clickCheckBox(){
      var clickButton = document.getElementsByName('aButton');
      var checkedBox = document.getElementsByName('pitem[]')

      for(var i = 0 ; i < clickButton.length ; i++){
        clickButton[i].onclick = (function(ix){
            return function(){
                console.log(ix);
                checkedBox[ix].checked=true;
            };
        })(i);
      } 
    }
    //Submit
    function goSubmmit(){
	  console.log("do!!");
	  externalfunc();　　//外部jsの処理
      var target = document.getElementById("form1");
      target.method = "post";
      target.action = "/scripts/hoge.php"
      return false;
    }
</script>

外部のjsになります。別の方が作成したもので、私の方では
修正が禁じられています。

var base_path = '/cart/';

function externalfunc()
{
    var chkCount = $("[name='item[]']:checked").length;
    // validate
    if (chkCount < 1) {
        alert('選択されていません。');
        return false;
    }
    $("[name='pitem[]']:checked").each(function(){
        codes.push($(this).val());
    });

    var url = location.href;
    if (debug) {
        console.log('url: ' + url);
    }
    $.ajax({
        url: base_path + 'hoge.php',
        type: 'POST',
        data: {
            "action": "addItem",
            "item[]": codes,
            "url": url
        },
        dataType: 'json',
        timeout: ajax_timeout,
    }).done(function(cartArray, textStatus, jqXHR) {
        if (debug) {
            console.log('status: ' + jqXHR.status + ' ' + textStatus);
            console.log(cartArray);
        }
        showModal(cartArray, 'addItem');
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.log('status: ' + jqXHR.status + ' ' + textStatus + ' ' + errorThrown);
        console.log();
        alert(jqXHR.status + ' ' + errorThrown);
    }).always(function() {});
    return false;
}

<form id="form1" action="#" onsubmit="return goSubmmit();"> 
	<label><input type="checkbox" class="checkbox" name="pitem[]" value="aaa" /></label>
	<input id="submitbtn" type="image" src="/img/abutton.png" name="aButton" onclick="clickCheckBox();" value="Added">
	<label><input type="checkbox" class="checkbox" name="pitem[]" value="aaa" /></label>
	<input id="submitbtn" type="image" src="/img/abutton.png" name="aButton" onclick="clickCheckBox();" value="Added">
	<label><input type="checkbox" class="checkbox" name="pitem[]" value="aaa" /></label>
	<input id="submitbtn" type="image" src="/img/abutton.png" name="aButton" onclick="clickCheckBox();" value="Added">
</form>

試したこと

下記も試してみましたがダメでした。
window.onload=clickCheckBox();

最初の1回目のボタンクリック時にチェックが入りません。
2回目以降ではボタンクリックした際にチェックボックスにチェックが
入り外部js処理後にhoge.phpが動きます。

補足情報（FW/ツールのバージョンなど）

制約があってjqueryは使えず、通常のJavascriptで
解決しないといけません。

Comments

[m.ts10806]

なぜわざわざボタンクリックを挟むのでしょうか。goSubmmit()でいきなりretrun falseしたりしていますが、何か分岐が入っているのでは？実際のコードを提示してください。

[Otazoman]

画面遷移させたくないので、return false;が正しいです。　分岐は特にございません。

[m.ts10806]

私が言っているのは編集前のコードのreturn falseの位置です。「いきなり」としています。return falseの後にも処理がつづいてたので何がしたいのか分からなかったというところです。　ところで、「なぜわざわざボタンクリックを挟むのでしょうか」はどうでしょうか？「実際のコードを提示してください。」についても本当に「外部jsの処理;」と書いてあるわけではないですよね。

[Otazoman]

ボタンクリックを挟むのは外部jsで、チェックボックスにチェックが入っていないとパラメータを引いてこれないという制約がありどうしてもボタンをクリックしてチェックをさせるという必要があるからです。

[m.ts10806]

その外部js（externalfunc()?）で何をしているかの提示は可能でしょうか。コードを提示していただくのが一番ですが、場合により今回うまくいかない原因になっている可能性もあります。それも見なければわかりませんので。

[Otazoman]

外部jsのコードです。提示した箇所が受取って処理をしている箇所で
そのほかは別のウィンドウの処理関連の模様です。

[m.ts10806]

（回答とは直接は関係ありません）差し支えなければ教えていただきたいのですが、外部jsでjQuery記述が使われていて自身の対応にてjQuery記述が使えないのはなぜでしょう？課題か何かなのでしょうか。

[Otazoman]

修正しようとしているページがSSI構成になっています。自分の編集しているページのみでボタン制御を行うので極力自分html内で完結してほしいとのことでjQueryを使えないと考えてのことです。解決できるならそちらでもいいと思うのですが

[退会済みユーザー]

お前ら、日本がポーランド戦に勝てるのか！？

Answer 1

clickCheckBox()はクリック時に呼ぶものではないように見えます。
ロード時に呼んでみてはどうでしょうか？

Comments

[Otazoman]

ありがとうございます。おっしゃってる方法で解決できました。

Answer 2

オラよ

document.addEventListener('DOMContentLoaded', function() {

      var clickButton = document.getElementsByName('aButton');
      var checkedBox = document.getElementsByName('pitem[]');

      for(var i = 0 ; i < clickButton.length ; i++){
        clickButton[i].onclick = (function(ix){
            return function(){
                console.log(ix);
                checkedBox[ix].checked=true;
            };
        })(i);
      } 

});

<form id="form1" action="#" onsubmit="return goSubmmit();"> 
    <label><input type="checkbox" class="checkbox" name="pitem[]" value="aaa" /></label>
    <input id="submitbtn" type="image" src="https://ssl.gstatic.com/onebox/media/sports/logos/yJF9xqmUGenD8108FJbg9A_48x48.png" name="aButton" onclick="return false;" value="Added">
~~~

HTML側のaButtonにonclickイベントハンドラが設定されてるのに
さらにjs側でonclickイベントが設定されてるというｗ
クソコードだから掃除しといたぞ

てか今日のワールドカップさ、ポーランドに日本負けるべ

Comments

[Otazoman]

ありがとうございます。

Answer 3

type=imageでサブミットする場合動作が安定しないかもしれません
imageの座標を必要としないならimgタグとlabelで処理するほうがよいでしょう。

Answer 4

x_xさんのアドバイスの方法です。

script src="/cart/js/cart.js"></script>
<script type="text/javascript">
    //Checkbox
    window.onload = function clickCheckBox(){
      var clickButton = document.getElementsByName('submit_siryo');
      var checkedBox = document.getElementsByName('item[]')

      for(var i = 0 ; i < clickButton.length ; i++){
        clickButton[i].onclick = (function(index){
            return function(){
                checkedBox[index].checked=true;
            };
        })(i);
      } 
    }
    //Submit
    function cartSubmmit(){
	
	  console.log("パラメータです");
	  addItem();
      var target = document.getElementById("siryo");
      target.method = "post";
      target.action = "https://hoge/aaa/check.php"
	  return false;

    }
</script>