phpのview内でforeachで出力したvalueをjQueryで取得したい

select_item_list配列に、アイテム名、単価、個数が格納されています。
追加ボタンで項目を増やせるようにしているのでjQueryでそれぞれの小計の計算したいです。

一旦、それぞれの単価と個数を取得して計算→投げるといった感じにしたかったのですが、valueの取得すらできなかったので教えていただきたいです。

php
1<?php foreach ($this->data['select_item_list'] as $key => $value) : ?>
2<div class="row form-group" id="select_div">
3    <div class="col">
4        <input type="text" class="form-control" id="item_name" name="item_name[]" list="item_name_list" value="<?php echo $value['name']; ?>" required>
5    <div class="col">
6        <input type="text" class="form-control" id="price" name="price[]" placeholder="単価" value="<?php echo $value['price']; ?>" required>
7    </div>
8    <div class="col">
9        <input type="text" class="form-control" id="quantity" name="quantity[]" placeholder="個数" value="<?php echo $value['quantity']; ?>" required>
10    </div>
11    <div class="col">
12    ここに小計を出したい
13    </div>
14</div>
15<?php endforeach; ?>
16
17<span id='plus_item_area'></span>
18<button type="button" id="item_list_plus" class="btn">追加</button>

追加ボタン

jquery
1$('#item_list_plus').on('click', function() {
2            tag = '長いので略';
3            $('#plus_item_area').append(tag);
4});

とりあえずpriceだけでもvalueをしたかったがundefinedとなってしまいました。

jquery
1$(document).ready( function(){
2        var price = [];
3        price = $('#select_div').children().children('input[name="price"]').val();
4        console.log(price);
5});

yambejp

2021/06/02 06:52

$this->dataの例示がないので再現できません

liledevi

2021/06/02 07:03

学習始めたてで質問の仕方が悪くすみません。例示とはどういうことでしょうか？配列の中身でしたらこんなかんじになります。よろしくお願いします。 array (size=6) 0 => array (size=8) 'estimate_item_id' => string '236' (length=3) 'item_name' => string '商品１' (length=21) 'price' => string '5000' (length=5) 'quantity' => string '1' (length=1) 1 => array (size=8) 'item_id' => string '237' (length=3) 'item_name' => string '商品２' (length=21) 'price' => string '3000' (length=4) 'quantity' => string '1' (length=1)

yambejp

2021/06/02 07:08

ご提示のサンプルだと dataはselect_item_listをキーとする要素をもっていないので無理です

liledevi

2021/06/02 07:33

わかりました！

FKM

2021/06/02 08:12

document.readyってどっちに記述しています？headタグ内だとDOMが生成されていないので、値は何も入ってこないはずです。

liledevi

2021/06/02 08:30

headタグ内には書いていません！試しに配列ではないvalueをconsole.log()してみたら表示できたので、場所は間違ってないかと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

id名select-div直下にある子孫要素は

<div class="col">
        <input type="text" class="form-control" id="item_name" name="item_name[]" list="item_name_list" value="<?php echo $value['name']; ?>" required>

で、childrenメソッドは直下にある子要素を取得してしまいます(つまり、上の子孫要素を探そうとして、nameプロパティが違うのでundefinedとなっている)ので、この場合は子孫要素を自在に探索できるfindメソッドで探しましょう。childrenメソッドが有効なケースはリストやプルダウンといった並列した要素が並んでいる場合なので、このような階層化したフォームの場合はあまり向いていません。

js
1$(document).ready( function(){
2        var price = [];
3        price = $('#select_div').find("input[name=price]").val();
4        console.log(price);
5});