JavaScript備忘録

2012-02-09

[]2を02にする方法 00:42

javascriptにはsprintfに相当するものがないらしい。

だから、2を02にするのもif (hoge < 10)なら'0' + 2とかしないといけない。

面倒くさい。

2011-07-24

[]ボタンのvalueについて 00:19

JavaScriptでサーバにsubmitした場合、ボタンのvalueはサーバにわたらない。

代わりとなるhiddenを用意する必要がある。

2010-10-06

[]エラーを調べる方法 23:59

何かの本で読んだけど、JavaScriptでわけわからないエラーでブラウザ停止した場合は、trycatchでエラーオブジェクトを確保できるらしいとかなんとか。

2008-07-28

[]onSubmitイベントについてその2 23:01

onSubmitイベントを補足した後に、JavaScripthoge関数をよぶ場合があるとする。hoge関数の中では、location.hrefで別のページに遷移するような場合、以下のようにreturn falseを入れておく必要がある。

そうしないと、location.hrefで別のページに遷移した後、formのactionが効いてしまい、index.phpにリクエストが投げられることになる。

<form action=index.php onSubmit="hoge(); return false;">

[]onSubmitイベントについて 22:54

通常、テキストボックス内でエンターキーを押下すると、onSubmitイベントがよばれるのだが、一つのformの中に複数のテキストボックスがあり且つ、type=submitな部品がそのformに存在しない場合、onSubmitイベントがよばれないようだ。(たぶん、バグなのかも。。)


下記のコードでは、input1のテキストボックスでエンターキーを押下すれば、onSubmitイベントが呼ばれる。

<html>
<head>
<script language=javascript>
function hoge(){
	alert('submitイベントが呼ばれたよ!');
}
</script>
</head>
<body>
<form onSubmit="hoge(); return false;">
<input type=text name=input1>
</form>
</body>
</html>

下記のコードでは、どちらのテキストボックス(input1またはinput2)で、エンターキーを押下してもonSubmitイベントは呼ばれない。

<html>
<head>
<script language=javascript>
function hoge(){
	alert('submitイベントが呼ばれたよ!');
}
</script>
</head>
<body>
<form onSubmit="hoge(); return false;">
<input type=text name=input1>
<input type=text name=input2>
</form>
</body>
</html>

下記のコードでは、一つのformに二つのテキストボックスがあるが、type=submitな部品が存在するので、この場合はテキストボックス内でエンターキーを押下すると、onSubmitイベントが呼ばれる。

<html>
<head>
<script language=javascript>
function hoge(){
	alert('submitイベントが呼ばれたよ!');
}
</script>
</head>
<body>
<form onSubmit="hoge(); return false;">
<input type=text name=input1>
<input type=text name=input2>
<input type=submit name=submit value=submit>
</form>
</body>
</html>

2008-04-09

[]存在しない部品のvalueにアクセスしてはいけない。 23:36

たとえば、テキストボックス3つとラジオボタン2つと普通のボタンが一つあるとする。

普通のボタンを押下すると3つのテキストボックスがクリアされる仕様になっていて、クリア処理はjavascriptで書いているものとする。

ラジオボタンにはAボタンとBボタンとがあって、Bボタンを選択した場合のみ、テキストボックス2つしか表示されないものとする。

このような場合、ラジオBボタンを選択している状態では、普段表示されているはずのテキストボックスが表示されないことになるわけだが、注意したいのが、普通のボタン押下したときに、この表示されていないテキストボックスのvalueを空文字に設定するとjavascriptエラーになる。

これを回避するには、そのテキストボックスが存在することを確認してから、value=""すればよい

以下、そのためのコードです。(説明長すぎた。。)


<html>
<head>
<script language="JavaScript">
<!--
function clearAll() {
	frm = document.frmmain;
	len = frm.elements.length;
	for(i = 0; i < len; i++) {
		ec = frm.elements[i];
		switch (ec.name) {
		case "mytext1":
		case "mytext2":
			ec.value = "";
			break;
		case "mytext3":
			ec.value = "goodby";
			break;
		}
	}
}
-->
</script>
<body>
<form name=frmmain>
<input type=text name=mytext1 value=hello1>
<input type=text name=mytext2 value=hello2>
<input type=text name=mytext3 value=hello3>
<input type=button name=mybutton value=mybutton onClick="clearAll()">
</body>
</form>
</html>