ajax - 同じ入力ファイル ID を持つ同じページに複数のフォームがある場合、最初の ID だけが取得されるのはなぜですか?

Question

次のような同じファイルに複数のフォームがあります

<form name="myForm">
<input type="hidden" value="1" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="2" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="3" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>
<form name="myForm">
<input type="hidden" value="4" id="lastphp">
<a onclick="ajaxFunction()" class="folloo">
</form>

しかし、リンクをクリックすると、常に最初の ID が 1 になります??

Answer 1

IDはその要素のキーであるため、ページに固有である必要があります。

id="lastphp"をclass="lastphp"に変更して、フォームを関数に渡してみませんか？

<form name="myForm">
    <input type="hidden" value="1" class="lastphp">
    <a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
    <input type="hidden" value="2" class="lastphp">
    <a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
    <input type="hidden" value="3" class="lastphp">
    <a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>
<form name="myForm">
    <input type="hidden" value="4" class="lastphp">
    <a onclick="ajaxFunction(this.parentNode)" class="folloo">Test</a>
</form>

そして、このようにそれをハドル

function ajaxFunction(form) {
    var lastphp = form.getElementsByClassName("lastphp")[0].value;
    alert(lastphp);
}

これは、jQueryのようなフレームワークを使用すると非常に簡単になります。