[Javascript] onSubmit submit bij false

[erkje]

Ik ben bezig met een formulier waarbij diverse onderdelen goed ingevuld moeten worden. Daarvoor gebruik ik client-side deze functie om de textvakjes te controleren:

code:

<script language="JavaScript">
<!--
function check_form() {
  var error = 0;
  var error_message = "";

    if (document.admin.txt_firstname.value == "") {
    error_message = error_message + "* Voornaam mist.\\n";
    error = 1;
    }
    
    if (document.admin.txt_lastname.value == "") {
    error_message = error_message + "* Achternaam mist.\\n";
    error = 1;
    }
    
    if (document.admin.txt_email.value == "") {
    error_message = error_message + "* E-mail adres mist.\\n";
    error = 1;
    }
    
    if (document.admin.sel_ag_id.value == 0) {
    error_message = error_message + "* Selecteer een groep.\\n";
    error = 1;
    }

  if (error == 1) {
    alert(error_message);
    return false;
  } else {
    alert('waar');
    return true;
  }
}
//-->
</script>

in mijn <FORM> tag heb ik de volgende text opgenomen:

code:

onSubmit="return check_form();

Hij doorloopt netjes de controle. Maar als het fout gaat en hij moet false teruggeven (wat hij ook netjes doet) samen met de alert(wat ook goed gaat), gaat het formulier evengoed door naar de volgende pagina!

What must I do... Ik kan echt geen onwaarheid ontdekken in deze code. Kan het misschien ergens anders aan liggen? Ik heb namelijk vergeleken met eenzelfde soort script en dat is imho precies hetzelfde, maar dat werkt wel...

edit:
Let niet op de \\n, dit komt omdat het eerst in een PHP-variabele terechtkomt. Daardoor wordt het \n, en dat is nodig om in de alert een paar newlines te geven.

[ Voor 23% gewijzigd door erkje op 22-10-2004 15:09 ]

[André]

Ik snap het ook niet, dit zou niet mogen submitten als het false is. Het moet dus ergens anders in zitten, heb je de volledige pagina online staan?

En voor de netheid, geef je form een id:

code:

if (document.getElementById("admin").elements["txt_firstname"].value == "")
{
  error_message = error_message + "* Voornaam mist.\\n";
  error = 1;
}

[ Voor 80% gewijzigd door André op 22-10-2004 15:17 ]

[gekkie]

onsubmit='return(checkform());'

werkt bij mij prima

[Janoz]

Javascript hoort niet in Programming & Webscripting. Webdesign & Graphics handeld over het clientside javascript. Aangezien je hier nog niet zo heel lang komt move ik 'm voor je .

[erkje]

Nee, de pagina staat niet online, we werken op een lokale server.

En om het form een id te geven is niet mooier ofzo. Die functie getElementById() zoekt het id dan op. Op de huidige manier kan ik direct de naam als onderdeel van document gebruiken. (document.admin.*)
Ik denk dat jij dat mooier vindt

[erkje]

owkee Janoz, you're the mod

[André]

erkje schreef op 22 oktober 2004 @ 15:29:
Nee, de pagina staat niet online, we werken op een lokale server.

En om het form een id te geven is niet mooier ofzo. Die functie getElementById() zoekt het id dan op. Op de huidige manier kan ik direct de naam als onderdeel van document gebruiken. (document.admin.*)
Ik denk dat jij dat mooier vindt

Heeft niets met mooier te maken, het is de normale en enige correctie manier om gegevens uit een formulier op te vragen. Die manier die jij gebruikt kan tot fouten leiden en hoort 'eigenlijk' helemaal niet te werken. Dit heeft helemaal niets met smaak oid te maken

[crisp]

weet je zeker dat je geen JS error krijgt? (Zet notifications voor script errors eens aan of test in FireFox/Mozilla/Opera en hou de JS console in de gaten)

Het mooiste is trouwens om in je aanroep van de functie al een referentie naar het formulier mee te geven, dan heeft je form helemaal geen name of id meer nodig en is sneller (scheelt lookups):

HTML:

<form action="foo" onsubmit="return check_form(this)">

JavaScript:

function check_form(form) {

  var error = 0;
  var error_message = '';

    if (form.elements['txt_firstname'].value == '') {
      error_message += '* Voornaam mist.\n';
      error = 1;
    }

// etcetera

}

dot-notaties zijn trouwens sowieso ranzig

[ Voor 15% gewijzigd door crisp op 22-10-2004 15:40 ]

[erkje]

@André - Allright, maybe you're right. Javascript wordt inderdaad vaak ruim geïnterpreteerd. Dat zou het wel eens kunnen zijn. Van Javascript ken ik de achterliggende opbouw ook eigenlijk niet zo. Daarom paste ik mijn kennis van array's/objecten in het algemeen toe op deze situatie

[ Voor 5% gewijzigd door erkje op 22-10-2004 15:36 ]

[erkje]

Ik heb één en ander gewijzigd (na overtuigd te zijn van de schoonheid die jullie aanbieden):

code:

<script language="JavaScript">
<!--
function check_form(form) {
  var error = 0;
  var error_message = '';

    if (form.elements['txt_firstname'].value == '') {
    error_message += '* Voornaam mist.\\n';
    error = 1;
    }
    
(..)

  if (error == 1) {
    alert(error_message);
    return false;
  } else {
    alert('waar');
    return true;
  }
}
//-->
</script>

en in het form:

code:

onSubmit="return check_form(this);"

Ik ben zelfs met de JavaScript Console aan de gang geweest. Helemaal gecleared en opnieuw wat getest. Géén errors... In IE aangegeven dat ie alle scripterrors weergeeft. Ook niets.

[André]

En wat krijg je te zien als je dit doet:

code:

onSubmit="alert(check_form(this));"

Als je daar ook false krijgt zit de fout 100% zeker weten ergens anders.

[erkje]

Je hebt gelijk! Dat geeft ook false terug. Dat brengt mij op de gedachte dat er een plaatje als knop wordt gebruikt met de code

code:

onClick="submit();"

Hmm, is dat een probleem? Ik heb het proberen te vervangen door een simpele knop: <input type=submit value=bla> maar daarmee gaat ie ook door naar de volgende pagina.

Je zegt dat de fout 100% zeker weten ergens anders zit. Enig idee wat het überhaupt kan zijn?

[ Voor 43% gewijzigd door erkje op 22-10-2004 16:00 ]

[André]

erkje schreef op 22 oktober 2004 @ 15:57:
Je hebt gelijk! Dat geeft ook false terug. Dat brengt mij op de gedachte dat er een plaatje als knop wordt gebruikt met de code

code:

onClick="submit();"

Laat ik daar eens wat mee proberen...

Maak daar van:

code:

onClick="document.getElementById('admin').submit();"

[erkje]

Noop, no result..

[crisp]

Bij een JS submit wordt inderdaad de onsubmit niet getriggered. Als het een plaatje moet zijn, waarom gebruik je dan niet een input type="image" ?

en onClick="submit();" zal ws alleen in IE werken want de scope van de uitvoering is in ieder geval niet je formulier.

[ Voor 30% gewijzigd door crisp op 22-10-2004 16:06 ]

[André]

Er begint me nu iets te dagen over het feit dat de onsubmit genegeerd werd bij een JS submit, probeer eens een normale submitbutton.

Edit:
crisp bevestigd mijn vermoeden al

[ Voor 17% gewijzigd door André op 22-10-2004 16:06 ]

[erkje]

Zoals ik al eerder zei:
Ik heb het proberen te vervangen door een simpele knop: <input type=submit value=bla> maar daarmee gaat ie ook door naar de volgende pagina.

@crisp
Ik gebruik inderdaad een input type=image. Voor als je het wil weten:
<input type="image" src="includes/languages/dutch/images/buttons/button_update.gif" border="0" alt="IMAGE_UPDATE" title=" IMAGE_UPDATE " onClick="document.getElementById('admin').submit();">

Ook door het weglaten van deze onClick gaat hij gewoon verder (na de alert) naar de volgende pagina.

[crisp]

Dan is wellicht je browser foobar of moet je het toch ergens anders in je code zoeken.
Probeer eens een heel simpele testcase op te zetten en kijk of je het probleem dan ook hebt. Zo nee, bouw het dan stapje voor stapje weer op totdat het probleem zich wel voordoet - je weet dan in ieder geval waar je het moet zoeken.

Die onclick op je submit is in ieder geval overbodig.

[ Voor 9% gewijzigd door crisp op 22-10-2004 16:16 ]

[Verwijderd]

Ik weet niet of ik heel erg blaat nu , maar moet het niet zijn :

onSubmit="check_form(); return;"

dus met extra punt komma.
Weet ook niet of sommige browsers hier in onderscheid maken

maar kan eigenlijk ook verder geen fout ontdekken ....... **

[ Voor 4% gewijzigd door Verwijderd op 22-10-2004 16:24 ]

[erkje]

Die image is geen submit, daarom zat er een onClick=submit in. Maar ik heb em nou weggehaald en hij werkt nog steeds als submit knop.

Mijn vorige bericht is niet zo waarheidsgetrouw... Ik was vergeten iets terug te zetten. Er stond nog in mijn <form> onSubmit="alert(check_form(this))"...

toen ik hier return van gemaakt had werkte het! De oplossing is dus om in de <input type=image> géén onClick=submit() te doen....

*zucht* lange zoektocht... Thank you sooo much for helping me out

[Verwijderd]

beter

[crisp]

een input type="image" is juist wel een submitknop

[erkje]

crisp schreef op 22 oktober 2004 @ 16:26:
een input type="image" is juist wel een submitknop

Inderdaad, maar wat als je nu meerdere images hebt... dat je 3 images gebruikt om je formulier op verschillende manieren af te vangen. Dan zijn ze wél alle 3 submitknoppen, maar wat gebeurt er als je op <enter> drukt?

(niet voor dit probleem, maar dat vraag ik me dus af)

[Verwijderd]

[reclame=opensource]

http://jsval.emedia-office.com/

jsVal: JavaScript Form validation framework

[/reclame]

[crisp]

erkje schreef op 22 oktober 2004 @ 16:32:
[...]

Inderdaad, maar wat als je nu meerdere images hebt... dat je 3 images gebruikt om je formulier op verschillende manieren af te vangen. Dan zijn ze wél alle 3 submitknoppen, maar wat gebeurt er als je op drukt?

(niet voor dit probleem, maar dat vraag ik me dus af)

Als je met enter submit wordt er sowieso geen value van een submitknop meegestuurd in het request, dus dan maakt het niet uit welke primair is (maar dat is in ieder geval de 1e submitbutton in je form)