Zoeken

Standaard velden hiden in formulieren

Jordy Veldhuis
Jordy Veldhuis
  • Bijgewerkt

Soms wil je in een formulier bepaalde standaardvelden, zoals onderwerp en beschrijving, verbergen voor gebruikers. Bijvoorbeeld omdat deze automatisch worden gevuld of omdat je werkt met vaste ticketstructuren. Met JavaScript kun je deze velden eenvoudig verbergen en optioneel vooraf invullen.

 

✅ Aanbevolen methode - Via new-request-page.hbs:

Zet het script direct in je new-request-page.hbs template, net zoals je dat doet voor bijlage scripts. Dit is de meest betrouwbare aanpak omdat de DOM gegarandeerd geladen is én de formulier-ID direct uit de URL wordt uitgelezen.

<script>
  $(document).ready(function() {
    var urlParams = new URLSearchParams(window.location.search);
    var formId = urlParams.get('ticket_form_id');
    
    if (formId === 'FORM_ID_HIER') {
      $('#request_subject').closest('div.form-field').hide();
      $('#request_subject').val('Nieuw ticket – Automatisch onderwerp');
    }
  });
</script>

👉  Vervang FORM_ID_HIER door de juiste formulier-ID. De URL ziet er dan zo uit wanneer het formulier wordt geopend: /hc/nl/requests/new?ticket_form_id=FORM_ID_HIER
 

Alternatief - Via script.js (minder betrouwbaar):

Lukt het niet via de hbs template, dan kun je onderstaande methodes proberen via script.js. Let op: dit werkt niet altijd even goed omdat de timing van DOM-laden hier een rol speelt.

var formId = $("#request_issue_type_select").val();

if (formId === 'FORM_ID_HIER') {
  $('.form-field.request_subject').hide();       // Verberg onderwerp
  $('.form-field.request_description').hide();   // Verberg beschrijving

  $('#request_subject').val('Nieuw ticket – Automatisch onderwerp'); 
  $('#request_description').val('Zie ingevulde velden hieronder'); 
}

Nog een nabrander, werkt het niet direct? Check dan of onderstaand aanwezig is in je script.js

<script 
  src="https://code.jquery.com/jquery-3.6.0.min.js" 
  integrity="sha256-/xUj+3OJUsyExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
  crossorigin="anonymous">
</script>

Wanneer is dit handig?

  • Wanneer je vaste ticketstructuren wilt afdwingen
  • Als gebruikers alleen specifieke velden mogen invullen
  • Bij onboarding- of aanvraagformulieren
  • Wanneer je automatisch onderwerpregels wilt standaardiseren