JavaScript jquery erfasst nur erstes formular

[Maulwurf]

Hallo Allerseits!

Ich hatte heute nicht sonderlich Laune mich zu besaufen und habe stattdessen lieber ein Projekt weiterentwickelt. Jetzt bin ich aber auf ein hinderniss gestoßen.

Ich habe eine HTML Seite mit mehreren Formularen, die ich mit Jquery abfangen und per Ajax verwerten möchte. Dazu gehe ich wie folgt vor:

$(document).ready(function() { 

$('form#link_item_edit').submit(function() {

var link_name_de_before  = $('#link_name_de').attr('value');
var link_name_en_before  = $('#link_name_en').attr('value');
var id_before                    = $('#form_id');

var link_name_de = encodeURIComponent(link_name_de_before);
var link_name_en = encodeURIComponent(link_name_en_before);
var id              = encodeURIComponent(id_before);

$.ajax({
type: "POST",
url: "ajax/Link_edit_CHECK.php",
data: "link_de="+ link_name_de +"& link_en="+ link_name_en +"& target="+ link_target +"& link_id="+ id,

....... etc....

und es funktioniert...

ABER jetzt habe ich mehrere Formulare auf der Seite, die sich im Hidden Feld #form_id unterscheiden, mit dem ich sie auseinanderhalte und in der php-datei dann dementsprechend behandele. JQuery erkennt aber nur das erste Formular auf der Seite und behandelt dieses korrekt, alle weiteren funktionieren nicht.

Also muss ich doch irgendwie das hier: $('form#link_item_edit').submit(function() { verändern, oder aber meine Formulare durchnummerien und dies dann dem Javascript verständlich machen, dass er beispielsweise alle formulare "link_item_edit_XXX" behandeln soll.. aber wie??

Ich hoffe das ist verständlich. Also mein Script funktioniert, ABER nur mit dem ersten Formular.

Ansonsten wünsche ich einen frohen Männertag,

Maulwurf

 

[b4ck]

ganz einfach:

"form#link_item_id" heist du greifst auf das form mit der ID "link_item_id" zu.
ID ist ein unique name auf DOM objekten d.h entweder du gibts allen forms die gleiche CLASS und lässt jquery auf diese klassen ansprechen oder du gibts jeder form ne eigene ID und kopierst den code dementsprechend oft.. was nicht sinn der sache wäre^^

 

[metax.]

Hallo,
wie b4ck bereits sagte, müssen IDs in HTML-Dokumenten eindeutig sein.
Wenn du mehrere Formulare hast, deren Elemente du über fest definierte Element-IDs ansprechen musst, kannst du das lösen, indem du jedem Formular eine Nummer (oder ein anderes alphanumerisches Token) gibst, das du an alle IDs anhängst.
Jetzt musst du nur noch per jQuery irgendwie eine Liste aller vorhandene Token erhalten und diese in einer schleife durchgehen. Dies kannst du einfach hinkriegen, indem du in jedem Formular ein unsichtbares Element mit einer speziellen CSS-Klasse platzierst, welches das Formular-Token enthält.

Beispiel:

<form action="location1" ... id="form_12">
<span class="formtoken">12</span>
<input id="input_title_12" type="text" ... />
<input type="submit" id="submit_12" />
...
</form>

<form action="location2" ... id="form_a23">
<span class="formtoken">a23</span>
<input id="input_title_a23" type="text" ... />
<input type="submit" id="submit_a23" />
...
</form>

Und im Javascript machst du etwa folgendes:

function processFormData() {
  $('.formtoken').each(function(index, elem) {
    var token = elem.text();
    var myform = $('#form_' + token);
    // z.B.:
    var myinput = $('#input_title_' + token).text();
    myform.submit(function() { ... });
    // ... usw.
  });
}

 

[Maulwurf]

Vielen Dank für die Antworten.
Einfach class="linkformular" anzusprechen hat beim ersten Versuch leider nicht so geklappt. Ich werde jetzt die Lösung von metax versuchen - die erscheint mir sehr gelungen (und ich verstehe sie durch deine Dokumentation auch ).

Maulwurf