いつもお世話になっております。
ある条件が適用されると、指定の項目を必須入力にしたいのですが、
やり方が全くわかりません。
検索してみましたが、全く引っかからないので、ご質問させていただきます。
やりたいこととしましては、
「対応状況」の項目が「対応済」になったら、
「対応完了日時」を必須入力にしたいのです。
「対応状況は」、「対応中」と「対応済」があり、どちらかを選択して、
submitします。
「対応状況」が、「対応中」の場合は、submitを行っても、
「対応完了日時」は必須入力にはしません。
「対応状況」が、「対応済」になって、submitした際は、
「対応完了日時」を必須入力として、入力されてない場合は、エラーを出したいです。
クライアント側は、html、javascliptにて行っています。
ソース等は、全く思いつかないので、記載できません。
全て人任せで申し訳ありませんが、
ご存知の方がいらっしゃいましたら、ご教授いただけないでしょうか。
よろしくお願いいたします。
No.1
- 回答日時:
ご回答ありがとうございます。
調べると出てくるものですね。
私の調べ方が悪かったんだと思います。
教えていただいたURLを見て、勉強します。
ありがとうございました。
No.2
- 回答日時:
最近のブラウザなら - HTML5 の場合
<script>window.addEventListener('DOMContentLoaded', function(ev){
var form = document.forms['alpha'];
function createHandler(value, reqName) {
return function(ev){form.elements[reqName].required = (ev.target.value == value)};
}
form.elements['ca'].addEventListener('change', createHandler('x', 'cb'), false);
form.elements['sa'].addEventListener('change', createHandler('b', 'sb'), false);
}, false)</script>
<form name=alpha action=confirm.html><ul>
<li> <input name=ta type=text required>
<li> <input name=ca type=checkbox value=x> <input name=cb type=text>
<li> <select name=sa><option value=a>対応中<option value=b>対応済</select> <input name=sb type=text>
<li> <button type=submit>ok</button>
</ul></form>
古いブラウザも考慮するなら - jQuery の場合
以下を利用します
http://ajax.googleapis.com/ajax/libs/jquery/1.11 …
http://ajax.aspnetcdn.com/ajax/jquery.validate/1 …
<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script>$(function(){
var form = $('form[name="beta"]');
form.validate({ rules:{
'ta': 'required',
'cb': { required:{ depends:function(){return form.find('*[name="ca"]').is(':checked')} } },
'sb': { required:{ depends:function(){return form.find('*[name="sa"]').val() == 'b'} } }
} });
})</script>
<style>label.error { color:red; font-weight:bold; }</style>
<form name=beta action=confirm.html><ul>
<li> <input name=ta type=text >
<li> <input name=ca type=checkbox value=x> <input name=cb type=text>
<li> <select name=sa><option value=a>対応中<option value=b>対応済</select> <input name=sb type=text>
<li> <button type=submit>ok</button>
</ul></form>
この回答への補足
コードを見させていただいたのですが、理解できているようなできないような気がします。
実際のform部分はこのようになっています。
<form action = "sagyoutouroku.asp" method="POST" name="form01">
<input type="text" name="syuuryoubi"id="syuuryoubi" style="width:100%" rows=1 class="textbox" value="<%=Rs("作業終了日")%>">
<select name="jyoukyou" id="jyoukyou" required>
<option value=""/>---対応情報選択---</option>
<option value="対応中"/>対応中</option>
<option value="対応済"/>対応済</option>
</select>
<input type="submit" value="作業内容登録">
</form>
このような場合は、コードはどうなりますでしょうか。
ほんとに他人任せですいません。
No.3ベストアンサー
- 回答日時:
No.2 の補足に対して
属性 required を使っているので、HTML5 で回答します
アレ = ある条件、の対象となるタグ
コレ = 指定の項目、のタグ
とすれば、
var form = document.forms[アレとコレを含むフォームのname]
form.elements[アレのname].addEventListener('change', createHandler(条件を満たすアレのvalue, コレのname), false);
なので、
var form = document.forms['form01']
form.elements['jyoukyou'].addEventListener('change', createHandler('対応済', 'syuuryoubi'), false);
それはそうと
誤: <option value="..."/> ... </option>
正: <option value="..."> ... </option>
再度ご回答ありがとうございます。
非常に勉強になりました。
補足に記載していただいた内容で、バッチリできました。
お忙しい中ご回答いただき、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ふるさと納税 ふるさと納税ワンストップ特例制度が適用されなかった 7 2022/05/04 23:39
- その他(クラウドサービス・オンラインストレージ) おすすめのパスワードマネージャは? 1 2023/02/28 20:09
- ビジネスマナー・ビジネス文書 バイトのクレーム、不備対応について。 電話にてクレームや不備の問い合わせがあった場合、謝罪や状況把握 2 2022/10/28 16:26
- 転職 【事務・庶務】のハローワーク求人について。 仕事内容 ・社内外からの電話応対 ・工場来場者への対応と 5 2022/04/14 16:20
- その他(メールソフト・メールサービス) サンダーバードメールにて数万件の受信メール対応方法 2 2023/01/27 13:38
- 賃貸マンション・賃貸アパート 賃貸:24時間緊急駆け付けサポートの加入必須?更新時の相談 3 2022/09/08 14:51
- ノートパソコン 中古パソコンの買い方 7 2023/03/07 16:53
- ポイントサービス・マイル マイナポイント受け取りについて。助けてください。もう疲れ果てました。 6 2023/07/28 23:50
- 格安スマホ・SIMフリースマホ SIMカードのロックについて 1 2022/03/29 15:02
- 格安スマホ・SIMフリースマホ 現時点で購入できる4G対応スマホを挙げてください 7 2022/06/20 23:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
select値をhiddenのvalueに渡し...
-
チェックボックスグループの一...
-
HTML プルダウンメニューの選択...
-
INPUT TYPE
-
「value」に2つの値をセットす...
-
ラジオボタンを選択済みにする...
-
↓の質問:テキストではなく、セ...
-
wordの数式について 定積分を書...
-
WEBページを強制的に横画面で見...
-
pythonのnumpyでの列(縦)ベク...
-
日本語文字化け(GETメソッド?)
-
EXCELとの連携
-
vsftpd+sslでアップロードできない
-
iis+cgiでmultipart/form-data...
-
Javascriptの変数をCGIに送る方法
-
VB.net データーグリッドビュー...
-
チェックボックスの返す値
-
CGI経由でのPDFファイルをダウ...
-
postデータのあるページの再表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
select値をhiddenのvalueに渡し...
-
「value」に2つの値をセットす...
-
INPUT TYPE
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
チェックボックスグループの一...
-
ラジオボタンを選択済みにする...
-
<select>タグの幅設定
-
OPTIONタグにループは使えない...
-
iframeごとに戻るボタンを
-
メールフォームのプルダウンメ...
-
リストボックス(multipleなsel...
-
selectboxの画面遷移で、postデ...
-
プルダウンメニューでValue値を...
-
htmlでセルの値を取得して計算...
-
チェックボックスの余白を指定...
-
一つの検索窓で複数のサイトか...
-
ラジオボタンとセレクトメニュ...
-
コンボ1の内容に応じてコンボ...
おすすめ情報