1. #1
    Stimpy's Avatar
    Registered
    17/07/02
    Location
    ja
    Posts
    14,140
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/149

    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

    Code:
    <form id="naamvanhetform" action="<?php echo $PHP_SELF; ?>" method="post">
    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?

    Datic - Ontmoet nieuwe mensen.
    no votes  

  2. #2
    De Wouter's Avatar
    Registered
    11/05/13
    Location
    Prov. Antwerpen
    Posts
    595
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Bij "return" stopt de functie... En meerdere gelijke id's op 1 pagina? Waar heb jij HTML geleerd???
    no votes  

  3. #3
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    Quote Originally Posted by De Wouter View Post
    This quote is hidden because you are ignoring this member. Show
    Bij "return" stopt de functie... En meerdere gelijke id's op 1 pagina? Waar heb jij HTML geleerd???
    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
    no votes  

  4. #4
    Stimpy's Avatar
    Registered
    17/07/02
    Location
    ja
    Posts
    14,140
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/149
    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.
    Datic - Ontmoet nieuwe mensen.
    no votes  

  5. #5
    De Wouter's Avatar
    Registered
    11/05/13
    Location
    Prov. Antwerpen
    Posts
    595
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Stimpy View Post
    This quote is hidden because you are ignoring this member. Show
    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?
    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.
    no votes  

  6. #6
    De Wouter's Avatar
    Registered
    11/05/13
    Location
    Prov. Antwerpen
    Posts
    595
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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.
    no votes  

  7. #7
    Stimpy's Avatar
    Registered
    17/07/02
    Location
    ja
    Posts
    14,140
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/149
    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.
    Datic - Ontmoet nieuwe mensen.
    no votes  

  8. #8
    De Wouter's Avatar
    Registered
    11/05/13
    Location
    Prov. Antwerpen
    Posts
    595
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Stimpy View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    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")
    no votes  

  9. #9
    Stimpy's Avatar
    Registered
    17/07/02
    Location
    ja
    Posts
    14,140
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/149
    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? :/
    Last edited by Stimpy; 11-11-2013 at 00:28.
    Datic - Ontmoet nieuwe mensen.
    no votes  

  10. #10
    Stimpy's Avatar
    Registered
    17/07/02
    Location
    ja
    Posts
    14,140
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/149
    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
    Datic - Ontmoet nieuwe mensen.
    no votes  

  11. #11
    De Wouter's Avatar
    Registered
    11/05/13
    Location
    Prov. Antwerpen
    Posts
    595
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Id's en classes mogen niet met een cijfer beginnen, dat zou een verschil kunnen maken.
    no votes  

  12. #12
    De Wouter's Avatar
    Registered
    11/05/13
    Location
    Prov. Antwerpen
    Posts
    595
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Code:
    $(".form").submit(function(event){
    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.
    no votes  

  13. #13
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    zet uw styles ook in een CSS bestand, da ga u achteraf ook nog wa werk besparen als ge iets wilt aanpassen
    no votes  

  14. #14
    Stimpy's Avatar
    Registered
    17/07/02
    Location
    ja
    Posts
    14,140
    iTrader
    8 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/149
    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.
    Datic - Ontmoet nieuwe mensen.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in