Prefill and hide Subject & Description fields of specific form on New Request Template

Hi Noelle Cheng,

Working with custom dropdown values is not easy, I've tried so many times but didn't get any results :(   I hope someone else can help you in this case. 

Thanks

HI 1263169183150 it doesn't seem to be working. The custom field is a dropdown selection, I noticed that you mentioned if we write something it would updated but since this custom field is not a text field and is a dropdown, would something need to be different? See below. The subject and description shows the text but when the “What would you like to request?” field is selected the subject and description don't update. It should update to the following once that field selection is made.

SUBJECT: Add Processor Portal Credential Request

DESCRIPTION: Add Processor request

Here is the before and after:

BEFORE

AFTER

There looks like there is an issue

Bonjour 1263169183150 , 

J'ai suivi vos indications mais je n'arrive pas a ajouter aux champs “Sujet” et Description" la notion suivante : Demande de création de compte de (champ Nom) (Champ prénom) :

Mon script JS : 

  // Vérifie si l'URL contient le numéro spécifique du formulaire
 if (window.location.href.indexOf("18445823651613") > -1) { 
     // Cacher les éléments du formulaire
    document.querySelector('.request_subject').style.display = "none";
     document.querySelector('.request_description').style.display = "none"; 
     document.querySelector('.request_cc_emails').style.display = "none";   
     
     // Sélection de l'élément conteneur des pièces jointes
     var uploadContainer = document.querySelector('#upload-dropzone');
     // Cacher l'élément conteneur des pièces jointes
     uploadContainer.style.display = "none";
     
     // Sélection de l'élément contenant le libellé des pièces jointes
     var labelElement = document.querySelector('label[for="request-attachments"]');
     // Cacher l'élément contenant le libellé des pièces jointes
     labelElement.style.display = "none"; 
     
     // Ajouter les titres aux champs du formulaire
     // Titre pour les champs identité
     var nomUtilisateurTitle = document.createElement('h3');
     nomUtilisateurTitle.textContent = 'Identité :';
     nomUtilisateurTitle.id = 'titre_nom_utilisateur';
     document.querySelector('.request_custom_fields_18445875745437').parentNode.insertBefore(nomUtilisateurTitle, document.querySelector('.request_custom_fields_18445875745437'));

     // Ajouter un saut de ligne avant le titre Nom et prénom du manager
     var lineBreak = document.createElement('br');
     document.querySelector('.request_custom_fields_18460920253469').parentNode.insertBefore(lineBreak, document.querySelector('.request_custom_fields_18460920253469'));

     // Titre pour le champ Materiel Necessaire
     var nomMaterielNecessaireTitle = document.createElement('h3');
     nomMaterielNecessaireTitle.textContent = 'Materiels et applications nécéssaires :';
     nomMaterielNecessaireTitle.id = 'titre_nom_prenom_manager';
     document.querySelector('.request_custom_fields_18460920253469').parentNode.insertBefore(nomMaterielNecessaireTitle, document.querySelector('.request_custom_fields_18460920253469'));
     
     // Préremplissage des champs "sujet" et "description"
     var nom = document.querySelector('.request_custom_fields_18445875745437 input').value;
     var prenom = document.querySelector('.request_custom_fields_18445894528285 input').value;
     var sujet = "Création d'un compte siège - " + nom + " " + prenom;
     var description = "Création d'un compte siège - " + nom + " " + prenom;
     document.querySelector('.request_subject input').value = sujet;
     document.querySelector('.request_description textarea').value = description;
   
 };

Pouvez vous m'aider ? 

Edit : je suis finalement passer comme cela :

$(document).ready(function() {
   var ticketForm = location.search.split('ticket_form_id=')[1];
   if(ticketForm == 18445823651613) {
   // Ajouter des titres aux champs
   $('.form-field.request_custom_fields_18445875745437').prepend('<h2>Identité :</h2>');
   $('.form-field.request_custom_fields_18460920253469').prepend('<h2>Materiels et applications nécéssaires :</h2>');
 
   // Masquer les champs de sujet et de description
   $('.form-field.string.optional.request_subject').hide();
   $('.form-field.string.required.request_subject').hide();
   $('.form-field.request_description').hide();
   $('.form-field.string.optional.request_cc_emails').hide();// Masquer les CC
   $('.form-field label:contains("Pièces jointes")').hide(); // Masquer l'étiquette des pièces jointes
        $('#upload-dropzone').hide(); // Masquer la boîte de téléchargement des pièces jointes
 
   // Récupérer les valeurs des champs Nom et Prénom de l'utilisateur
   var nom = $('.form-field.request_custom_fields_18445875745437 input').val();
   var prenom = $('.form-field.request_custom_fields_18445894528285 input').val();
 
   // Concaténer les valeurs dans le sujet et la description
   var sujet = 'Demande de création du compte de ' + nom + ' ' + prenom;
   var description = 'Demande de création du compte de ' + nom + ' ' + prenom;
 
   // Remplir automatiquement les champs de sujet et de description
   $('#request_subject').val(sujet);
   $('#request_description').val(description);
}

Et c'est Ok ! 

Par contre, est il possible de masquer un formulaire dans la liste déroulante tout en gardant un raccourcis dans l'en-tête ? 

Merci par avance pour vos retours !

@Noelle,

This is the exact code that you want, when you write something in your custom text field the subject and description will pick that text automatically, please test once.

 If not work then check the console, if you find any error let me know.

  //hide subject-description and autofill subject-description on submission for form

 if ($("#request_issue_type_select").val() == "TicketFormID") {
   $("#request_subject").val("Test Subject");
   $('#request_description').val("Test Description");
   $("#request_custom_fields_FieldID").keyup(function(event) {
   var stt = $(this).val();
      $("#request_subject").val(stt + " New Request");
      $('#request_description').val( + ' ' + stt +'Request for');
 });

 };

5032358800410 , please compare the code I have fixed it for you

  document.addEventListener('DOMContentLoaded', function() {
 // Custom field you want to listen
 var selectElement = document.getElementById('request_custom_fields_12368015596316');

 // Subject and Description fields
 var sujetField = document.querySelector('.request_subject');
 var commentaireField = document.querySelector('.request_description');

 // Function to hide Subject and Description fields
 function masquerChamps() {
   sujetField.classList.add('masque');
   commentaireField.classList.add('masque');
 }

 // Function to show Subject and Description fields
 function afficherChamps() {
   sujetField.classList.remove('masque');
   commentaireField.classList.remove('masque');
 }

 // Listen to the changes in the custom ticket field
 selectElement.addEventListener('change', function() {
   var valeurSelectionnee = selectElement.value;
   // For a specific value, hide Subject and Description fields and auto fill with text
   if (valeurSelectionnee === 'désinscription_à_la_newsletter_et_sms') {
         sujetField.querySelector('input').value = 'test subject';
     commentaireField.querySelector('textarea').value = 'test description';
     masquerChamps();
   } else {
     sujetField.querySelector('input').value = ''
     commentaireField.querySelector('textarea').value = 'test description';
     afficherChamps();
   }
 });
});

1263169183150 When I do this, the subject and description fields are no longer hidden, whereas they were before, and my text 'test' increments properly in the subject field, but nothing in the description field.

hi 1263169183150 I added your code but now the incorrect values is showing in the fields. It used to say undefined and then the custom text but not the subject is saying new request and the description is blank. I have the updated jQuery in the document_head.hbs but it looks like your code requirement is javascript for this. I don't know if this matters, but also all my code uses ' and not " is that the issue?

Here is the code I entered.

Change the class to ID in your script code because there is only      id=request_description

 var commentaireField = document.querySelector('.request_description');
 
 TO 
 
 var commentaireField = document.querySelector('#request_description');

1263169183150  I'm still experiencing the same issue. The fields are hidden, but when I attempt to submit a ticket, I receive an error message. I can see that the subject worked, but not the description. Perhaps the issue lies with the following line ? : commentaireField.querySelector('input').value = 'test commentaire'

 // Listen to the changes in the custom ticket field
  selectElement.addEventListener('change', function() {
    var valeurSelectionnee = selectElement.value;
    // For a specific value, hide Subject and Description fields and auto fill with text
    if (valeurSelectionnee === 'désinscription_à_la_newsletter_et_sms') {
  		sujetField.querySelector('input').value = 'test subject'
  		commentaireField.querySelector('input').value = 'test commentaire'
      masquerChamps();
    } else {
  	sujetField.querySelector('input').value = ''
  	commentaireField.querySelector('input').value = ''
      afficherChamps();
    }
  });
});
</script>

Hi Henri,

You need to do the same as I mentioned above, go to your new_request_page.hbs file and set ‘wysiwyg=true’  to 'wysiwyg=false'.

Ex.