Javascript: submit button beschikbaar maken als 3 velden zijn ingevuld

Puch · 3 maart 2010

Hallo Iedereen,

Php heb ik aardig onder de knie, maar javascript is een raadsel voor mij. Vandaar deze vraag

Ik zoek een javascript die volgende doet.

Ik heb in een formulier 3 text fields die verplicht moeten ingevuld worden.

De submit button moet disabled blijven tot die drie zijn ingevuld.

Ik heb het werkend, maar je moet eerst nog ergens naast de fields klikken vooraleer het werkt.

Ik zou dus willen dat de button beschikbaar komt van het moment dat de drie fields zijn ingevuld. Of beter nog terwijl je het laatste field invult. Onafhankelijk van welk je aan het invullen bent.

Dit heb ik zelf in elkaar gezet

Html:

<html><head><script type="text/javascript">function test(){ if(document.naam.tekstregel.value == ""); if(document.naam.tekstregel2.value == ""); if(document.naam.tekstregel3.value == "") {document.naam.submit.disabled=true;}else{document.naam.submit.disabled=false;} }</script></head><body><form name="naam" onchange="test()" action="verwerk.php"><input type="text" name="tekstregel" size="25"><input type="text" name="tekstregel2" size="25"><input type="text" name="tekstregel3" size="25"><input type="submit" name="submit" value="OK" disabled="true"></form></body></html>

Alle hulp is dus welkom

Duwgati · 3 maart 2010

Je moet geen 'onchange' event aan het form hangen, maar je moet aan ieder 'input' element een event handler hangen die kijkt of er al iets is ingetypt.

JS geeft namelijk pas een onchange status af als het ook daadwerkelijk is gewijzigd, en dat weet je pas op het moment dat je het veld verlaat. Oftewel als je je 'wijzigingen' bevestigt.

Nou zijn event handlers een lastig iets. Zeker niet bepaald universeel en dus ook moeilijk cross browser te realiseren. Ik zou daarvoor JQuery nemen als ik jou was.

Ik zal eens even een voorbeeldje uitwerken voor je.

Duwgati · 3 maart 2010

Ik heb even een werkend voorbeeld voor je gemaakt.

Zoals je kunt zien keurig unobtrusive javascript. Als mensen JS gedisabled hebben, werkt het form dus nog steeds.

Kowalski · 4 maart 2010

Nou wat een luxe, al het werk wordt hier voor je gedaan! Knap gemaakt overigens.

Puch · 4 maart 2010

Thx Duwgati, werkt prima

Duwgati · 4 maart 2010

Je moet echt eens naar dat JQuery kijken Puch. Dat is ontzettend mooi gestructureerd in elkaar gezet.

Als je CSS snapt, dan is JQuery ook een fluitje van een cent. De hele structuur/syntax is namelijk helemaal opgebouwd volgens het principe van de CSS structuur/syntax.

Puch · 4 maart 2010

Ik zal dat zeker eens van dichter bij gaan bekijken.

Puch · 4 maart 2010

Duwgati,

kan je mij die jquery.min.js even mailen, want in je voorbeeld staat de volledige code op 1 regel.

Thx

Duwgati · 4 maart 2010

Dat is ook de bedoeling.

Het is een toolbox waar je echt vanaf moet blijven, je moet 'm alleen gebruiken 'as is'.

Op de jquery website kun je altijd de laatste nieuwe versie downloaden. Die komt zowel in een minimized als een expanded versie, maar je hebt niets aan die expanded versie tenzij je een echte javascipt crack bent

Daar vind je trouwens ook uitstekende tutorials.

Duwgati · 4 maart 2010

Nog 1 ding om op te letten, en dat is hoe je jquery succesvol laat starten op de manier van 'window.onload':

Code:

<script src="jquery.min.js" type="text/javascript"></script><script type="text/javascript">  jQuery(function($) {    // hier alle JQuery (JS) code plaatsen  });</script>

Er zijn nog wel meer manieren die je in de documentatie vaak tegen zult komen, maar dit hierboven is veruit de makkelijkste en safe manier.

Call methodes als:

Code:

$(document).ready(function(){

worden hiermee dus overbodig.

Puch · 5 maart 2010

Ok, bedankt

Inloggen

Javascript: submit button beschikbaar maken als 3 velden zijn ingevuld

Aanbevolen berichten

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Link naar reactie

Delen op andere sites

Maak een account aan of log in om te reageren

Account aanmaken

Inloggen

Wie is er online 0 leden