Aggiungere funzionalità con Javascript - Esempi

Nella sezione CSS e JS personalizzato viene spiegato che è possibile programmare il form con il nostro proprio codice.

E' estremamente utile poter includere funzionalità avanzate che ci permettono di controllare e beneficare in misura maggiore del form della Landing che stiamo creando.Per questo ti mostriamo qui uno o più esempi che ti possono essere utili. 

Come far riferimento a un campo del formulario?

Semplicemente, in una variabile inclusa nel codice javascript, utilizza questa codifica, inserendo in name='XYZ'  il nome del campo del formulario, cioè XYZ è il nome di questo campo.

Per esempio, se andiamo a modificare o a fare un controllo sul campo password:

password = $("input[id='Password']");

ó

password = $(“#Password”);

Validità di un campo e avviso

Nella Landing è possibile validare qualsiasi campo del formulario e mettere un avviso nel caso in cui la validazione non sia soddisfacente. Per esempio:

function lpgValidateExtra(){
var errors = [];

password = $("input[id='Password']");

if (password.val().length < 8) {
password.css("border-color","red");
errors.push("El password debe tener al menos 8 caracteres ");
} else {
password.css("border-color","");
}

if (errors.length != 0){
return errors;
}
return true;
}

Includere un pixel dipendendo dal valore che è stato introdotto in un campo del formulario

Nella pagina di conferma, vogliamo includere un pixel che dipende da un valore introdotto e selezionato nella pagina principale del formulario. Il primo passo, per indicare questo valore, è di porre il nome del campo.......In seguito, lavoriamo con questo valore, realizzando le azioni che vogliamo, in questo caso aggiungiere un pixel.

var my_cat = '{{ my_category }}';

if (my_cat === 'M') {
var pixel
var img = $('<img />', {src : pixel});
img.appendTo('body')
}

Rindirizzazione automatica ad un' altra pagina

Alcune volte si vuole mostrare un' altra pagina, una volta mostrata la pagina di conferma/ringraziamento durante un piccolo lasso di tempo. Per farlo, si può aggiungere il seguente javascript nella pagina di conferma.

<script type="text/javascript">
function redireccionar(){
window.location="http://www.mdirector.com";
}
setTimeout ("redireccionar()", 3000); //tiempo expresado en milisegundos
</script>

Inserire un favicon

<script type="text/javascript">

(function() {

  var link = document.createElement('link');

  link.type = 'image/x-icon';

  link.rel = 'shortcut icon'; 

  link.href = 'http://urldelaimagendefavicon.ico';

  document.getElementsByTagName('head')[0].appendChild(link);

  }());

</script>

Validazione  numero di telefono italiano

<script type="text/javascript">

function lpgValidateExtra(){

var errors = [];

 var phone = $("input[id='Telefono']");

 var pattern = /^3\d{8}$/;

  

 if (phone.val().length != 9) {

  phone.css("border-color","red");

 errors.push("Il numero deve avere almento 9 caratteri");

 } else if (phone.val().search(pattern)) {

phone.css("border-color","red");

errors.push("Il numero non é valido");

 } else {

 phone.css("border-color","");    

 }

 

 

if (errors.length != 0){

return errors;

 }  

 return true; 

}

</script>