Submit button activeren
Beste mensen,
Deze topic heb ik ook ergens anders geplaatst:
http://www.helpmij.nl/forum/showthread.php/826517-Maak-submit-knop-zichtbaar
Ik heb een formulier gemaakt om in te loggen:
Nu wil ik als de velden leeg zijn met javascript zorgen dat de submit button niet aanklikbaar is en een opacity van 0.5.
Zodra er iets in beide velden is ingevuld moet de submit opacity 1 worden en tegelijkertijd aanklikbaar zijn.
hoe maak ik deze validatie?
Groetjes Yoeri
Deze topic heb ik ook ergens anders geplaatst:
http://www.helpmij.nl/forum/showthread.php/826517-Maak-submit-knop-zichtbaar
Ik heb een formulier gemaakt om in te loggen:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form method="post">
<input type="text" name="user" id="user">
<input type="password" name="password" id="password">
<input type="submit" name="submit" id="submit" value="Log in">
</form>
<input type="text" name="user" id="user">
<input type="password" name="password" id="password">
<input type="submit" name="submit" id="submit" value="Log in">
</form>
Nu wil ik als de velden leeg zijn met javascript zorgen dat de submit button niet aanklikbaar is en een opacity van 0.5.
Zodra er iets in beide velden is ingevuld moet de submit opacity 1 worden en tegelijkertijd aanklikbaar zijn.
hoe maak ik deze validatie?
Groetjes Yoeri
Heb je zelf al iets geprobeerd? Maak je gebruik van JQuery of wil je juist zonder?
Beste Frank,
Heb op google van alles gezocht maar kan niets vinden. Het liefste zou ik dit met Jquery willen maken.
Zodra er 1 karater in beide velden staat moet de button klikbaar worden en oplichten.
Heb op google van alles gezocht maar kan niets vinden. Het liefste zou ik dit met Jquery willen maken.
Zodra er 1 karater in beide velden staat moet de button klikbaar worden en oplichten.
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".required").on("keyup", function() {
var show = true;
$(".required").each(function() {
if ($(this).val().length == 0) {
show = false;
}
}
if (show) {
$("#mask_button").hide();
}
else {
$("#mask_button").show();
}
}
var show = true;
$(".required").each(function() {
if ($(this).val().length == 0) {
show = false;
}
}
if (show) {
$("#mask_button").hide();
}
else {
$("#mask_button").show();
}
}
CSS mag je zelf uitvogelen
Gewijzigd op 10/07/2014 22:52:44 door Ger van Steenderen
@Ger, je "if(show)" moet andersom toch?
Ik begrijp je verwarring, maar nee:
#mask_button is een divje over de submit button, dus om de button te tonen moet het divje verborgen worden.
#mask_button is een divje over de submit button, dus om de button te tonen moet het divje verborgen worden.
ah, ok. Maar is het dan niet makkelijker om die knop gewoon te verbergen?
Makkelijker wel, maar als ik TS goed begrijp wil ie enabled/disabled.
Kan ook, maar ik weet niet wat het effect is als je aangepaste css hebt voor een submit.
Het kan dan zijn dat je er niks aan ziet dat ie disabled is. Wel werkt ie dan niet meer
Bedankt voor de reactie.
Ik heb iets gevonden wat ongeveer in de buurt komt wat ik wil.
wat ik bedoel is een validate as you type
http://livevalidation.com/examples
en dan de volgende exaple:
Longer than or equal to a minimum length (is nu 4 die wil ik op 1 zetten)
in deze example word gekeken naar 1 input, ik wil dat die dus bij 2 velden ok geeft.
In de example word bij de validatie gebruikt gemaakt van thankyou(green)
Ik wil daarvoor in de plaats dat de submit button geactiveerd word.
Ik ben zelf niet bekend met Jquery, php begin ik te leren en html, css beheer ik goed!
Toevoeging op 11/07/2014 16:34:28:
Iemand die mij kan helpen ?
Hopende op een gunstig antwoord
Groetjes Yoeri
Ik heb iets gevonden wat ongeveer in de buurt komt wat ik wil.
wat ik bedoel is een validate as you type
http://livevalidation.com/examples
en dan de volgende exaple:
Longer than or equal to a minimum length (is nu 4 die wil ik op 1 zetten)
in deze example word gekeken naar 1 input, ik wil dat die dus bij 2 velden ok geeft.
In de example word bij de validatie gebruikt gemaakt van thankyou(green)
Ik wil daarvoor in de plaats dat de submit button geactiveerd word.
Ik ben zelf niet bekend met Jquery, php begin ik te leren en html, css beheer ik goed!
Toevoeging op 11/07/2014 16:34:28:
Iemand die mij kan helpen ?
Hopende op een gunstig antwoord
Groetjes Yoeri
Besef je zelf wel wat je vraagt?
Dus wij moeten maar even naar die link gaan die je geeft, daar de voorbeelden bekijken, en dan een werkende code hier plaatsen. Dit is (op zijn Brabants gezegd) van de zotte.
Als je met jquery en/of javascript bezig wilt gaan zal je jezelf daar toch in moeten gaan verdiepen, het heeft geen zin om zomaar klakkeloos script over te nemen terwijl je niet weet wat er mee gebeurt.
Maar het voorbeeldje wat ik je gaf werkt heel simpel:
- je legt een overlay divje (id="#mask_button") over de submit button
- je maakt in css een class (.required) voor de vereiste velden
- je geeft die class aan de inputs die je gecontroleerd wilt hebben.
De code met wat commentaar erbij
Dus wij moeten maar even naar die link gaan die je geeft, daar de voorbeelden bekijken, en dan een werkende code hier plaatsen. Dit is (op zijn Brabants gezegd) van de zotte.
Als je met jquery en/of javascript bezig wilt gaan zal je jezelf daar toch in moeten gaan verdiepen, het heeft geen zin om zomaar klakkeloos script over te nemen terwijl je niet weet wat er mee gebeurt.
Maar het voorbeeldje wat ik je gaf werkt heel simpel:
- je legt een overlay divje (id="#mask_button") over de submit button
- je maakt in css een class (.required) voor de vereiste velden
- je geeft die class aan de inputs die je gecontroleerd wilt hebben.
De code met wat commentaar erbij
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// zet een event listener op alle elementen met de class required
$(".required").on("keyup", function() {
var show = true;
// loop alle elementen met de class required af
// en kijk of ze ingevuld zijn
$(".required").each(function() {
if ($(this).val().length == 0) {
show = false;
}
}
if (show) {
$("#mask_button").hide();
}
else {
$("#mask_button").show();
}
}
$(".required").on("keyup", function() {
var show = true;
// loop alle elementen met de class required af
// en kijk of ze ingevuld zijn
$(".required").each(function() {
if ($(this).val().length == 0) {
show = false;
}
}
if (show) {
$("#mask_button").hide();
}
else {
$("#mask_button").show();
}
}
Oei, tabellen voor opmaak?????




