• 締切済み

任意のinput要素同士の連動について

とあるCMSのページ編集画面のカスタマイズに取り組んでいます。 たとえば以下のようなフォームがあるとします。 [x] そのまま上書き保存 [ ] 日付を指定して保存する ([ ]月[ ]日) [実行] 簡略ですが、ソースは以下のような感じです。 <input name="sonomama" type="radio" checked /> そのまま上書き保存 <input name="hokanohi" type="radio" /> 日付を指定して保存 (<input type="text" />月<input type="text" />日) <input type="submit" /> これでちょっと困っているのが、「月」と「日」に適当な 日時を入力したにも関わらず、ラジオボタンname="hokanohi"への チェックを忘れたために結局「そのまま上書き保存」になって しまうことです。なので、<input type="text" />にフォーカスが 移れば自動的にhokanohiにチェックが入るようにJavaScriptを 書けばいいわけですが、これがCMSであるために行き詰まっています。 このCMSは</head>の直前に任意のコードを挿入するようにカスタマイズ することはできますが、inputタグ周辺そのものをカスタマイズする ことはできません。コアファイルを直接編集すれば可能ですが、 コアのアップデートの際の手間などを考えると、できるだけコアは さわらずにすませたいです。 なので、</head>の直前でJavaScriptを読み込み、それだけで 目的の挙動ができるような書き方ができないかと探しています。 最近流行しているAjaxやJavaScriptだと、もともとのソースには ほとんど手を加えず、ライブラリを読み込ませるだけで様々な 処理ができるものがあるようですが、そのような実装をイメージ しています。 このような書き方をすればいい、などのアドバイスが得られると 嬉しいです。

みんなの回答

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.8

こんにちは focus()は使ってないですけどこんな感じのことがしたいのでしょうか？ 【1】月日を入力したら2番目のラジオボタンをチェック <script language="JavaScript"> <!-- function check() { m = document.f.month.value; n = document.f.day.value; if(m == "" || n == "") { document.f.sel[0].checked = true; } else { document.f.sel[1].checked = true; } } // --> </script> <form action="***.cgi" method="post" name="f"> <input type="radio" name="sel" value="1" checked>そのまま上書き保存<br> <input type="radio" name="sel" value="2">日付を指定して保存 <input type="text" name="month" size="5" onkeyup="check()">月 <input type="text" name="day" size="5" onkeyup="check()">日<br> <input type="submit" value="保存"> </form> 【2】月日のtextboxをクリックしたら2番目のラジオボタンをチェック <script language="JavaScript"> <!-- function check1() { document.f1.sel[1].checked = true; } // --> </script> <form action="***.cgi" method="post" name="f1"> <input type="radio" name="sel" value="1" checked>そのまま上書き保存<br> <input type="radio" name="sel" value="2">日付を指定して保存 <input type="text" name="month" size="5" onclick="check1()">月 <input type="text" name="day" size="5" onclick="check1()">日<br> <input type="submit" value="保存"> </form> 【3】submitボタンを押したときに判断 <script language="JavaScript"> <!-- function check2() { m = document.f2.month.value; n = document.f2.day.value; if(m == "" || n == "") { document.f2.sel[0].checked = true; } else { document.f2.sel[1].checked = true; } } //--> </script> <form action="***.cgi" method="post" name="f2"> <input type="radio" name="sel" value="1" checked>そのまま上書き保存<br> <input type="radio" name="sel" value="2">日付を指定して保存 <input type="text" name="month" size="5">月 <input type="text" name="day" size="5">日<br> <input type="button" value="保存" onclick="check2()"> </form> 【4】タイマー機能を使ってチェックする（例文は５秒間隔） <script language="JavaScript"> <!-- window.onload=function() { check3(); } function check3() { m = document.f3.month.value; n = document.f3.day.value; if(m == "" || n == "") { document.f3.sel[0].checked = true; } else { document.getElementById("sel1").checked = true; } tid =setTimeout("check3()", 5000); } //--> </script> <form action="***.cgi" method="post" name="f3"> <input type="radio" name="sel" value="1" checked>そのまま上書き保存<br> <input type="radio" name="sel" value="2">日付を指定して保存 <input type="text" name="month" size="5">月 <input type="text" name="day" size="5">日<br> <input type="button" value="保存""> </form> p.s. form部、input部が変えられないのであればdocument.f.month.valueなどのところをdocument.getElementById("edit").elements[2].value（monthが[2]、dayが[3]です）、document.getElementById("hokanohi").checkedなどに変えれば使えると思います

すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.7

こんなかんじで <head> <script language="javascript"> window.onload=function(){ var sonomama=document.getElementById('sonomama'); var hokanohi=document.getElementById('hokanohi'); var day=document.getElementById('day'); var month=document.getElementById('month'); sonomama.onclick=function(){month.value='';day.value='';} day.onclick=function(){hokanohi.checked=true} month.onclick=function(){hokanohi.checked=true} } </script> </head> <body> <form id="edit"> <input id="sonomama" name="action" type="radio" checked />そのまま上書き保存 <input id="hokanohi" name="action" type="radio" />日付を指定して保存 <input id="month" name="month" type="text" />月 <input id="day" name="day" type="text" />日 <input type="submit" /> </body>

すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.6

フォーム部分を正確に書きなおしてください。 いくら回答をしても命題自体が間違っていては全て無意味です。 そもそも<input type="text" />月では、いくら入力しても 結局なにもサーバーには送られません。 input要素にはidはふれないのですか？それがあればダイブ楽になります。 （なければそれなりの手を打つしかないですけど）

dcorange
質問者

お礼

すいません、補足に間違いがありました。こちらに書きます。 > <form>以外はユニークなidを振ってあります <form>にもid振ってありますね。

dcorange
質問者

補足

下のkk273g906さんの回答もチェック中ですが、とりあえず さらに正確な記述を補足します。複数のCMSがありますが、 ほぼ以下の書式です。<form>以外はユニークなidを振ってあります。 <form id="edit"> <input id="sonomama" name="action" type="radio" checked />そのまま上書き保存 <input id="hokanohi" name="action" type="radio" />日付を指定して保存 <input id="month" name="month" type="text" />月 <input id="day" name="day" type="text" />日 <input type="submit" /> id="month"または"day"のinput部品をマウスでクリックするなどして フォーカスが移った時に、id="hokanohi"のラジオボタンにチェックを 切り換えたいです。

すると、全ての回答が全文表示されます。
noname#36864
noname#36864
回答No.5

<head> <title>??</title> <script> document.forms[0].elements["hokanohi"][0].onfocus=function(){ this.checked = true; document.forms[0].elements["hokanohi"][1].checked = false; } document.forms[0].elements["hokanohi"][1].onfocus=function(){ this.checked = true; document.forms[0].elements["hokanohi"][0].checked = false; }</script>

すると、全ての回答が全文表示されます。
noname#36864
noname#36864
回答No.4

this.focus();ではなくてthis.checked = trueですね。

すると、全ての回答が全文表示されます。
noname#36864
noname#36864
回答No.3

<head> <title>??</title> <script> document.forms[0].elements["hokanohi"].onfocus=function(){ this.focus(); } </script>

dcorange
質問者

補足

ありがとうございます。なるほど、そんな感じですか。 ただしNo.1の方の指摘のように、radioパーツなのでnameはどちらも 同じです。違うのはvalueとIDのみです。

すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

とりあえずcheckedをはずしてみれば？ そうすれば最低でも「そのまま」とは判断されないとおもうので もしくは任意に日付けを指定するほうにcheckedを入れておくか・・・・

dcorange
質問者

補足

いいアイデアだと思いますが、さわれる部分は「</head>の直前のみ」なので、そこは変更できません…

すると、全ての回答が全文表示されます。
  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

マズイのはradioのnameがちがう名前であること。 同じ名前にする。

dcorange
質問者

補足

そのとおりですね。自分が思いつきで書いたこの例文のほうが間違ってて、実物のほうは同じになってます。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する