[JavaScript] Form submitting - Softwareontwikkeling

dinsdag 2 mei 2006 17:56

Acties:

Verwijderd

Topicstarter

Beste tweakers (en ook tweaksters $_/-\o_$ ),

Ik heb een vaag prolbeempje i.v.m. het submitten van forms. De situatie is als volgt:

Op een profielen site kan men zijn berichten zien, en is er de mogelijkheid om ze te verwijderen. Bij elk bericht staat een vinkvakje "verwijder dit bericht". Nu wil ik het zo maken dat op het moment dat iemand op "berichten verwijderen" klikt, er tenminste 1 vinkvakje aangevinkt moet zijn. Opzich werkt dit ook, ik heb een for loop gemaakt die de elementen van de form doorlopen en daarna controleren of huidige element een checkbox is, zoja hoogt hij de checkbox teller op.
Dit werkt echter allemaal prima, en ook geeft hij een waarschuwing als er te weinig checkboxes zijn aangevinkt. Echter heb ik een probleem met het submitten van de form ik heb 2 dingen geprobeerd:

Probeersol 1:
Uitleg:
Ik heb geprobeerd om de form handmatig te submitten als men aan de conditie voldoet. Echter geeft IE hier een fout op dat hij de methode niet kent, terwijl het toch echt een form object is wat hij mee geeft, althans als ik op internet zoek zie ik voorbeelden zoals: document.formnaam.submit(); , ik doe het ietsjes anders omdat ik mijn form geen naam wil geven: document.getElementById('formid').submit(); heb ik het dus zo gedaan, wat mij eigenlijk hetzelfde lijkt alleen dat ik mijn form een id attribuut moet geven.

In de form heb ik de volgende button staan:
<input type="submit" name="submit" value="doet er niet toe :p" onclick="deleteReacts()"/>

Dit werkt dus niet, en krijg ik de fout dat hij de methode niet kent (methode submit()).

JavaScript:

function deleteReacts() {
      // ---
      // First we check if there are any messages selected, else we don't submit the form!
      // ---
      var formElements = document.getElementById('form');
      var checkboxes = 0; //amount of selected checkboxes 
      for( i=0; i < formElements.length; i++ ) {                                               
            element = formElements.elements[i];
            if( element.type == 'checkbox' ) {
                  if( element.checked ) {
                        checkboxes++;
                  }
            }            
      }            
      if( checkboxes == 0 ) {
            alert('Je moet minstens een reactie selecteren!');
            return false;            
      } else {            
            document.getElementById('form').submit();            
      }
}

Probeersol 2:
uitleg:
Eigenlijk hetzelfde, behalve dat de form een onsubmit attribuut heeft (onsubmit="return deleteReacts(this)" en hij geeft zijn eigen form als parameter, dit leek me ook de mooiste oplossing maar vaag genoeg op het moment dat de eerste if statement in de functie deleteReacts() evalueert tot true dan submit hij de form al. De functie is niet veel anders dan de bovenstaande behalve dan hij zijn eigen form object mij krijgt, en dus geen document.getElementById('form') gebruikt...
Op de volgende if statement submit hij de boel al (heb het al ge-debugt):

JavaScript:

1	if( element.type == 'checkbox' ) {

Ik was benieuwd of iemand hier al eerder problemen mee heeft gehad? Of iemand mij kan vertellen of ik iets over het hoofd zie? Ben immers geen javascript guru

tnx!

dinsdag 2 mei 2006 18:08

Acties:

Verwijderd

Klassieker: noem een element in een form nóóit submit

Verder is het prima om het formulier een id te geven, en document.getElementById te gebruiken. Maar je zou ook document.forms[0] of document.forms.item(0) kunnen gebruiken. Maar volgens mij moeten ook document.forms['id'] en document.forms.namedItem('id') werken. Dat weet ik echter niet meer zeker, dat is lang geleden.

Nog mooier is het meestal om als argument aan de function/method call het formulier of de button mee te geven. De form property van de button is immers een directe referentie naar het form object.

JavaScript:

1
2
3

function deleteReacts(form) {
   form.submit();
}

Nog even terugkomend op de naamgeving. Je kent de return value van document.getElementById toe aan de lokale variabele formElements. Dat is niet handig, aangezien er maar één element wordt gereturnd (of dat hoort in elk geval zo te zijn).

Ook mooi: de functie voor de controle niet aan de knop hangen, maar aan de onsubmit van het form element. Als je functie true returnt, wordt het formulier gesubmit, als je false returnt niet.

HTML:

1	<form action="melp" method="post" onsubmit="return deleteReacts(this);">

HTH
[edit]
Ik zie dat de helft van m'n post overbodig is. Ik had niet verder gelezen dan probeersol 1

[ Voor 12% gewijzigd door Verwijderd op 02-05-2006 21:42 ]

dinsdag 2 mei 2006 18:25

Acties:

Verwijderd

Topicstarter

Hmz ik heb een beetje je naam-geef instructies opgevolg in de hoop dat het dan misschien gaat werken.

Vaag genoeg is trouwens dat als ik het volgende doe:

code:

1	<input type="button" name="deleteReact" onclick="this.submit();" value="Verwijder reacties" />

Dat hij dan alsnog de foutmelding geeft dat de methode niet bestaat. Dus dat zou eigenlijk willen zeggen dat het object niet klopt o.i.d. ?

dinsdag 2 mei 2006 18:43

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op dinsdag 02 mei 2006 @ 18:25:
Hmz ik heb een beetje je naam-geef instructies opgevolg in de hoop dat het dan misschien gaat werken.

Vaag genoeg is trouwens dat als ik het volgende doe:
code:
1
<input type="button" name="deleteReact" onclick="this.submit();" value="Verwijder reacties" />
Dat hij dan alsnog de foutmelding geeft dat de methode niet bestaat. Dus dat zou eigenlijk willen zeggen dat het object niet klopt o.i.d. ?

lees de eerste zin van Cheatah's reply eens; waarschijnlijk heb je een form-element met name="submit" staan in je formulier

Intentionally left blank

dinsdag 2 mei 2006 18:45

Acties:

Verwijderd

Topicstarter

Mijn excuus, maar nee dat heb ik al veranderd in iets anders. Echter heb ik wel in een andere form een submit element staan maar dat lijkt me niet echt uit te maken toch ?

dinsdag 2 mei 2006 21:40

Acties:

crisp

Devver

Pixelated

Ik zie nu ook dat je voorbeeld fout is, het zou zo moeten:

HTML:

1	<input type="button" name="deleteReact" onclick="this.form.submit();" value="Verwijder reacties">

en nogmaals: gebruik gewoon nooit name="submit" (of welke andere willekeurige naam gelijk aan een bestaande method)

Intentionally left blank

dinsdag 2 mei 2006 21:57

Acties:

funkwurm

Mag ik dan nog even een aanvullende (offtopic) tip geven (ik kick hem daarmee toch niet want hij staat bovenaan

):

Gebruik je moerstaal voor eigen naamgeving van wat dan ook, dan conflicteert het nooit met gereserveerde javascript-woorden.

dinsdag 2 mei 2006 22:00

Acties:

Erkens

Fotograaf

funkwurm schreef op dinsdag 02 mei 2006 @ 21:57:
Gebruik je moerstaal voor eigen naamgeving van wat dan ook, dan conflicteert het nooit met gereserveerde javascript-woorden.

totdat je samen werkt met een internationaal team

dinsdag 2 mei 2006 22:25

Acties:

Verwijderd

Topicstarter

funkwurm schreef op dinsdag 02 mei 2006 @ 21:57:
Mag ik dan nog even een aanvullende (offtopic) tip geven (ik kick hem daarmee toch niet want hij staat bovenaan ):

Gebruik je moerstaal voor eigen naamgeving van wat dan ook, dan conflicteert het nooit met gereserveerde javascript-woorden.

Ehh nee gadver dat vindt ik zo vies, dan moesten ze maar een nederlandse taal uitvinden hoor..

** denkt... **

code:

1
2
3

ALS(10 gelijk aan 10) {
  printscherm('hoi');
}

Maargoed, mijn applicatie is tevens ook bedoeld voor een internationaal team dus voor mij is het zowiezo niet van toepassing!

edit:

Probleem gevonden! Het kwam omdat er op dezelfde pagina nog een form stond (echter wel met een andere id) wanneer ik deze weg haalde deed hij het wel, het ligt dus aan de submit button in de andere form... nu nog een oplossing

[ Voor 20% gewijzigd door Verwijderd op 02-05-2006 22:43 ]