2025年05月10日
jquery:click()
このメソッドの説明
click() は非表示のSubmitボタン をプログラムでクリックする事により、フォームをサブミットさせます。
下記の2つのメソッドの違いに注意してください。
| メソッド |
処理の概要 |
| click() | 本来のSubmitボタンは、CSSで非表示にします。
新たなボタンを作成し、この中で色々なユーザ処理を加え終了後、上記の非表示のボタンをプログラムでクリックします。 |
| submit() | 本来のSubmitボタンはButton属性に変更し、Submitできないようにします。
上記のボタンが挿入されたら色々なユーザ処理を加え終了後、プログラムでフォームをサブミットさせます。 |
メソッド
セレクタ.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()メソッドで、非表示の①のボタンをクリックする。
利用例
1.プログラムでボタンをクリックする。
下記のセレクト操作を行ってください。
・サイズを選択しないで購入ボタンを挿入すると、エラーメッセージが表示されます。
・サイズを選択して購入ボタンを挿入すると(エラーなし)、onsubmit処理が実行された後、サブミットが実行されます。
・リセットボタンを挿入すると、選択を解除します。
| Warning: include_once(/sample/javascript/method/click): Failed to open stream: No such file or directory in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 Warning: include_once(): Failed opening '/sample/javascript/method/click' for inclusion (include_path='.:/usr/share/pear') in /volume1/web/school/wp-content/themes/my_template/functions.php on line 44 |
<?php
$select_msg = "";
if(isset($_POST['select_name']) && $_POST['select_name'] != ''){
$item = $_POST['select_name'];
$item = str_replace(['1', '2', '3'], ['項目1', '項目2', '項目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'>項目1</option>
<option value='2'>項目2</option>
<option value='3'>項目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 echo htmlspecialchars($select_msg, ENT_QUOTES, 'UTF-8'); ?></p>
</form>
<script>
function DB_update(){
window.alert('『購入DB』を更新します。');
};
$(document).on('click','.real',function(){
$('[name="position"]').val($(window).scrollTop());
});
$(document).on('click','.dummy',function(){
var my_select = $('[name="select_name"]').val();
if(my_select == '#none#'){
window.alert('オプションが選択されておりません');
$('.msg01').css('display','none');
return; // ここで処理を中断
};
$('.real').click();
});
$(document).on('click','.reset',function(){
$('[name="select_name"]').prop('selectedIndex', 0);
$('.msg01').css('display','none');
});
</script>
■1~行目:PHP部分
フォームの送信先(action='')は自分のプログラムなので、$_POST['select_name'] に値がある時だけ、選択されたvale値をテキスト値に置き換えて表示する処理をしています。
■9~22行目:HTML部分
18行目の本来のsubmitボタンを非表示にしています。
19行目にダミーのボタンを設置しています。
■23行目~:スクリプト部分
24行目~26行目:onsubmit処理のダミープログラムを作成しています。
27行目以降
・ダミーボタンがクリックされた時にエラーチェックを行い、エラーがない時は18行目のsubmitボタンをプログラムでクリックしています
・リセットボタンが挿入された時は、選択値をクリアしています。
参考情報
その他の 操作系メソッド も参照してください。