こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ラジオボタンにチェックを入れて、テキストボックスのコメントを消すには

どなたかお力を・・・
宜しくお願いします。

メールフォームを作成していて、

テキストボックス入力欄 ○ラジオボタン01 ○ラジオボタン02

から、1箇所選択してもらうようにしてあります。
テキストボックスに始めから、例を記入してあるのですが、
ラジオボタンにチェックを入れた際に消えるようにしたいのです。

フォームのコメントを消すjavascriptは変更してもらっても構いません。

<INPUT type="text" name="あいうえお" onfocus="if (this.value == '例)Corneometer') this.value = '';" onblur="if (this.value == '') this.value = '例)テスト';" value="例)テスト">
<INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="check_reset(this,10)">ラジオ01
<INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="check_reset(this,11)">ラジオ02

投稿日時 - 2008-10-20 17:44:07

QNo.4416083

困ってます

質問者が選んだベストアンサー

ラジオボタンを押した後に記入する可能性があるなら、
記入するときにラジオボタンをクリアした方がよいのでは?

<script type="text/javascript">
window.onload = function() {
setFormElement();
}

function setFormElement() {
var f=document.getElementById('f0');
for (var i=0;i<f.length;i++){
if (f[i].name=='r0') f[i].onclick=function(){this.form.t0.value=''};
if (f[i].name=='t0') f[i].onfocus=function(){
var f=this.form;
for(var i=0;i<f.length;i++) if(f[i].name=='r0' && f[i].checked){f[i].checked=false;break;}
};
}
}
</script>
<form id='f0'>
<p>
<input type="text" name="t0" id="t0" value="例)テスト" />
<input type="radio" name="r0" value="ラジオ01" id="r01"><label for="r01">ラジオ01</label>
<input type="radio" name="r0" value="ラジオ02" id="r02"><label for="r02">ラジオ02</label>
<input type="radio" name="r0" value="ラジオ03" id="r03"><label for="r03">ラジオ03</label>
</p>
</form>

投稿日時 - 2008-10-21 16:32:43

お礼

ありがとうございます。

確かに、記入するときにラジオボタンをクリアできた方が親切ですよね

テストしてみましたが、理想の動きになりました^^

いろいろとどうもありがとうございました。感謝です!

投稿日時 - 2008-10-21 16:52:43

ANo.5

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

変ですね・・・。
何かミスをしたかと思い、掲示板に出したソースからコピー&ペーストして試してみましたが、私のところでは動作します。
(IE6, IE7, Firefox3, Opera9.6, Safari3.1.2, 全てWindows)

ページをリロード云々というのは、キャッシュに古いものが残っていて何か変なことになっているということはありませんか?

投稿日時 - 2008-10-21 13:39:39

補足

私の方ももう一度同じ環境(IE6, IE7, Firefox, Opera, Safari,Windows)で試してみて気づいたのですが、

初期コメントを消してから、新しくコメント記入

ラジオボックスにチェック

消える

もう一度記入

ラジオボックスにチェック

消えない

といった感じで、一度ラジオボックスにチェックを入れて消した後、再度記入した場合は消えないようです。

投稿日時 - 2008-10-21 14:01:00

No.2です。

テキストボックスの内容を変更した後でも、それを消してよいということであれば、もっと簡単になります。
Javascript部分だけを書いておきます。(No.2から不要箇所を削除しただけですが。)

---

window.onload = function() {
//ラジオボタンボタンにチェックを入れたときの動作
setRadioClick(function() {
document.getElementById('t0').value = '';
setRadioClick(null);
});

//ラジオボタンにonclickを設定
function setRadioClick(fn) {
var inputs = document.getElementById('f0').getElementsByTagName('input');
for (var i = 0, n = inputs.length; i < n; i++) {
if (inputs[i].type == 'radio') inputs[i].onclick = fn;
}
}
}

投稿日時 - 2008-10-21 10:18:52

お礼

わざわざありがとうございます。

テストしてみたのですが、テキストフォーム記入後にページをリロードした後であれば消えてくれるようですが、そのままだと消えないようです。

単純にコピペしただけでテストしてみたので、私の方のミスかもしれませんが…。

投稿日時 - 2008-10-21 11:50:09

ラジオボタンにチェックを入れたらテキストボックスの初期値を消す部分のみですが、こんなのはどうでしょう?
(onfocusやonblurの部分は抜いてあります)

テキストボックスの内容が初期値から変更されないままでラジオボタンにチェックが入れられた場合に、テキストボックスの内容を消すようにしてあります。

---

<html>
<head>
<script type="text/javascript">
window.onload = function() {
//テキストボックスの内容に初期値からの変更があったときの動作
document.getElementById('t0').onchange = function() {
this.onchange = null;
setRadioClick(null);
}

//ラジオボタンボタンにチェックを入れたときの動作
setRadioClick(function() {
document.getElementById('t0').onchange = null;
document.getElementById('t0').value = '';
setRadioClick(null);
});

//ラジオボタンにonclickを設定
function setRadioClick(fn) {
var inputs = document.getElementById('f0').getElementsByTagName('input');
for (var i = 0, n = inputs.length; i < n; i++) {
if (inputs[i].type == 'radio') inputs[i].onclick = fn;
}
}
}
</script>
</head>
<body>
<form id='f0'>
<input type="text" name="t0" id="t0" value="例)テスト" />
<input type="radio" name="r0" value="ラジオ01">ラジオ01</input>
<input type="radio" name="r0" value="ラジオ02">ラジオ02</input>
<input type="radio" name="r0" value="ラジオ03">ラジオ03</input>
</form>
</body>
</html>
</html>

投稿日時 - 2008-10-21 00:42:04

お礼

こちらも無事動作しています。ありがとうございました。
初期値のみが消えるパターンも、場合よっては使用させて頂きたいと思っています。

投稿日時 - 2008-10-21 10:06:41

ANo.1

先日教えていただいたオブジェクト指向的な書き方でやってみました!
なので正しいかどうかは微妙。^^;
つっこみお願いします!
<html>
<body>
<INPUT type="text" name="あいうえお" value="例)Corneometer">
<INPUT type="radio" name="かきくけこ" value="ラジオ01" onClick="inptxt1.cls();check_reset(this,10)">ラジオ01
<INPUT type="radio" name="かきくけこ" value="ラジオ02" onClick="inptxt1.cls();check_reset(this,11)">ラジオ02</div>
<hr>
<INPUT type="text" name="aiueo" value="例)MyCar">
<INPUT type="radio" name="kaki" value="ラジオ01" onClick="inptxt2.cls();check_reset(this,10)">ラジオ01
<INPUT type="radio" name="kaki" value="ラジオ02" onClick="inptxt2.cls();check_reset(this,11)">ラジオ02</div>


<script>
var inptxt1 = new txtValue('あいうえお');
var inptxt2 = new txtValue('aiueo');

function txtValue( elmName ){
var elm = document.getElementsByName( elmName )[0];
this.elm = elm;
this.initval = this.elm.value;
elm.onfocus = (function(f_){return function(){f_.fcs.call(f_);}})(this);
elm.onblur = (function(f_){return function(){f_.blr.call(f_);}})(this);

this.fcs = function(){
if(this.elm.value==this.initval) this.elm.value = '';
}
this.blr = function(){
if(this.elm.value=='') this.elm.value = this.initval;
}
this.cls = function(){
this.initval = '';
this.elm.value ='';
}
}
function check_reset(x,y){;}
</script>
</body>

投稿日時 - 2008-10-20 21:29:07

お礼

どうもありがとうございます。
無事に動作しています。
テキストフォームに書き込んだものも、チェックすると消えるので使い勝手が良いですね
私も素人なので、正しいかどうかはわからないのですが・・・
いろいろな環境で試してみたいと思います。

投稿日時 - 2008-10-21 10:01:54

あなたにオススメの質問