Waarom moet ik 2 keer klikken ?
Ik heb een code geschreven die misschien al bestaat. Het gaat erom dat als het veld leeg is dus gelijk is aan 0 dat het veld moet gaan shaken.
Het werkt, alleen ik moet hiervoor dubbelklikken voordat het functioneerd. Kan iemand mij vertellen wat hier niet goed gaat?
Het script is als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Code:
<doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<form >
<input type="text" class="hah" id="remark1" name="remark1">
<br/>
<button onclick="valideer()" >valideer</button>
</form>
<script type="text/javascript">
function valideer(){
var remark=document.getElementById('remark1');
if (remark.value.length == 0){
$(".hah").effect('shake', 500 );
return false;
}
}
</script>
</body>
</html>
<doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<form >
<input type="text" class="hah" id="remark1" name="remark1">
<br/>
<button onclick="valideer()" >valideer</button>
</form>
<script type="text/javascript">
function valideer(){
var remark=document.getElementById('remark1');
if (remark.value.length == 0){
$(".hah").effect('shake', 500 );
return false;
}
}
</script>
</body>
</html>
Deze vraag heb ik ook in een ander forum gesteld, alleen kreeg ik geen respons hierop vandaar dat ik het hier plaats.
gr. Yoeri
Link van ander forum weggehaald, PHPhulp is natuurlijk veel leuker :)[/modedit]
Gewijzigd op 09/09/2014 16:59:41 door Nick Dijkstra
Je zult dus een extra attribuut aan de <button> moeten meegeven: type="button" om te voorkomen dat het formulier verstuurd wordt.
Dan kun je de if uitbreiden met een else waarbij je het formulier gaat verzenden als de validatie correct is.
Het valt me op dat je nog niet heel erg volgens de jQuery standaard programmeert dus ik heb het enigszins gewijzigd.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" class="hah" id="remark1" name="remark1"><br/>
<button type="button" id="validate" >valideer</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#validate').click(function(e) {
if($('#remark1').val().length == 0) {
$(".hah").effect('shake', 500 );
return false;
} else {
$( "#myForm" ).submit();
}
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<form id="myForm">
<input type="text" class="hah" id="remark1" name="remark1"><br/>
<button type="button" id="validate" >valideer</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#validate').click(function(e) {
if($('#remark1').val().length == 0) {
$(".hah").effect('shake', 500 );
return false;
} else {
$( "#myForm" ).submit();
}
});
});
</script>
</body>
</html>
Gewijzigd op 09/09/2014 17:39:36 door Frank Nietbelangrijk
Dank voor de oplossing! Ik had het inderdaad niet logisch geprogrammeerd.
alleen waar staat de (e) achter function voor? het is de eerste keer dat ik dat zie.
Gr. Yoeri
Hier heb ik ook nog een vraag over :)
Ik heb een formulier gemaakt met radio buttons. Als het antwoord "ja" is, word er geen functie uitgevoerd.
Is het antwoord "nee" dan word er een veld d.m.v. fade in getoond. Dit werkt helemaal na behoren. (een poll)
Wat ik graag zou willen als het invulveld actief is "antwoord=nee" dat er gekeken word of er iets is ingevuld, is dit niet dan shake het desbetreffende veld.
Nu kan ik natuurlijk voor alle vragen het script kopiëren, maar het zou handiger zijn als ik dat onder een code kan schrijven.
Dit is mijn script zonder de shake functie
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="problem-No"){
$(".remark1").fadeIn(1000);
$(".remark1").prop('required',true);
}
if($(this).attr("value")=="problem-Yes"){
$(".remark1").fadeOut(500);
$(".remark1").prop('required',false);
}
});
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="improve-Yes"){
$(".remark2").fadeIn(1000);
$(".remark2").prop('required',true);
}
if($(this).attr("value")=="improve-No"){
$(".remark2").fadeOut(500);
$(".remark2").prop('required',false);
}
});
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="remark-Yes"){
$(".pollmessage").fadeIn(1000);
$(".pollmessage").prop('required', 'true');
}
if($(this).attr("value")=="remark-No"){
$(".pollmessage").fadeOut(500);
$(".pollmessage").prop('required', false);
}
});
});
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="problem-No"){
$(".remark1").fadeIn(1000);
$(".remark1").prop('required',true);
}
if($(this).attr("value")=="problem-Yes"){
$(".remark1").fadeOut(500);
$(".remark1").prop('required',false);
}
});
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="improve-Yes"){
$(".remark2").fadeIn(1000);
$(".remark2").prop('required',true);
}
if($(this).attr("value")=="improve-No"){
$(".remark2").fadeOut(500);
$(".remark2").prop('required',false);
}
});
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="remark-Yes"){
$(".pollmessage").fadeIn(1000);
$(".pollmessage").prop('required', 'true');
}
if($(this).attr("value")=="remark-No"){
$(".pollmessage").fadeOut(500);
$(".pollmessage").prop('required', false);
}
});
});
Wie o wie kan mij op weg helpen?
Groetjes Jop
Toevoeging op 10/09/2014 11:33:44:
Toevoeging op vorige bericht
Ik werk met 3 vragen.
Als er op de button word geklikt moet er worden gekeken of de velden actief zijn en of ze zijn ingevuld. is de value gelijk aan 0 shake het / de veld / velden wat leeg zijn, ander verstuur.
wat moet ik meegegeven in het script?
het is nu namelijk zo dat als de vraag met nee word beantwoord dat er een required true word meegeven, is het ja dan is requird false.
Hier een voorbeeld van stackoverflow.com van een <input> die enkel cijfers accepteert:
Code (php)
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
$(document).ready(function() {
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
Gewijzigd op 10/09/2014 18:04:32 door Frank Nietbelangrijk