JavaScriptでフォームデータを制御する
JavaScriptでフォームデータを制御する場合、action や method の指定は不要です。簡単なサンプルをご紹介します。
掛け算のプログラムです。そのまま、あるいは 1つ目と 2つ目のテキスト入力欄の数値を入力して、『計算』ボタンを押してみてください。
このソースは、次のようになります。
<SCRIPT LANGUAGE="JavaScript">
function clucPut() {
document.sampleForm.boxC.value = document.sampleForm.boxA.value * document.sampleForm.boxB.value;
}
</SCRIPT>
<form name="sampleForm">
<input type="text" name="boxA" size="5" value="5">x
<input type="text" name="boxB" size="5" value="8">=
<input type="text" name="boxC" size="5">
<input type="button" value="計算" onmousedown="clucPut()">
<input type="reset" value="リセット">
</form>
<SCRIPT> ～</SCRIPT> 間がJavaScriptです。『計算』ボタンが押されたときに、clucPut関数を呼び出します。この関数は、sampleForm 内の boxC に、boxA と boxB の値を掛けた数値を入力するものです。
html は大文字でも小文字でも構いませんが、JavaScriptは大文字と小文字を区別しますので、ソースは正しく入力してください。
また、同じファンクション名が同一ページ内に記述されるとエラーとなります。ブログの場合は、同じファンクション名を使うと 記事が別々でもトップページやカテゴリー、月別などでそれら記事が同一ページに表示された際にエラーとなりますのでご注意ください。