- PR -

javascriptで　可変行のフォームチェック

1
投稿者投稿内容
ボブ
常連さん
会議室デビュー日: 2007/10/03
投稿数: 44
投稿日時: 2007-10-03 15:09
javascriptで　追加ボタンを押すと　テーブルの行が追加され、
かつ　追加されたtextboxの name属性がi行目ならば　R(i)_XXXXと
なるような仕組みを作りました。

ここで、submitをする前に、すべてのtextboxにおいて ”空でなく、数値である”というチェックを行いたいのですが、
追加ボタンを押して追加されたtextboxにおいて、チェックをかけることが出来ません。
何か良い方法があればご教示頂きたく。

<script type="text/javascript">
function addRowTable() {
var tbl = document.getElementById('addition');
var lastRow = tbl.rows.length;
var increment = lastRow;
var row = tbl.insertRow(lastRow);

var cell0 = row.insertCell(0);
var NewNode0 = document.createElement('input');
NewNode0.setAttribute('type', 'text');
NewNode0.setAttribute('name', 'R' + increment + '_MeisaiNO');

var cell1 = row.insertCell(1);
var NewNode1 = document.createElement('input');
NewNode1.setAttribute('type', 'text');
NewNode1.setAttribute('name', 'R' + increment + '_ProductName');

var cell2 = row.insertCell(2);
var NewNode2 = document.createElement('input');
NewNode2.setAttribute('type', 'text');
NewNode2.setAttribute('name', 'R' + increment + '_Amount');

var cell3 = row.insertCell(3);
var NewNode3 = document.createElement('input');
NewNode3.setAttribute('type', 'text');
NewNode3.setAttribute('name', 'R' + increment + '_Unit');

var cell4 = row.insertCell(4);
var NewNode4 = document.createElement('input');
NewNode4.setAttribute('type', 'text');
NewNode4.setAttribute('name', 'R' + increment + '_UnitPrice');

var cell5 = row.insertCell(5);
var NewNode5 = document.createElement('input');
NewNode5.setAttribute('type', 'text');
NewNode5.setAttribute('name', 'R' + increment + '_NoTaxAmount');

var cell6 = row.insertCell(6);
var NewNode6 = document.createElement('input');
NewNode6.setAttribute('type', 'text');
NewNode6.setAttribute('name', 'R' + increment + '_Delivery');

var cell7 = row.insertCell(7);
var NewNode7 = document.createElement('input');
NewNode7.setAttribute('type', 'text');
NewNode7.setAttribute('name', 'R' + increment + '_Note');

cell0.appendChild(NewNode0);
cell1.appendChild(NewNode1);
cell2.appendChild(NewNode2);
cell3.appendChild(NewNode3);
cell4.appendChild(NewNode4);
cell5.appendChild(NewNode5);
cell6.appendChild(NewNode6);
cell7.appendChild(NewNode7);
}

<!-- String型のセルはチェックしない。int型のところはint型かチェックを行う-->
function check() {
var isSuplierCode = false;
var isMeisaiNO = false;
var isAmount = false;
var isUnitPrice = false;
var isNoTaxAmount = false;
//var i = 2
//var id = 'R' + i +'_MeisaiNO'
var id = 'R2_MeisaiNO';

if(!isNaN(document.order.H_SuplierCode.value)&&!document.order.H_SuplierCode.value==""){
window.alert("OK_isSuplierCode");
isSuplierCode = true;
window.alert('isSuplierCode=' + isSuplierCode);
}
//if(!isNaN(document.order.R1_MeisaiNO.value)&&!document.order.R1_MeisaiNO.value==""){
//window.alert("OK_isMeisaiNO");
//isMeisaiNO = true;
//window.alert('isMeisaiNO=' + isMeisaiNO);
//}
if(!isNaN(document.all.item(id).value)&&!document.all.item(id).value==""){
window.alert("OK_isMeisaiNO");
isMeisaiNO = true;
window.alert('isMeisaiNO=' + isMeisaiNO);
}
if(!isNaN(document.order.R1_Amount.value)&&!document.order.R1_Amount.value==""){
window.alert("OK_isAmount");
isAmount = true;
window.alert('isAmount=' + isAmount);
}
if(!isNaN(document.order.R1_UnitPrice.value)&&!document.order.R1_UnitPrice.value==""){
window.alert("OK_isUnitPrice");
isUnitPrice = true;
window.alert('isUnitPrice=' + isUnitPrice);
}
if(!isNaN(document.order.R1_NoTaxAmount.value)&&!document.order.R1_NoTaxAmount.value==""){
window.alert("OK_isNoTaxAmount");
isNoTaxAmount = true;
window.alert('isNoTaxAmount=' + isNoTaxAmount);
}


if(isSuplierCode==true&&isMeisaiNO==true&&isAmount==true&&isUnitPrice==true&&isNoTaxAmount==true){
window.alert("return true");
return true
}else{
window.alert("return false");
return false
}

}
</script>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>注文申請フォーム</title>
</head>
<body>
<Div Align="center">
<H2>注文申請フォーム</H2>
<hr>
<FORM NAME="order" ACTION="<%=request.getContextPath() %>/jp/co/mdit/servlet/tetra/form" METHOD="POST" onSubmit="return check()">
日付：<input type="text" name="H_Date">仕入先コード：<input type="text" name="H_SuplierCode">担当者 ：<input type="text" name="H_Tantou"><br><br>
<table id="addition" border="2">
<tr>
<th>明細No</th><th>商品名</th><th>数量</th><th>単位</th><th>単価</th><th>税抜金額</th><th>納期</th><th>備考</th>
</tr>
<tr>
<td><input type="text" name="R1_MeisaiNO"></td>
<td><input type="text" name="R1_ProductName"></td>
<td><input type="text" name="R1_Amount"></td>
<td><input type="text" name="R1_Unit"></td>
<td><input type="text" name="R1_UnitPrice"></td>
<td><input type="text" name="R1_NoTaxAmount"></td>
<td><input type="text" name="R1_Delivery"></td>
<td><input type="text" name="R1_Note"></td>
</tr>
</table>
<p>
<Div Align="right">
<input type="button" value="追加" onclick="addRowTable()"></p>
<input TYPE="SUBMIT" VALUE="提出">
</Div>
</FORM>
</Div>
</body>
</html>
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2007-10-03 16:13
ソースは全く見ていませんが、なぜチェックできないんですか？
自分でページに追加したなら作ったエレメントを配列に保存しておくなり、
ID や NAME を元にエレメントを検索すればできそうですよね。
_________________
かるあ のメモ と スニペット
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2007-10-03 16:19
私なら、table.getElementsByTagName("input")で集めて処理しそうです。

ところで、IEは後でname属性付与ってできなかったような。

#Elementsが複数形になってなかった…。

[ メッセージ編集済み 編集者: mio 編集日時 2007-10-03 16:57 ]
ボブ
常連さん
会議室デビュー日: 2007/10/03
投稿数: 44
投稿日時: 2007-10-03 18:01
mioさんの言うとおり、IEでは名前属性付与が出来てなかったようです。
FireFoxで試したところ　チェックをかけることができました。

しかし、ブラウザに依存しないようなロジックを考え直さないといけませんね。
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2007-10-03 19:43
私は、createElement("div")してdiv.innerHTMLに<input name="hoge"/>を書き、div.firstChildを使っています。
type属性はデフォルトでtextなので、省略しても良いのでは。
1

スキルアップ／キャリアアップ（JOB@IT）