2024年06月14日
jquery:click()
このメソッドの説明
click() はjQueryメソッドです。
プログラムで非表示の submitボタン をクリックする事ができます。
※click(func)イベントとの違いに注意してください。
メソッド
セレクタ.click()
パラメータ
ありません
戻り値
ありません
このメソッドを使うケースとは
一般的には、フォームの「onclick属性」でエラーチェックを行いますが、ECプログラムのカスタマイズ等では、これが既に利用されているケースがあります。
例えば下記の様な場合です。
<form method='post' action='' onsubmit='XXXXXX()'><!-- ユーザがカスタマイズできないonsumitが設定されている --> <!-- 色々な処理 --> <button type='submit' class='real' name='button' value='select' >送信</button> </form>
1行目:ユーザがカスタマイズできない onsubmit属性 が設定されている。
3行目:ボタンのタイプは 'submit' になっている。
上記の様な場合、ユーザがボタン操作を検知してエラー処理するプログラムを作成しても、このフォームのサブミットを中止させる事ができません。
この様な場合は下記の方法でユーザプログラムを作成します。
①正規のボタンに style='display:none;' を設定し、非表示にする。
②ダミーボタンを新規に追加する
③ダミーボタンの挿入を検知し、エラー処理をするプログラムを作成する。
④エラーがない場合は、click()メソッドで、非表示の①のボタンをクリックする。
※submit()メソッドでも上記と同じ対策に利用できます。
利用例
1.プログラムでボタンをクリックする。
下記のセレクト操作を行ってください。
・サイズを選択しないで購入ボタンを挿入すると、エラーメッセージが表示されます。
・サイズを選択して購入ボタンを挿入すると(エラーなし)、onsubmit処理が実行された後、サブミットが実行されます。
・リセットボタンを挿入すると、選択を解除します。
<?php if($_POST['select_name'] != ''){ $item = $_POST['select_name']; $item = preg_replace('/1/','項目1',$item); // 文字を正規表現で探して置き換える $item = preg_replace('/2/','項目2',$item); $item = preg_replace('/3/','項目3',$item); $select_msg = '選択値は『'.$item.'』です。'; } ?> <form method='post' action='' onsubmit='DB_update()'> <label for='select'>選択して下さい<span style='font-size:12px;'> ※必須項目</span></label><br> <select id='select' name='select_name'> <option value='#none#'>選択してください</option> <option value='1' <?php if($_POST['select_name']=='1')esc_html_e('selected');?>>項目1</option> <option value='2' <?php if($_POST['select_name']=='2')esc_html_e('selected');?>>項目2</option> <option value='3' <?php if($_POST['select_name']=='3')esc_html_e('selected');?>>項目3</option> </select> <br><br> <button type='submit' class='real' name='button' value='select' style='display:none;'>送信</button><!-- 本来のボタンを非表示 --> <button type='button' class='dummy'>送信</button><!-- ダミーボタンを配置 --> <button type='button' class='reset'>リセット</button><br> <p class='msg01' style='color:red;'><?php esc_html_e($select_msg);?></p> </form> <script> function DB_update(){ // onsubmitのダミープログラム window.alert('『購入DB』を更新します。'); } $('.dummy').click(function(){ var my_select = $('[name="select_name"]').val(); if(my_select == '#none#'){ window.alert('オプションが選択されておりません'); $('.msg01').css('display','none') }else{ $('.real').click(); // 非表示のボタンをプログラムでクリックする } }); $('.reset').click(function(){ $('[name="select_name"]').prop('selectedIndex', 0); $('.msg01').css('display','none'); }); </script>
■1~9行目:PHP部分
フォームの送信先(action='')は自分のプログラムなので、$_POST['select_name'] に値がある時だけ、選択されたvale値をテキスト値に置き換えて表示する処理をしています。
■10~23行目:HTML部分
19行目の本来のsubmitボタンを非表示にしています。
20行目にダミーのボタンを設置しています。
■24行目~:スクリプト部分
25行目~27行目:onsubmitのダミープログラムを作成しています。
28行目以降
・ダミーボタンがクリックされた時にエラーチェックを行い、エラーがない時は19行目のsubmitボタンをプログラムでクリックしています
・リセットボタンが挿入された時は、選択値をクリアしています。
参考情報
その他の 操作系メソッド も参照してください。