Ajouter des fonctions Javascript - Exemples

Dans la section CSS Et JS Personnalisé on a vu comment insérer votre code Javascript dans la page d'atterrissage que vous avez créé.

Il peut être très utile inclure des fonctions avancées: il peut vous aider à bénéficier du potentiel de votre page d'atterrissage. On va vous montrer des exemples que vous pouvez utiliser.

Comment faire référence à un champ du formulaire?

Insérez une valeur en "ID de l'élément" dans le champ auquel vous voulez faire référence.

Par exemple, si vous voulez insérer un code pour un mot de passe, votre JS doit être:

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

ou bien

password = $(“#Password”);

où "Password" doit être la même valeur de "ID de l'élément".

Valider un champ et créer une alerte.

Dans la page d'atterrissage il est possible de valider n'importe quel champ du formulaire et créer une alerte si la valeur insérée ne réspet pas les conditions du code. Par exemple (alerte pour un mot de passe < 8 caractères):

function lpgValidateExtra(){
  var errors = [];
   
  password = $("input[id='Password']");  
 
  if (password.val().length < 8) {
       password.css("border-color","red");
       errors.push("Le mot de passe doit contenir au moins 8 caractères");
    } else {
       password.css("border-color","");  
    }
 
  if (errors.length != 0){
   return errors;
  }  
  return true;        
}

Inclure un pixel selon la valeur inserée dans un champ du formulaire.

On peut aussi inclure un pixel dans notre page d'atterrissage selon la valeur introduite ou sélectionnée dans le formulaire. Il faudra premièrement se référer à la valeur en mettent l'id du champ  entre accolades {}. Dernièrement on peut utiliser cette valeur pour ajouter le pixel ou pour réaliser des autres actions.

var my_cat = '{{ my_category }}';

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

Redirection automatique.

Parfois on veut montrer aux clients qui ont visité la page d'atterrissage une deuxième page après quelques moments. Vous pouvez utiliser le javascript suivant:

<script type="text/javascript">

function redirect(){

  window.location="http://www.mdirector.com";

} 

setTimeout ("redirect()", 3000); //time in milliseconds

</script>

 

Inserer un favicon

<script type="text/javascript">

(function() {

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

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

  link.rel = 'shortcut icon'; 

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

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

  }());

</script>

Valider un télephone espagnol

<script type="text/javascript">

function lpgValidateExtra(){

var errors = [];

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

 var pattern = /^[6-9]\d{8}$/;

  

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

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

 errors.push("El teléfono debe tener al menos 9 caracteres de longitud");

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

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

errors.push("El teléfono no es valido");

 } else {

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

 }

 

 

if (errors.length != 0){

return errors;

 }  

 return true; 

}

</script>

La valeur d'un champ = valeur d'un autre champ (par example confirmation de mot de passe)

function lpgValidateExtra(){ 
var errors = [];     
var cont = $('#campo1').val();
var cont2 = $('#campo2').val();
if (cont != cont2) {
$("input[name='campo1']").css("border","1px solid #bf0411");
$("input[name='campo2']").css("border","1px solid #bf0411");
errors.push("No Coinciden");  
}
if(errors.length!=0){
return errors;

}  
return true;        
}