Form Builder

Form Customization - Javascript

Senest redigeret:

Denne guide hjælper dig til at komme i gang med at tilpasse din(e) formular(er) med javascript, så du kan lave betingede felter og gøre din formular dynamisk. Der kræves et kendskab til javascript inden du går videre, da en forkert opsætning kan gøre at formularen ikke virker korrekt. 

Se også denne guide der gennemgår de forskellige områder: Forstå Form Builder Customisation

Hop direkte til

 


 

Tjek formular værdier

Du har mulighed for at tjekke formularens start værdier og når disse ændres ved at bruge nedestående eksempel som udgangspunkt.

function client_refresh_form(init) {

var result = window.getFormVars();

// Print current form values
console.log(result);

if (init === true) {
// Do something special on initial load
} else {
// Do something special on every form change, except initial load
}

// Do something on every form change and initial load

// Example
if ( result.magasin === 'on' ) {
$('.form-group-address, .form-group-postcode, .form-group-city').removeClass('hidden');
} else {
$('.form-group-address, .form-group-postcode, .form-group-city').addClass('hidden');
}
}

// Initial form check
client_refresh_form(true);

// Check form on every change
$(document).on('formChange', function (elem) {
client_refresh_form(false);
}); 

 

Betingede felter

Med javascript har du mulighed for at bl.a. at skjule eller vise felter i formularen, så de nogle felter kun bliver vist, når der er foretaget et bestemt valg. Det kunne f.eks. være, kun at vise et felt med CPR-nummer, når betalingsservice er valgt som betalingsmetode.

function client_refresh_form(init) { 

var result = window.getFormVars();

if ( result.paymentMethodType === 'Betalingsservice' ) {
$('.form-nationalid').show();
} else {
$('.form-nationalid').hide();
}
}

// Initial form check
client_refresh_form(true);

// Check form on every change
$(document).on('formChange', function (elem) {
client_refresh_form(false);
});