WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:buttonにsubmitのようにフォーカスをあてたい

0:[投稿] きょうこ [MAIL] [2004/01/08 17:03 ][環境:IE6.0 SP1 Windows2000 IIS]


はじめまして。

入力フォームに数値を入力し、
<input type="button"  value="計算" onClick="check()">
で計算をさせて同一ページのフォームに結果を表示したいのですが
ボタンにフォーカスがないと動作しません。

<input type="submit">のように入力フォームと計算ボタン両方にフォーカスを持たせたいのですが、どのようにしたらようのでしょうか?


また、Enterキーでカーソルを飛ばすことはできるのでしょうか?

初歩的なことを聞いて申し訳ございませんが
宜しくお願いします。


1:[回答] いそね [2004/01/08 17:30 ]

もし<form>内に表記している項目でなければ
<form actio="#" onSubmit="check()">としてしまうのが
手っ取り早いかと思います。

あ、「計算」ボタンは<input type="submit" value="計算">にしてくださいね。


2:[質問] きょうこ [MAIL] [2004/01/09 09:33 ]

いそねさん、はじめまして。

早速コンタクトをいただき、ありがとうございます。


<form action="#" onSubmit="check()">
の"#"は、データを送信するURIを記述するんでしょうか?

このページは、同じページに表示したいのでURIがないのですが
その場合はどうしたらいいのでしょう?

以下に簡単にしたHTMLとJavascriptを載せていただきます。
よろしくおねがいします。


-----------------------------------------------------------------------------------------------------------------
====HTMLの一部分です=====


<script language="JavaScript" src="kaigyou.js"></script>

<table>

<form name="form1">


<table>
<tr><td><font size="2">予測数値を入力してください</font></td></tr>
<tr><td>土地・建物にかかる費用</td><td><input type="text" name="A">万円</td></tr>
<tr><td>自己資金</td><td><input type="text" name="D">万円</td></tr>
</table>

<table>
<tr><td><input type="button" value="計算"  onSubmit="check()"></tr></tr>
</form>
</table>

---------------------------------------------------------------------------------------------------------------

====check()の中身です=====


function check(){

//入力チェック(未入力チェック + 7桁までに設定)

//フォーム1に空欄がないかチェック
   for(c=0; c<document.form1.elements.length; c++){             //エレメントの数だけ処理を繰り返す
       if(document.form1.elements[c].type=="text"){             //1行入力フィールドの場合
           if(document.form1.elements[c].value==""){            //空欄の場合
               alert("すべての欄に入力してください");
        document.form1.elements[c].focus();
        document.form1.elements[c].style.backgroundColor  = "red";  // バックカラーを赤に
               return false;                                    // falseを返す=後の処理が実行されない
               }
           document.form1.elements[c].style.backgroundColor  = "White";
           }
       }
   submit();
}


3:[回答] いそね [2004/01/09 10:55 ]

こんにちは。

action="#" の"#"は自画面を指します。
なのでURLではなく、そのまま"#"を記述してください。
<form name="form1">

<form name="form1" action="#" onSubmit="check()">

onSubmitは<form>に記述します。
ボタンの値は<input type="submit" value="計算">として下さい。


ちょっと関係ないところが気になったのですが、check()の最後、
actionが無いならsubmit()する必要は無いのでは?
実際には他の処理と絡み合ってるのかも知れないので
これだけではなんとも言えませんが。

蛇足そのA
サンプルのボタンの後、</tr></tr>じゃなくて</td></tr> ですね。
これもHTML簡単にした際に間違っただけかもしれませんが。


4:[質問] きょうこ [MAIL] [2004/01/09 12:26 ]


いそねさん、早速お返事いただきましてありがとうございます。

"#"は自画面という意味だったんですね!
初めて知りました。参考になります。

ただ、このままだと、未入力でせっかくカーソルをあてたり、
バックカラーに色をつけても、自画面をリロードして初期画面に
なってしまいます・・・。

submit()はその後、値を計算して、その値をまた画面に表示させ
るためにあります。なので初期画面に戻ってしまうと困ります。

どうしたらいいのでしょう・・・?


5:[回答] [2004/01/09 12:46 ]

formのaction属性は基本的に取得動作を意図しているので
onsubmit="check();return false;" として送信をキャンセルさせます。

"#" は自文書内の不明な部分識別子(アンカー)を指すURI参照です。
結果はブラウザのエラー処理等に依存します。


6:[完了] きょうこ [MAIL] [2004/01/09 14:54 ]

解決できました!
本当にありがとうございます!!!

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World