前方一致で取得する
「onclick」でJSの関数を呼び出して引数にformを渡す場合、欲しい要素が１つならこの方法でも取れるみたい
<form onsubmit="return false">
<input type="text" name="AAA_a">
<input type="submit" onclick="func(this.form)">
</form>
<script>
function func(form){
console.log(form[name ^= 'AAA_']);
}
</script>
でも欲しい要素が複数の場合、これではできない。。。
そこでこうする
<form onsubmit="return false">
<input type="text" name="AAA_a">
<input type="text" name="AAA_b">
<input type="text" name="AAA_c">
<input type="submit" onclick="func(this.form)">
</form>
<script>
function func(form){
let elements = form.querySelectorAll('[name^="AAA_"]');
}
</script>
このように、引数に対して「querySelectorAll」を指定して前方一致にすることで配列で取得できるようになる
formの入力チェックを追加する際、name属性を前方一致で複数取得する必要性があったとする
- class及びidの追加はなしで行う
- このページにはformが複数存在し、入力チェックは送信するform事に行う
- 入力欄は動的に作成される（今回の例では３個と１個で固定）
- チェックする入力欄のname属性は必ず"AAA_"から始まる
- 半角数字のみ受け付けるようなチェック内容を追加する
<body>
<form onsubmit="return false">
<input type="text" name="AAA_a">
<input type="text" name="AAA_b">
<input type="text" name="AAA_c">
<input type="submit" onclick="func(this.form)">
</form>
<form onsubmit="return false">
<input type="text" name="AAA_d">
<input type="submit" onclick="func(this.form)">
</form>
<script>
function func(form){
let elements = form.querySelectorAll('[name^="AAA_"]');
elements.forEach((element)=>{
//ここで入力チェックを行う
let val = element.value.trim();// 入力数
if(val == '' || val == 0) {
err_tex = "数字を入力してください";
}else if(!val.match(/.*[^0-9０-９].*/)){
order_quantity = val.replace(/[０-９]/g,
function( match_num ) {
return String.fromCharCode( match_num.charCodeAt(0) - 0xFEE0 );
}
);
element.value = order_quantity
}else{
err_tex = "半角数字で入力してください";
}
});
if(err_tex){
alert(err_tex);
}else{
form.submit();
}
}
</script>
</body>
とこんな感じで。。。。
でも・・・さ
name属性を配列にしておけばいいのに、思ってしまう、、、まぁ仕方ないですね