phpによるデータベースの更新（javascript)

データベースから値を取得して、下記のようなリストで表示するようなページを作成しています。
その中の1つをクリックしたら、その値をフォームに反映させ、
データベースの更新を行うような仕組みを実装したいと思っています。
javascriptのクリックイベントでやるイメージなのですが、
同じクラスでidをそれぞれ付けられないため、どのように値を取ってくればいいのかがわかりません。
何かいい方法があれば教えていただけないでしょうか。
よろしくお願いいたします。

html
1<div class="a">
2    <a href="#">
3        <p class="A">...</p>
4        <p class="B">...</p>
5    </a>
6</div>
7<div class="a">
8    <a href="#">
9        <p class="A">...</p>
10        <p class="B">...</p>
11    </a>
12</div>
13<div class="a">
14    <a href="#">
15        <p class="A">...</p>
16        <p class="B">...</p>
17    </a>
18</div>
19<div class="a">
20    <a href="#">
21        <p class="A">...</p>
22        <p class="B">...</p>
23    </a>
24</div>

5/8 14:50追記

色々と調べてみましたが、下記のようなやり方でできないかと考えています。
しかしうまくいかないみたいで、おかしな所があれば教えていただけないでしょうか。
よろしくお願いいたします。

html
1<div class="a" onclick = "getID(this);" id="固有の値">
2    <a href="#">
3        <p class="A">...</p>
4        <p class="B">...</p>
5    </a>
6</div>
7<div class="a" onclick = "getID(this);" id="固有の値">
8    <a href="#">
9        <p class="A">...</p>
10        <p class="B">...</p>
11    </a>
12</div>
13<div class="a" onclick = "getID(this);" id="固有の値">
14    <a href="#">
15        <p class="A">...</p>
16        <p class="B">...</p>
17    </a>
18</div>

javascript
1function getID(element) {
2var ele_id = element.id;
3var class_A = document.getElementById('#'+ele_id).find('.A').innerHTML;
4}

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

回答4件

ベストアンサー

table 関連要素 API

HTMLの構造を変える事は可能でしょうか。
DBは基本的に2次元データなので HTMLTableRowElement#rowIndex 等のtable関連要素のAPIを使えると捗ります。
http://www2u.biglobe.ne.jp/~oz-07ams/2003/HTML/HTMLTableRowElement.html

上位要素ノードで click を監視する

シンプルに捉えると document.querySelectorAll('.a') を for 文で繰り返し処理して element.addEventListener('click' handleClick, false) する方法を考えつきます。
これを発展させると <div class="a"> の親に div 要素を置き、一つのclickイベントハンドラで監視する方法になります。
前述の table 構造にするなら、table要素 or tbody要素で監視する事になるでしょう。
「clickされた要素」は event.target で参照できるので className や classList で特定しましょう。

DB への問い合わせ

SQL を使うとして SELECT を使うことになると思われますが、ユニークなIDを割り当ててあると検索がとても楽です。

Re: callmichael さん

投稿2016/05/08 03:51

think49

総合スコア18164

callmichael

2016/05/08 05:52

構造自体はこのままで進めたいと思っています。情報を追記したので、ご教授いただけないでしょうか。よろしくお願いいたします。

think49

2016/05/08 08:47

getElementByIdに#は不要というのとfindは標準で存在しないですね。 https://jsfiddle.net/c6mvkreb/

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

各クラスを別の form タグで囲んで識別する
みたいなことはできそうですが
まあ、普通はやらないと思う :-P

投稿2016/05/07 21:49

takasima20

総合スコア7458

<script>
function update(val) {
	f.key.value = val;
	f.submit();
}
</script>
<form name="f" method="get" action="[更新用php]">
	<input type="hidden" name="key" value=""/>
</form>
<div class="a">
    <a href="javascript:void(0);" onclick="update(1);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="javascript:void(0);" onclick="update(2);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="javascript:void(0);" onclick="update(3);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="javascript:void(0);" onclick="update(4);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>

みたいな感じでやると、クリックした時に、[更新用php]にリクエストパラメータkeyにupdateの引数を乗せたURLへアクセスします。（説明しやすくするためにmethod="get"にしてますが、更新の場合は通常method="post"）

どんな感じで更新したいのかわからないので、具体的な更新方法の説明はできないですが、
クリック位置と更新内容の対応が取れることを理解してもらえれば幸いです。

投稿2016/05/07 18:56