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

締切済

質問者：dcorange
質問日時：2007/07/15 11:48
回答数：8件

とある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だと、もともとのソースには
ほとんど手を加えず、ライブラリを読み込ませるだけで様々な
処理ができるものがあるようですが、そのような実装をイメージ
しています。
このような書き方をすればいい、などのアドバイスが得られると
嬉しいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (8件)

最新から表示
回答順に表示

No.8

回答者： leap_day
回答日時：2007/07/16 12:56

こんにちは

focus()は使ってないですけどこんな感じのことがしたいのでしょうか？

【1】月日を入力したら2番目のラジオボタンをチェック
<script language="JavaScript">

</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">

</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">

</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">

</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などに変えれば使えると思います

- 0
- 件

通報する

No.7

回答者： yambejp
回答日時：2007/07/16 12:08

こんなかんじで

<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>

- 0
- 件

通報する

No.6

回答者： yambejp
回答日時：2007/07/15 20:32

フォーム部分を正確に書きなおしてください。

いくら回答をしても命題自体が間違っていては全て無意味です。
そもそも<input type="text" />月では、いくら入力しても
結局なにもサーバーには送られません。

input要素にはidはふれないのですか？それがあればダイブ楽になります。
（なければそれなりの手を打つしかないですけど）

この回答への補足

下の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"のラジオボタンにチェックを
切り換えたいです。

補足日時：2007/07/15 22:14

通報する

- 0
- 件

通報する

この回答へのお礼

すいません、補足に間違いがありました。こちらに書きます。

> <form>以外はユニークなidを振ってあります

<form>にもid振ってありますね。

通報する

お礼日時：2007/07/15 22:24

No.5

回答者： noname#36864
回答日時：2007/07/15 18:28

<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>