Waarom moet ik 2 keer klikken ?

Door Yoeri Achterbergen op 09-09-2014 15:57 gewijzigd op 09-09-2014 16:59

3.363 views

Hallo,

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:
<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

Frank Nietbelangrijk

09-09-2014 17:38 gewijzigd op 09-09-2014 17:39

Het probleem is dat je formulier direct verzonden wordt en de pagina dus opnieuw ingeladen wordt. Hierdoor wordt javascript stop gezet en je effect niet meer getoond.

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.


<!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>

Yoeri Achterbergen

10-09-2014 08:56

Beste Frank,

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

Jop B

10-09-2014 09:58

Beste,

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


 $(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);
            }
            
        });
    });

Wie o wie kan mij op weg helpen?

Groetjes Jop

[size=xsmall]Toevoeging op 10/09/2014 11:33:44:[/size]

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.

Frank Nietbelangrijk

10-09-2014 18:03 gewijzigd op 10-09-2014 18:04

Yoeri: de e staat voor event. En event staat hier voor gebeurtenis. Het is een variabele die extra informatie oplevert bij een bepaalde gebeurtenis. Bij een .click() event (als er op het element geklikt wordt met de muis) is dit niet zo interessant maar bij een .keypress() event (als er op een toets gedrukt wordt) dan heeft de event variabele de informatie in zich op welke toets er gedrukt is.

Hier een voorbeeld van stackoverflow.com van een <input> die enkel cijfers accepteert:


$(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();
        }
    });
});

Reageren

Inloggen om te reageren