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

解決済

質問者：freakale
質問日時：2008/10/20 17:44
回答数：5件

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

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

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

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

フォームのコメントを消す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

通報する

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

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： yambejp
回答日時：2008/10/21 16:32

ラジオボタンを押した後に記入する可能性があるなら、

記入するときにラジオボタンをクリアした方がよいのでは？

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

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

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

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

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

通報する

お礼日時：2008/10/21 16:52

No.4

回答者： noname#137826
回答日時：2008/10/21 13:39

変ですね・・・。

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

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

この回答への補足

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

初期コメントを消してから、新しくコメント記入
↓
ラジオボックスにチェック
↓
消える
↓
もう一度記入
↓
ラジオボックスにチェック
↓
消えない

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

補足日時：2008/10/21 14:01

通報する

- 0
- 件

通報する

No.3

回答者： noname#137826
回答日時：2008/10/21 10:18

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

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

お礼日時：2008/10/21 11:50

No.2

回答者： noname#137826
回答日時：2008/10/21 00:42

ラジオボタンにチェックを入れたらテキストボックスの初期値を消す部分のみですが、こんなのはどうでしょう？

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/10/21 10:06

No.1

回答者： _pipi_
回答日時：2008/10/20 21:29

先日教えていただいたオブジェクト指向的な書き方でやってみました！

なので正しいかどうかは微妙。^^;
つっこみお願いします！
<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>