TOPページ >  フォームを作成する, 簡単JavaScript > JavaScriptでフォームデータを制御する

JavaScriptでフォームデータを制御する

JavaScriptでフォームデータを制御する場合、action や method の指定は不要です。簡単なサンプルをご紹介します。

掛け算のプログラムです。そのまま、あるいは 1つ目と 2つ目のテキスト入力欄の数値を入力して、『計算』ボタンを押してみてください。

x =  

このソースは、次のようになります。

<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は大文字と小文字を区別しますので、ソースは正しく入力してください。

また、同じファンクション名が同一ページ内に記述されるとエラーとなります。ブログの場合は、同じファンクション名を使うと 記事が別々でもトップページやカテゴリー、月別などでそれら記事が同一ページに表示された際にエラーとなりますのでご注意ください。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
JavaScriptを使ってクッキングタイマーを作る
隠し項目を作成する
送信ボタンの代わりに画像を表示する
ファイル選択ボタンを作成する
パスワード入力欄を作成する
cgi スクリプトでフォームデータを制御する
JavaScriptでフォームデータを制御する
フォームを作成する
複数行入力可能なテキスト入力欄を作成する
ボタンを作成する
送信ボタンを作成する
リセットボタンを作成する
選択メニューを作成する
ラジオボタンを作成する
チェックボックスを作成する
テキスト入力欄を作成する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス