jQueryでformデータの値の受け取り方について

初歩的なことですみません。
jQueryでformからsubmitされた値の受け取り方について質問です。

php
1<?php foreach ($products as $product): ?>
2        <div class="content-columns">
3            <form id="form1" action="detail.php" method="post">
4                <input type="hidden" name="posted" value="idNum<?php echo $product['id'] ?>">
5                <input type="submit" value="送信">
6          </form>
7<?php endforeach ?>

上記の様なformからsubmitされた値をdetail.phpの方で読み込んだjsファイルの中で受け取りたいのですがうまくいきません。

detail.phpの方ではheader.phpを読み込み、

php
1require_once(dirname(__DIR__).'/view/shared/header.php');

header.phpからjsファイルを読み込んでいます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>example</title>
    <link rel="stylesheet" href="/css/stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/change-product.js"></script>
  </head>
  <body>

change-product.jsの中身は以下です。

js
1var val = $('#form1 [name=posted]').val();
2console.log(val);
3

ブラウザのChromeのデベロッパーツールを開いて確認すると、postデータが送られてはきてる様なのですが、
var valがundefinedとなってしまいます。

jsファイルの方は

js
1alert('テスト')

などで問題なく動くので読み込まれてないと言うことはない様です。
jQueryのCDNも他ファイルではちゃんと読み込めているので、問題ないとは思うのですが。

ちょっと原因の検討がつかずに困っています。

テストとしてconsole.log();で出力を確かめてみていますが、formからpostされたデータをセレクタとして受け取りたいです。

よろしくお願いします。

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

回答1件

ベストアンサー

$('#form1 [name=posted]') に該当する要素が複数になるため、val() を特定できないからです。

php
1<?php foreach ($products as $product): ?>
2        <div class="content-columns">
3            <form class="form_sample" action="detail.php" method="post">
4                <input type="hidden" name="posted" value="idNum<?php echo $product['id'] ?>">
5                <input type="button" value="送信">
6          </form>
7<?php endforeach ?>

js
1$("form.form_sample").on("submit", function(){
2    var v = $(this).find("[name=posted]").val();
3    Console.log(v);
4    return false;
5});

投稿2018/02/03 05:48

編集2018/02/03 09:25

退会済みユーザー

総合スコア0

ginuser

2018/02/03 06:29

ありがとうございました。確かに、回答の内容で納得することができました。ところで追加で質問させていただいてもよろしいでしょうか... この度の様にforeachで複数formを出力させた場合、各formに対し一意にidなどを付与し、それに対応した値をjsの方でセレクタとして受け取りたい場合はどうしたら良いでしょうか？すみません、よろしくお願いいたします。

退会済みユーザー

2018/02/03 09:18

> 各formに対し一意にidなどを付与し、それに対応した値をjsの方でセレクタとして受け取りたい場合はどうしたら良いでしょうか？そんなことをしたらダメ。メンテナンス性が著しく損なわれます。

ginuser

2018/02/03 09:22

返信ありがとうございます。分かりました。ちょっと別の方法を模索してみたいと思います。

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