フォーム
JavaScriptは、よくフォームと連動して使われます。メインといってもいいです。
テキストエリア
フォームの内容を書きかえるには、
document.フォーム名.名前.value=代入するモノ
です。名前は、INPUTの属性NAMEでつけた名前です。
変数=document.フォーム名.名前.value
で、その名前の部品の状態が分かります。
この式を使った、textとtextareaの例です。
<form name="one" action="x" onSubmit="return false;">
<p><input type="text" name="te" value="かわります"></p>
</form>
<button onClick="document.one.te.value='かわりました'">push</button>
次は、テキストエリアです。読みこんだ後、書き換えてます。
<form name="two" action="x">
<p><textarea rows="4" cols="40" name="taw" onchange="{name=prompt('お名前は？');
ta=document.two.taw.value;
document.two.taw.value=name+'さん\n'+ta+'\nなのですね'}">--何か書いた後、エリア外をクリックして、名前を入れて--</textarea></p></form>
radio
さっきの式だと、value=""で設定した名前がでます。チェックしたかどうかは、
document.フォーム名.name.checked
です。値は、trueかfalseです。
<SCRIPT type="text/javascript">
<!--
function cheki(){
a=document.food.fruit.checked;
b=document.food.fruit.value;
alert(a+"\n"+b)}
// -->
</script>
<form name="food" action="x"><p>
<input type="radio" name="fruit" value="grape">ぶどう<br>
<input type="reset" name="no" value="やりなおし">
<input type="button" onClick="cheki()" name="sw" value="確認">
</p></form>
radioで名前を一緒にした時は、参照するときに、name[0],name[1]...となるようです。
<SCRIPT type="text/javascript">
<!--
function which(){
var c="";
for (i=0; i<=2; i++){
che=document.foods.fruits[i].checked;
nam=document.foods.fruits[i].value;
c=c+nam+"="+che+"\n"}
alert(c);}
// -->
</script>
<form name="foods" action="x">
<p>
<input type="radio" name="fruits" value="apple">りんご
<input type="radio" name="fruits" value="orange">オレンジ
<input type="radio" name="fruits" value="peach">桃
<input type="button" onClick="which()" name="wh" value="確認">
</p></form>
checkbox
チェックしているかどうかは、radioと一緒で
document.フォーム名.name.checked
です。true|falseが入ります。これらを代入してもいいです。
<form name="yn" action="x">
<p><input type="checkbox" name="chii" value="sumomo" onChange="alert(document.yn.chii.checked)">on/offした後、どこかをクリックして
</p></form>
select
valueは、他のと同じ。何番目が選択されているかは、
document.フォーム名.selectのname.selectedIndex
です。0から始まります。
<form name="flower" action="x">
<p><select name="buy" onChange="alert(document.flower.buy.value+document.flower.buy.selectedIndex)">
<option value="liliy">ゆり
<option value="rose">ばら
<option value="violet">すみれ
</select></p></form>
Next : 次のステップへ
Pre : 前のステップへ
Up : JavaScriptに戻る
Home : ホームに戻る
Presented by Rei