xhml・html

レスポンシブWebデザイン メッセージ表示後サブミット

2019年03月26日
ネットビジネス便利ツール】のモバイル対応、フォームでよく使う機能です。

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、OK時はサブミットする
ボタンクリックで前の画面に戻る、
動きをするJavaScriptについてです。

2つとも今までは、htmlにJavaScriptを書いていました。

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、OK時はサブミットします。
html -------------------------------------------------
<form action="xxxxx" method="post" target="_top">
<input type="button" value="表示文字" onclick="return kakunin('表示メッセージ。改行は\n')" >
</form>
------------------------------------------------------

JavaScript --------------------------------------------
function kakunin(msg){
var result = false;
result = window.confirm(msg);
if(result == true){
return true;
}
else{
return false;
}
}
------------------------------------------------------

これをjQueryを使ったソースに書き換えました。

html -------------------------------------------------
<form action="xxxxx" method="post" id="frmID">
<input type="button" value="クリック" id="buttonID">
</form>
------------------------------------------------------

JavaScript --------------------------------------------
$(function(){
$('#buttonID').click(function(){
if(!confirm('表示メッセージ。改行は\n')){
/* キャンセルの時は元の画面に戻る */
return false;
}else{
/* OKの時はサブミット */
$('#frmID').submit();
}
});
});
------------------------------------------------------

htmlとソースを分けるという点ではスッキリしますが、どこに何を仕込んだかわからなくなりそうです。一括検索もできないし、呼び出し側でメッセージだけ変更するのもややこしいし、元に戻した方が便利かな・・・



ボタンクリックで前の画面に戻ります。

html -------------------------------------------------
<form method="post" action="" id="frmSet" name="frmSet">
<input type="button" id="back" value="修正">
<input type="hidden" id="mode" name="mode" value="send">
</form>
------------------------------------------------------

JavaScript --------------------------------------------
$(function(){
$('#back').on('click', function() {
$('#mode').val('syuusei');
$('#frmSet').submit();
});
});
------------------------------------------------------

ブラウザの戻るボタンと同じ動き【history.back()】ではなく、PHPで処理をするためmodeをsyuuseiに設定してサブミットしています。