検索画面を作成しています。
この検索画面にリセットボタンを設置したいと思っているのですがうまくいきません。
この画面には、検索キーになる項目が50個ぐらいあるのですが、
一部のプルダウン項目が連動しており、選択される項目が変わる度に
onchangeで、自分自身のページにsubmitしています。
上記のような事をしている為、他の入力フィールドは、
<input type="text" name="xxx" value=<%=Request("xxx")%>>
としています。ですから、単純に
<input type="reset" value="リセット">
というものが利用できない状態です。
リセットボタンを押された時に初期化(最初にページを開いた時の状態)に戻したいのですが、
何か良い方法はないでしょうか?ご存知の方がいらっしゃいましたらご教授下さい。よろしくお願いします。
No.1ベストアンサー
- 回答日時:
最初ページを開いた時の全フィールドを値をHiddenボークスで埋め込んで、リセット(普通のボタン)時に、Onclick事件でHiddenから読み込んで、値を付与ます。
50個フィールドがあれば、50個Hiddenボークスを用意します。
自分自身のページにsubmitすることがありますので、
最初状態とsubmit状態区別用のフラグを設ければ、OKだと思います。
wangkp様
ご回答ありがとうございます。
なるほど。Hiddenか~。全然頭にありませんでした。
早速試してみたいと思います。
ありがとうございました。
No.5
- 回答日時:
No4です。
自分で補足しますが・・・
<!--↓リセット用のフォーム-->
<form action="自分自身のURL">
<input type="submit" value="リセット">
</form>
リセット用のフォームの中身は、何も無しで良いかも。
テストはしてませんので、うまく行かなかったらごめんなさい。
No.4
- 回答日時:
テストはしていませんが、
空の内容を自分自身にsubmitすれば初期化されませんか?
<!--↓メインのフォーム-->
<form>
<input type="text" name="xxx" value=<%=Request("xxx")%>>
・
・
・
<input type="submit" value="送信">
</form>
<!--↓リセット用のフォーム-->
<form>
<input type="hidden" name="xxx" value="">
・
・
・
<input type="submit" value="リセット">
</form>
同じ内容で、全てhiddenでvalueが空のフォームを用意、
リセットボタンで、その内容をsubmit。
venzou様
ご回答ありがとうございます。
なるほど。
プルダウンの連動で自分自身にsubmitしているにも関わらず、空の内容の自分自身にsubmitする
という発想がでてきませんでした。
まだまだ未熟者です。
早速試してみたいと思います。
ありがとうございました。
No.3
- 回答日時:
<script language="javascript">
var submitFlg = true;
以下略
<form name="Myform" onSubmit="return submitFlg;" >
<input type="button" value="リセット" onClick="submitFlg=false;Myform.reset();submitFlg=true;">
以下略
とかは出来ないですかね?
リセットボタンを押されたらsubmitを無効化してreset()を呼び出し、
終了したら有効にする。
テストはしていません。
marimari01様
ご回答ありがとうございます。
なるほど、フラグでコントロールするんですね。
私も色々試した結果うまくいかなかったので、resetは使えないと思っていたのですが、
もう一度試してみたいと思います。
ありがとうございました。
No.2
- 回答日時:
たとえばこんな感じで地道にクリアしてください
<script>
function resetValue(f){
for (var i=0;i<f.length;i++){
if(f[i].type=="text") f[i].value="";
if(f[i].type=="select-one") f[i].selectedIndex=0;
if(f[i].type=="radio") f[i].checked=false;
}
}
</script>
<form>
<input type="text" value="hogehoge">
<select>
<option value="">選択</option>
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
<input type="radio" name="r1">
<input type="radio" name="r1">
<input type="radio" name="r1" checked>
<input type="button" value="リセット" onClick="resetValue(this.form)">
</form>
yambejp様
ご回答ありがとうございます。
なるほど。こう言う方法があるのですね。
type 別に値の変更ができるのか~。大変勉強になります。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VB.NET DateTimeの型について
-
selectboxのoptionタグのvalue...
-
switchを使って四則演算のプロ...
-
value内に変数を入れたい
-
クイズ作成:15個の問題から5個...
-
C言語クイックソートの比較総回...
-
電卓のJavaScript
-
VBAをJavaScriptに変換したいです
-
IF文で
-
フォームの入力欄の未記入チェ...
-
大量のselect要素のvalueを短い...
-
値を初期化したい。
-
複数のsubmitボタンで押された...
-
ラジオボタンと連動して文字列...
-
Pythonで会員サイトの自動ログ...
-
javascriptでhiddenに二次元配...
-
テキストエリア内容からチェッ...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
localStorageでのcheckbox制御
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
hiddenのvalueの値を変えたい
-
value内に変数を入れたい
-
複数のsubmitボタンで押された...
-
3桁区切りのカンマをつけたい...
-
VB.NET DateTimeの型について
-
javascriptでhiddenに二次元配...
-
テキストボックスに入力された...
-
eval()を使わずに数値を取得し...
-
引数に数値、文字列の混在
-
クイズ作成:15個の問題から5個...
-
sessionStorageを調べています。
-
setIntervalの間隔を途中で変更...
-
javascriptにてHTMLのhiddenエ...
-
Pythonで会員サイトの自動ログ...
-
セレクトボックスの初期選択状...
-
name属性が同じフォームが複数...
-
ラジオボタンの選択で解答・点...
-
商品コードを入れたら自動で商...
-
演算対象の数字と演算子を入力...
-
フォームで入力した値を別のフ...
おすすめ情報