HTMLで記述されたフォームオブジェクト(テキストBOXやコンボBOXなど)を
削除したい(画面上から消したい)のですが方法がわかりません。
知っている方いましたらご教授願います。

A 回答 (1件)

どういう目的で、どういうタイミングで「削除したい」のか教えていただけますか。



必要ないなら最初から書かなければいい、という話しになりかねないので。

この回答への補足

分かりにくい説明で申し訳ございません。
まず始めにページが表示された時はフォームオブジェクト
が存在しています。
しかし場合によってはオブジェクトが足りない場合が
ありますので、ユーザーがボタンを押下する事で
フォームオブジェクトを追加できます。
その追加したオブジェクトもしくは最初から存在するオブジェクト
を削除する時に利用します。
入力したデータをXML形式で保存している為
削除しないでそのままの状態にしていると保存がうまく処理されない
のでどうしても必要な機能です。

補足日時:2000/12/15 16:26
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qthickbox.js使用時のフォームの取得方法をご教授願います。

thickbox.jsを使用しているページで
セレクトの値をPHPに渡したいと考えているのですが、
値の取得の仕方がわからず困っております。

ソースは以下のようなカンジです。
[値を取得]を押下した時セレクトボックスの値を取得しようとしています。Firebugでは以下のようにエラーがでます。
document.FrmThick.PrefectureCD has no properties

どなたかアドバイス頂けますでしょうか?
-----------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Sample</title>
<link rel="stylesheet" href="thickbox.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
</head>
<body>

<a href="#TB_inline?height=300&width=600&inlineId=condition" class="thickbox" title="条件を設定してください">ThickBoxについて</a>

<style>
#condition {
visibility:hidden;
}
</style>

<script>
function test (){
alert(document.FrmThick.PrefectureCD.value);
}
</script>

<div id="condition">
<form action="" method="get" name="FrmThick" id="FrmThick">
<!--都道府県-->
<select id="PrefectureCD" name="PrefectureCD">
<option value="1">北海道</option>
<option value="2">青森県</option>
</select>
<a href="javascript:test();">値を取得</a>
<!--/都道府県-->
</form>
</div>

</body>
</html>

thickbox.jsを使用しているページで
セレクトの値をPHPに渡したいと考えているのですが、
値の取得の仕方がわからず困っております。

ソースは以下のようなカンジです。
[値を取得]を押下した時セレクトボックスの値を取得しようとしています。Firebugでは以下のようにエラーがでます。
document.FrmThick.PrefectureCD has no properties

どなたかアドバイス頂けますでしょうか?
-----------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="...続きを読む

Aベストアンサー

わかりました。
thickbox.js が 指定ID condition 内のものをコピーしてドキュメントに足してるので、
同じIDが2つ存在してしまうので、1つ目の方の値をとってるから・・と言う事のようです。
ID指定が無効って事かと。


jquery.js や thickbox.js の中にこの手の場合の対処法があるのかもしれませんが
それはこのライブラリを使ってる方のレス待ちと言う事で。


で 単純には、

このページにあるフォームがこれ1個だとすると、元のフォームは document.forms[0]。
thickboxによってレイヤーが開いてから表示されるフォームは、document.forms[1] となります。

セレクトは
document.forms[1]の中の最初のエレメントなので
document.forms[1].elements[0] となり、この値をとれば選択した値が取れます。

function test (){
alert(document.forms[1].elements[0].value)
}

IDを書き換えるなどの処理をつけるなど工夫もできますが、
自分のページですからフォームの数、エレメントの順位はわかると思うのでこれでも良いかと。


ライブラリは使わないので、こんなレスで失礼します(^^;

わかりました。
thickbox.js が 指定ID condition 内のものをコピーしてドキュメントに足してるので、
同じIDが2つ存在してしまうので、1つ目の方の値をとってるから・・と言う事のようです。
ID指定が無効って事かと。


jquery.js や thickbox.js の中にこの手の場合の対処法があるのかもしれませんが
それはこのライブラリを使ってる方のレス待ちと言う事で。


で 単純には、

このページにあるフォームがこれ1個だとすると、元のフォームは document.forms[0]。
thickboxによってレイヤーが開い...続きを読む

Qメールフォームについてご教授願います。

閲覧ありがとうございます。

タイトル通りでございまして、メールフォームについて以下の事をご教授願います。


■プルダウンの選択によってテキストボックスを表示・非表示に切り替える。

例1)
・プルダウン1を選択した場合、必須項目であるテキストボックスの出現
・プルダウン2を選択した場合、変化なし
・プルダウン3を選択した場合、同上

もしくは
例2)
・プルダウン1を選択した場合、テキストボックス1が必須項目になる
・プルダウン2を選択した場合、テキストボックス1が必須項目ではなくなる
・プルダウン3を選択した場合、同上

上記の様な状態にするには、どのようなJavaScript、HTMLを入力すればいいでしょうか?

プルダウンの条件分岐など、他のプルダウンの中身や表示されているテキストの切り替えは見つける事が出来たのですが、表示・非表示については見つけることが出来ませんでした。

画像を添付していますが、タイトルが例のプルダウン、Twitter IDが例のテキストボックスにあたります。
メールフォームプロのCGIを使用しています。

どなたか、ご存知の方いらっしゃいましたらご教授下さい!

閲覧ありがとうございます。

タイトル通りでございまして、メールフォームについて以下の事をご教授願います。


■プルダウンの選択によってテキストボックスを表示・非表示に切り替える。

例1)
・プルダウン1を選択した場合、必須項目であるテキストボックスの出現
・プルダウン2を選択した場合、変化なし
・プルダウン3を選択した場合、同上

もしくは
例2)
・プルダウン1を選択した場合、テキストボックス1が必須項目になる
・プルダウン2を選択した場合、テキストボックス1が必須項目ではなくなる
・...続きを読む

Aベストアンサー

これであってる?

jqueryで出たり消えたり
<script>
$(function(){
$("#select1").change(function(){
$("#mail1").toggle();
});
})
</script>
<select id="select1">
<option value="1">出現</option>
<option value="2">隠蔽</option>
</select>
<div id="mail1">
メールアドレス*<br>
<input type="text" id="userML1" value="" />
</div>


javascriptだけで出たり消えたり
<script>
function toggle(id,value) {
if (value==1) {
document.getElementById("mail2").style.display="block";
} else {
document.getElementById("mail2").style.display="none";
}
}
</script>
<select id="select2" onchange="toggle('mail2',this.value)">
<option value="1">必須</option>
<option value="2">非必須</option>
</select>
<div id="mail2">
メールアドレス*<br>
<input type="text" id="userML2" value="" />
</div>

これであってる?

jqueryで出たり消えたり
<script>
$(function(){
$("#select1").change(function(){
$("#mail1").toggle();
});
})
</script>
<select id="select1">
<option value="1">出現</option>
<option value="2">隠蔽</option>
</select>
<div id="mail1">
メールアドレス*<br>
<input type="text" id="userML1" value="" />
</div>


javascriptだけで出たり消えたり
<script>
function toggle(id,value) {
if (value==1) {
document.getElementById("mail2").style.display="block";
}...続きを読む

Qフレーム内 ( 子HTML ) からフレーム外 ( 親HTML ) のコンボボックスをJavaScriptで操作する方法は?

下記のようなHTML(抜粋)のフレーム内(子)から、フレームの外側(親)のコンボボックスの値を変更(現在は「起」が選択されていますが、例えば、これを「承」に変更)したいのですが、JavaScriptをどのように記述すればよいでしょうか?

Top.Hoge ( または、Parent.Hoge ) の後の書き方がわかりません。
(手持ちの書籍は一通り調べてみたのですが、探し方が悪いのか・・・?)

ご存知の方、コメントを頂けると助かります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="JavaScript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>

........(略)........

<form name="form2">

// ↓以下、コンボボックス ( ドロップダウンリストボックス? )
<select name="Hoge" onchange="FunctionName(Args.......(略).........)">
<option value="0" selected>起
<option value="1 " >

<option value="2 " >

<option value="3 ">

</select>

</form>

<tr><td colspan="3" align="center">
<iframe width="1200" height="800 "src="/........(Path)......../Hoge.html"></iframe>
</td></tr>

下記のようなHTML(抜粋)のフレーム内(子)から、フレームの外側(親)のコンボボックスの値を変更(現在は「起」が選択されていますが、例えば、これを「承」に変更)したいのですが、JavaScriptをどのように記述すればよいでしょうか?

Top.Hoge ( または、Parent.Hoge ) の後の書き方がわかりません。
(手持ちの書籍は一通り調べてみたのですが、探し方が悪いのか・・・?)

ご存知の方、コメントを頂けると助かります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="j...続きを読む

Aベストアンサー

ちょっとしたサンプルを作りました。如何でしょうか。

Test.html
'************************************************
<form name="form2">
<select name="Hoge">
<option value="0" selected>起
<option value="1">承
<option value="2">転
<option value="3">結
</select>
</form>
<iframe src="Hoge.htm"></iframe>
'************************************************

Hoge.html
'************************************************
<script language="javascript">
<!--
function setCombo(obj)
{
parent.form2.Hoge.value = obj.value;
}
//-->
</script>
<input type="radio" name="ttt" value="0" onclick="setCombo(this)">起
<input type="radio" name="ttt" value="1" onclick="setCombo(this)">承
<input type="radio" name="ttt" value="2" onclick="setCombo(this)">転
<input type="radio" name="ttt" value="3" onclick="setCombo(this)">結
'************************************************

ちょっとしたサンプルを作りました。如何でしょうか。

Test.html
'************************************************
<form name="form2">
<select name="Hoge">
<option value="0" selected>起
<option value="1">承
<option value="2">転
<option value="3">結
</select>
</form>
<iframe src="Hoge.htm"></iframe>
'************************************************

Hoge.html
'************************************************
<script language="javascript">
<!--
function setCo...続きを読む

QHTMLのコンボボックスとの関連

HTMLの同ページ内にコンボボックスAとコンボボックスBがあるとして、

<!-- JavaScript部------ -->
<script language="javascript">
<!--//
function cmdCtr()
{
if (document.forms[0].A.value=='a2'){
document.forms[0].B.disabled=true;
document.forms[0].B.selectedIndex=0;
document.forms[0].B.value="b1";

}else{
document.forms[0].B.disabled=false;
}
}
//-->
</script>

<!-- HTML部----------- -->
<FORM>
<SELECT name="A" onChange="cmdCtr();">
<OPTION value="a1">a1</OPTION>
<OPTION value="a2">a2</OPTION>
<OPTION value="a3">a3</OPTION>
</SELECT>
<SELECT name="B">
<OPTION value="b1">b1</OPTION>
<OPTION value="b2">b2</OPTION>
<OPTION value="b3">b3</OPTION>
</SELECT>
</FORM>

以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとBボックスが選択出来なくなり、Bボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか?
ちなみに、AボックスBボックス両方がきちんと選択されている場合はエラーは起きません。

HTMLの同ページ内にコンボボックスAとコンボボックスBがあるとして、

<!-- JavaScript部------ -->
<script language="javascript">
<!--//
function cmdCtr()
{
if (document.forms[0].A.value=='a2'){
document.forms[0].B.disabled=true;
document.forms[0].B.selectedIndex=0;
document.forms[0].B.value="b1";

}else{
document.forms[0].B.disabled=false;
}
}
//-->
</script>

<!-- HTML部----------- -->
<FORM>
<SELECT name="A" onChange="cmdCtr();">
<OPTION value="a1...続きを読む

Aベストアンサー

単純にこんな感じではどうでしょう?
<Form>のonSubmit時に、submitData()関数を実行させるだけです。
参考になりますか?

function submitData(){
document.forms[0].B.disabled=false;
}

<FORM action="○○○.html" onSubmit="submitData()">

Qコンボボックスに連動するテキストボックスの表示数変更

入力フォームを作成しており、コンボボックスの数に応じて、
テキストボックスの表示数を変更させたいと考えています。

コンボボックスでの選択が「2」になれば、その下に表示される
テキストボックスの数も2つ表示させたいと思います。


<html>
<head>
</head>
<body>
<form>
項目数:
<SELECT>
<OPTION selected>1</OPTION>
<OPTION>2</OPTION>
<OPTION>3</OPTION>
<OPTION>4</OPTION>
<OPTION>5</OPTION>
</SELECT>
<br>
<br>
項目1:<input type="text" name="test1" size="20">
</form>
</body>
</html>


処理方法をサイトなどで調べましたが、該当するものが見あたりませんでしたので、ご教授お願いいたします。

Aベストアンサー

この手のヤツは、最初から最大数分の要素をつくっておき、
当初は使えなくしておくというのが、よろしいのでは?
もちろんムダも多いですが、消したりつけたりするときには
確実に処理ができます。

<html>
<head>
<script>
function changeFunc(obj,dClass,iClass){
var f=obj.form;
var v=Number(obj.value);
var cnt=1;
for(var i=0;i<f.length;i++){
if(f[i].className==iClass){
if(v>=cnt++) f[i].disabled=false;
else f[i].disabled=true;
}
}
var cnt=1;
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className==dClass){
if(v>=cnt++) divs[i].style.display="block";
else divs[i].style.display="none";
}
}
}
</script>
</head>
<body>
<form>
項目数:
<SELECT onChange="changeFunc(this,'viewClass','inputClass')">
<OPTION value="1" selected>1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="5">5</OPTION>
</SELECT>
<br>
<br>
<div class="viewClass">項目1:<input type="text" name="test1" class="inputClass" size="20"></div>
<div class="viewClass">項目2:<input type="text" name="test2" class="inputClass" size="20" disabled></div>
<div class="viewClass">項目3:<input type="text" name="test3" class="inputClass" size="20" disabled></div>
<div class="viewClass">項目4:<input type="text" name="test4" class="inputClass" size="20" disabled></div>
<div class="viewClass">項目5:<input type="text" name="test5" class="inputClass" size="20" disabled></div>
</form>
</body>
</html>

単純にするなら、divのstyleのdisplayだけつけたり消したりでも
いいでしょう。
サブミットするときムダなデータが飛ばなくするにはdisabledを
つける必要があります。

この手のヤツは、最初から最大数分の要素をつくっておき、
当初は使えなくしておくというのが、よろしいのでは?
もちろんムダも多いですが、消したりつけたりするときには
確実に処理ができます。

<html>
<head>
<script>
function changeFunc(obj,dClass,iClass){
var f=obj.form;
var v=Number(obj.value);
var cnt=1;
for(var i=0;i<f.length;i++){
if(f[i].className==iClass){
if(v>=cnt++) f[i].disabled=false;
else f[i].disabled=true;
}
}
var cnt=1;
var div...続きを読む


人気Q&Aランキング

おすすめ情報