Ankündigung

Einklappen
Keine Ankündigung bisher.

autofill und on(change)....

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • autofill und on(change)....

    Hallo,

    nun ich habe schon einige Zeit in meine Formulare gesteckt damit alles toll aussieht so wie hier und da ein paar schöne Gimmicks aber auch wichtige Funktionen die Sachen ein/aus blenden und überprüfen.

    Genau hier habe ich atm aber auch ein kleines Problem, wenn ein Formular zb. fehlerhaft ausgefüllt wird erscheint dieses natürlich noch mal und via php werden die zuvor (richtigen) angaben als value in die Felder geladen.

    Meine on.("change") Funktionen springen hier natürlich nicht an (leider).
    Hier zb. mal eine Funktion für ein E-Mail feld in einer auth_resendfunktion:

    Code:
    $(document).ready(function()
    {
    	var $poID = 'email';
    	$(document).on("change","#"+$poID, function(e) // user enter a email
    	{
    		var tpl = $(this).data('tpl'),
    			successTXT = $(this).data('success'),
    			errorTXT = $(this).data('error');
    		
    		$.post("app/plugins/auth/checkInputs.php", { process: 'auth_resend', input: $(this).val() }, function(data)
    		{
    			data = $.parseJSON(data);
    			
    			if( data['status'] === true )
    			{
    				var imgEL = document.getElementById($poID + "IMG"),
    					statusEL = document.getElementById($poID + "Status");
    				
    				statusEL.innerHTML = successTXT;
    				statusEL.style.color = "green";
    
    				imgEL.src = tpl+"icons/checkmark-green.png";
    				imgEL.alt = successTXT;
    			}
    			else
    			{
    				var imgEL = document.getElementById($poID + "IMG"),
    					statusEL = document.getElementById($poID + "Status");
    				
    				statusEL.innerHTML = errorTXT;
    				statusEL.style.color = "red";
    	
    				imgEL.src = tpl+"icons/checkmark-red.png";
    				imgEL.alt = errorTXT;
    			}
    			$("#" + imgEL.id).show();
    			
    			if( data['counter'] == 0 && data['status'] == true )
    			{
    				$("#submitBlock").show();
    			}
    			else if( data['counter'] != 0 && data['status'] == true )
    			{
    				$("#countBox").show();
    				$('#countDown').countdown({ until: +data['counter'], onTick: resendTimer, onExpiry: authCountZero, significant: 2 });
    			}
    		});
    	});
    });
    
    function authCountZero()
    { 
    	$("#countBox").hide();
    	$("#submitBlock").show();
    } 
    
    function resendTimer(periods)
    { 
    	var min = ( periods[5] < 10 ) ? '0'+periods[5] : periods[5],
    		sec = ( periods[6] < 10 ) ? '0'+periods[6] : periods[6];
        $('#timeLeft').text( min + ':' + sec ); 
    }
    Es kann nun aber eine Situation auftauchen wo durch ein _GET-Parameter die Email automatisch eingetragen wird was natürlich nicht erkannt wird, leider fehlt mir hier ne Idee wie ich meine Scripte etwas verbessern kann um solche Sachen zu erkennen und darauf anzuspringen, mit live habe ich es schon probiert hat aber iwie net ganz hingehauen, ich hoffe Jemand hat da nen guten Tipp für mich.


    MFG: Paykoman


    ::EDIT::
    Habe ne Idee, Sekunde...

    ::EDIT2::

    So habe es mal etwas umgebaut:
    Code:
    var $poID = 'email';
    
    $(document).ready(function()
    {
    	$(document).on("change", "#"+$poID, manage_authResendEmail );
    	if( $("#"+$poID).val() != '' ){ manage_authResendEmail(); }
    });
    
    function authCountZero()
    { 
    	$("#countBox").hide();
    	$("#submitBlock").show();
    } 
    
    function resendTimer(periods)
    { 
    	var min = ( periods[5] < 10 ) ? '0'+periods[5] : periods[5],
    		sec = ( periods[6] < 10 ) ? '0'+periods[6] : periods[6];
        $('#timeLeft').text( min + ':' + sec ); 
    }
    
    function manage_authResendEmail()
    {
    	var tpl = $(this).data('tpl'),
    		successTXT = $(this).data('success'),
    		errorTXT = $(this).data('error');
    
    $.post("app/plugins/auth/checkInputs.php", { process: 'auth_resend', input: $(this).val() }, function(data)
    {
    	data = $.parseJSON(data);
    	var imgEL = document.getElementById($poID + "IMG"),
    		statusEL = document.getElementById($poID + "Status");
    	
    	if( data['status'] === true )
    	{
    		statusEL.innerHTML = successTXT;
    		statusEL.style.color = "green";
    		imgEL.src = tpl+"icons/checkmark-green.png";
    		imgEL.alt = successTXT;
    	}
    	else
    	{
    		statusEL.innerHTML = errorTXT;
    		statusEL.style.color = "red";
    		imgEL.src = tpl+"icons/checkmark-red.png";
    		imgEL.alt = errorTXT;
    	}
    	$("#" + imgEL.id).show();
    	
    	if( data['counter'] == 0 && data['status'] == true )
    	{
    		$("#submitBlock").show();
    	}
    	else if( data['counter'] != 0 && data['status'] == true )
    	{
    		$("#countBox").show();
    		$('#countDown').countdown({ until: +data['counter'], onTick: resendTimer, onExpiry: authCountZero, significant: 2 });
    	}
    });
    }
    Die Frage ist wie ich ganz oben bei der Prüfung ob die value leer ist die Funktion so anspreche das diese dann mit $(this) arbeiten so wie wenn jquery die Funktion aufruft?


    ::EDIT3:: *fg*
    So habe die funktion noch mal abgeändert und $this) raus genommen bzw. durch "el" ersetzt und gebe das object über den Functions-constructor weiter und oben habe ich jetzt das:
    Code:
    $(document).ready(function()
    {
    	var $poID = 'email';
    	$(document).on("change","#"+$poID, function(e){ manage_authResendEmail( $(this) ); });
    	if( $("#"+$poID).val() != '' ){ manage_authResendEmail( $("#"+$poID) ); }
    });
    Nun würde mich interessieren ob es so eine gute Lösung ist?

Lädt...
X