Archief - Meerdere forms opvangen met jquery

Ik heb een site waarop ik afhankelijk van het aantal records meerdere formulieren genereer

deze formulieren krijgen allemaal hetzelfde id


mijn stukje jquery ziet er zo uit
$(document).ready(function(){

$("#naamvanhetform").submit(function(e) {
return false;
alert("test");

});
});

echter krijg ik geen alert terug. Hij vangt de submit niet op om een of andere reden.
Ik zoek me echt blauw maar vind het niet.

Dezelfde code werkt wel bij een vast formulier bovenaan de pagina (dus niet in een lus gegenereerd maar een fixed form)

Is het omdat meerdere forms dezelfde id hebben dat hij het niet oppikt?
Ik zou verwachten dat hij ze dan juist elke keer oppikt, onafhankelijk van welk form je submit?

Bij "return" stopt de functie... En meerdere gelijke id's op 1 pagina? Waar heb jij HTML geleerd???

De Wouter zei:

Bij "return" stopt de functie... En meerdere gelijke id's op 1 pagina? Waar heb jij HTML geleerd???

Klik om te vergroten...

ik ben er zeker van dat hij telkens maar 1 formulier genereerd, telkens met die ene naam... niet 5 forms met dezelfde naam.

On the other hand,
gebruik event.preventDefault() | jQuery API Documentation
ipv die return false

ja die event.preventDefault heb ik ook al geprobeerd maar 't probleem is dat bij een submit van het form ik niet eens in die code kom.

die return false is al gewoon om geen submit te laten gebeuren, maar toch submit hij gewoon

ik wil gewoon als ik op de submit knop klik, dat die die code uitvoert, maar om een of andere reden voert hij die niet uit.

Stimpy zei:

Is het omdat meerdere forms dezelfde id hebben dat hij het niet oppikt?
Ik zou verwachten dat hij ze dan juist elke keer oppikt, onafhankelijk van welk form je submit?

Klik om te vergroten...

Hier uit leid ik toch af dat hij meerdere forms met hetzelfde id heeft op 1 pagina. In dat geval ga je met de jQuery selector enkel het eerste form in je HTML selecteren.

Een klein voorbeeld: Edit fiddle - JSFiddle

Maar de bedoeling van een ID is dat het UNIEK is en slechts 1 keer voorkomt op een pagina.

Hier ben je hopelijk iets mee: Edit fiddle - JSFiddle

Er zijn uiteraard meerdere manieren om dit te doen. Maar het werkt en is vrij proper.

Klopt wouter

oorspronkelijk zat er geen id in dat form maar nu wou ik het een beetje jqry achtiger maken en er dan een repititief id op geplakt. Wist niet zeker of dit mocht of niet.

Stimpy zei:

Klopt wouter

oorspronkelijk zat er geen id in dat form maar nu wou ik het een beetje jqry achtiger maken en er dan een repititief id op geplakt. Wist niet zeker of dit mocht of niet.

Klik om te vergroten...

Nee ID moet uniek zijn, gebruik classes als het meermaals kan voorkomen.

Bvb.

Form1 met id login en input met class username en input met class password
Form2 met id register en input met class username en input met class password

Maakt het duidelijk en overzichtelijk en kan je elementen makkelijker selecteren met jQuery. $("#register .username")

ik snap niet waarom ik die submit maar niet kan opvangen

dmv een tellerke geef ik elk formulier een uniek id (gewoon 1,2,3 ..)
het is een replysysteem a la facebook, je ziet dus verschillende meldingen op de pagina en op elke melding kan je genereren

Een voorbeeld van zo een "gegenereerd" formulier:

<form id="2" name="wallreply" action="" method="post">
<table border="0" cellspacing="0" cellpadding="0" width="646px" class="walltabelbottom">
<tr style="width:700px;">
<td style="width: 40px;"></td>
<td style="background-color: #F2F2F2;">


<textarea rows="1" cols="78" name="reply" id="reply" required></textarea>
<input type="hidden" name="eventid" id="eventid" value="661" />
<input type="hidden" name="wallid" id="wallid" value="1334" />
<input style="float: right;" type="submit" name="wallreply" value="Reageer" class="reageer wit"><br>

</td>
</tr>
</table>
</form>


Erboven staat letterlijk de code van die fiddle

<script type="text/javascript">
$(document).ready(function(){
$(".form").submit(function(event){
// submit voorkomen
event.preventDefault();

// is element van form waar je op submit klikte
console.log(event.currentTarget);

// vergeet $() niet rond het element te zetten zodat je deze in jQuery
// kan gebruiken om bvb. waardes te lezen en hier iets mee te doen
doSomethingWithForm($(event.currentTarget));
});

function doSomethingWithForm(element){
// gewoon om duidelijk te maken dat het juiste form geselecteerd werd
$('.form').css("background","none");

// element (meegegeven met deze functie) == $("#formX"), de ID's in de HTML
// zijn hier eigelijk overbodig
element.css("background","lime");
}

});
maar hij blijft dus submiitten


en wat ik nu helemaal niet meer snap, ik heb al mijn jqry code ('t stukje dat wel werkte) verwijderd
opnieuw de pagina geupload

en toch doet die die code nog en in de source staat ze niet meer, hoe kan dat? :/

Ik snap er niets meer van

ik verwijder ALLES van javascript, zelfs de link naar de library
dus alles tussen de script tags
ik sla het op onder een andere .php bestandsnaam

en toch voert die die code nog uit

Id's en classes mogen niet met een cijfer beginnen, dat zou een verschil kunnen maken.

Selecteert elementen met de class "form", niet de formulieren in jou HTML he. Tenzij je ze een class form mee geeft of vervangen door een eigen class naam.

Het "." punt in de jQuery selector slaagt op een class. Zonder punt... zou ook kunnen, dan selecteer je alle HTML elementen <form>, ongeacht de classes of ids.

zet uw styles ook in een CSS bestand, da ga u achteraf ook nog wa werk besparen als ge iets wilt aanpassen

ja die zitten in een css bestand maar om soms iets snel te aligneren ofzo durf ik het al eens inline doen.

Maar, ik word gewoon gek ik verwijder de code, sla het op onder een andere bestandsnaam, upload het, en toch wordt de code die ik verwijderd heb nog uitgevoerd (een nieuwe status posten zonder refresh)

daar zit het probleem volgens mij. Ik mag zoveel code veranderen als ik wil, die blijft precies die oude code gebruiken. Ik snap er geen hol van hoe dat kan.