xhml・html

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

ボタンクリックでメッセージを表示、キャンセル時は元の画面に戻り、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に設定してサブミットしています。