後から追加した行（入力フォーム)にも，入力チェックをかける

解決済

質問者：kakiku11
質問日時：2009/01/10 00:33
回答数：2件

いつもお世話になっております．
セレクトで選択した項目によって，テキストボックスに入力できる文字数と型に制限をかけたいと思っています，初期状態（テーブルの行数が1行)では成功するのですが，"行追加"のボタンで増やした行に対してはどのように処理を書き加えれば良いのか分かりません．調べても該当するようなケースが見つかりませんでした．
お手数おかけしますが，アドバイスよろしくお願い致します．

<html:html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"/>
<script type="text/javascript">

function addRow(trigger){//行を追加する関数
var table = trigger.ownerDocument.getElementById('SearchConditions');
// 一行目をコピーする
var row = table.rows[0].cloneNode(true);
// 行に名前をつける
row.id = 'ROW.' + table.rows.length;
// 最初のインプット要素
input = row.getElementsByTagName('INPUT')[0];
input.value = "";
table.tBodies[0].appendChild(row);
}

function cText(obj){

if(obj.value == obj.defaultValue){
obj.value="";
obj.style.color="#000";
}
}
function sText(obj){

if(obj.value == ""){
obj.value = obj.defaultValue;
obj.style.color = "#999";
}
}
function lengthChange() { //項目に応じて入力制限
var element = document.getElementById("column");
var index = element.selectedIndex;
var wordObj = document.getElementById("word")
if(index == 1)wordObj.setAttribute("maxlength", "3", false);
if(index == 2)wordObj.setAttribute("maxlength", "20", false);
if(index == 3)wordObj.setAttribute("maxlength", "5", false);

}
function inputCheck(){//バイト数チェックと型チェック
var index =document.getElementById("column").selectedIndex;
var wordobj = document.getElementById("word");
if(index == 1){
lngM = 3;
if(wordobj.value.length>lngM){
alert("制限文字数【" + lngM + "文字】を超えています");
}
var str=wordobj.value; /* 入力値 */
if (str.match(/[^0-9]/g)){
alert (str.match(/[^0-9]/g)+"\n\n数値以外が含まれています");

}
//index =2,3は省略
}

</script>
</head>

<body>
<form name="form" action="/A101">
<center>
<div>
<table id="SearchConditions" class="borderGrey" width="500px" border="0" cellspacing="1"

cellpadding="3">
<tbody>
<tr id="ROW.0">
<td bgcolor="#5096C9" width="105px">
<select name="column" id="column" property="column01" onchange="lengthChange()" >
<option value="columnName">--選択--</option>
<option value="groupNo">番号</option>
<option value="katamei">名前</option>
<option value="vrs">サイズ</option>
</select>
</td>
<td bgcolor="#5096C9" width="90px">
<select property="operator01">
<option value="opeName">--演算子--</option>
<option value="=">=</option>
<option value="<>"><></option>
</select>
</td>
<td class="cellWhite">
<input type="text" id=word value="単語入力" style="color:#999" property="input01"

onfocus="cText(this)"
onblur="sText(this)" style="color:#999" size="30" maxlength="20">
</td>
<td bgcolor="#5096C9" width="90px">
<select property="join01">
<option value="joinName">--結合条件--</option>
<option value="and">AND</option>
<option value="or">OR</option>
</select>
</td>
</tr>
</tbody>
</table>
<br>
</center>

<center>
<table width="300px" border="0">
<tr>
<td><br><input type="button" value="条件追加" onclick="addRow(this)"></td>
<td><br><input type="button" value="検索" onclick="inputCheck()">
</tr>

</table></center></form></body></html>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： yuu_x
回答日時：2009/01/11 00:00

form なら、id ではなく、name で区別できますよ。

input = row.getElementsByTagName('INPUT')[0];
input.value = "";
input.name = 'word.' + table.rows.length;
// 他 select などの、フォームアイテムの name も変更。
// この辺はうまく変更してください。

<select name="column.0" onchange="lengthChange(this);" >

function lengthChange(trigger){
var index = trigger.name.split('.')[1];
var input = trigger.form.elements.namedItem('word.'+index);
input.maxlength = xx;
}

この回答への補足

アドバイス，大変ありがとうございました．
仰るとおりに，(1)名前の設定(2)lengthCange関数の変更をしてみたのですが，「オブジェクトを指定してください」のメッセージが消えません．全ての”this”の箇所で発生しているようです．

以下，修正した箇所を載せます．教えて頂いたソースを，自分なりに解釈してコメントしたのですが，間違っておりましたらご指摘下さい．
お手数おかけしますが，よろしくお願い致します．
■最初のセレクトcolumnのプルダウンで選択した項目によって，テキストボックスの入力文字数を制限する．
■”検索”ボタン押下時に，入力文字数の再チェックと型チェックを行なう．誤り部分をアラートで表示する．

function addRow(trigger){//行を追加する関数
var table = trigger.ownerDocument.getElementById('SearchConditions');
// 一行目をコピーする
var row = table.rows[0].cloneNode(true);
// 行に名前をつける
row.id = 'ROW.' + table.rows.length;
// 最初のインプット要素
input = row.getElementsByTagName('INPUT')[0];
input.value = "";
input.name = 'word.' + table.rows.length;
// 3つのセレクト要素
select = row.getElementsByTagName('SELECT')[0];
select.name = 'column.' + table.rows.length;
select = row.getElementsByTagName('SELECT')[1];
select.name = 'operator.' + table.rows.length;
select = row.getElementsByTagName('SELECT')[2];
select.name = 'join.' + table.rows.length;

table.tBodies[0].appendChild(row);
}
function lengthChange(trigger){ //triggerには，一行目ならば”column.0”のオブジェクトがはいっているのですか？
var index = trigger.name.split('.')[1];//splitを用いて，"column"と"0"にわけ，index←0
var input = trigger.form.elements.namedItem('word.'+index);　input←word.0の要素

var num = trigger.selectedIndex; //プルダウンの何番目を選択したか
if(num == 1)input.maxlength = 3;
if(num == 2)input.maxlength = 20;
if(num == 3)input.maxlength = 5;
}
～～
<tr id="ROW.0">
<select name="column.0" onchange="lengthChange(this)" >
<option value="columnName">--選択--</option>
～～
<select name="operator.0" property="operator01">
～～
<input type="text" name=word.0 value="単語入力" style="color:#999" property="input01" onfocus="cText(this)"
onblur="sText(this)" style="color:#999" size="30" maxlength="20">
</td>
～～
<select name="join.0" property="join01">
～～

補足日時：2009/01/11 23:03

通報する

- 0
- 件

通報する

No.2

回答者： yuu_x
回答日時：2009/01/12 02:15

取得できない原因は、

<input type="text" name=word.0 value="単語入力" style="color:#999" property="input01" onfocus="cText(this)"
onblur="sText(this)" style="color:#999" size="30" maxlength="20">

ここと、table タグの部分に改行が入っていることが原因です。

cf.
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
http://www.doraneko.org/webauth/xhtml10/20000126 …

言ったほうが良いと思われることがたくさんあるんですが、載せきれないので、
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
ここで、HTML のチェックをしてください。

JS は、、、ひとまず、
input.maxLength = "3";
DOM プロパティは属性名と同名でない場合がほとんどで、値は文字列(DOMString)型です。

それから、JavaScript 無効時（一行だけでなく三行位は表示しておく）、CGI にどのようにデータを渡すか（input.maxlength = 3; CGI でもチェックをするのだから、値を埋め込まず、HTML に value 値として持たせる & 一意な name が必要なはず）。

JS で部品を追加した場合、hidden 要素などで、部品数も一緒に CGI に送ってやると良いと思います。