Add Functionality with Javascript - Examples

In the section PERSONALIZED CSS AND JS we saw how to insert Javascript code to a Landing Page that is being creatined.

It can be very useful to include advanced functions, as they will help you to make the most of your Landing page. In the next steps we will show you a few examples.

How do we refer to a form field?

Insert a value in the "Element id" of the field you want to refer to, so that "Element id" = my_value.

For example, if you wish to insert a code of a password field, your javascript should be:

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

or

password = $(“#Password”);

where "Password" is the same value inserted in the "Element id".

Validate field and alerts.

In the landing page we can validate any field of the survey and raise an alert in case the value given is not correct. For example (alert for passwords < than 8 characters):

function lpgValidateExtra(){
  var errors = [];
   
  password = $("input[id='Password']");  
 
  if (password.val().length < 8) {
       password.css("border-color","red");
       errors.push("The password must be at least 8 characters long");
    } else {
       password.css("border-color","");  
    }
 
  if (errors.length != 0){
   return errors;
  }  
  return true;        
}

Including a pixel according to a value that has been introduced in a field of the form:

We wish to include a pixel in the "confirmation page" based a value introduced or selected on the main page of our from. Firstly, we need to add the field between curly brackets {} to get the value. Secondly we can use that value to add a pixel or execute another possible  action.

var my_cat = '{{ my_category }}';

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

Automatic redirect to other pages

Sometimes,after the confirmation page you may want to automatically show another page for a few seconds. You can add the following javascript code in the confirmation page for this purpose:

<script type="text/javascript">

function redireccionar(){

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

} 

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

</script>

 

Insert a 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>

Validate a spanish telephone number

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