Disabling the subject and description fields on the new request form in Help Center

Return to top
Have more questions? Submit a request

91 Comments

  • Socorro Fernandez

    Happy to hear it!

    Feel free to reach out if you need to tackle any others. Thanks again for sharing!

    1
  • Paul Bendzko

    All the above really helped me a lot, thanks. Hiding and again displaying the Description field is working fine now.

    What i try do is to simply only display a Text, if a certain point in a dropdown has been picked.

    E.g. when i have a tickbox or a word in a dropdown i want to display an info text only - is there any way?

    Thank you!

    0
  • Alex Gillum-Webb

    Hi Socorro,

     

    First of all thanks for your input here, its helped me greatly. I'm trying to get the field validation for a serial number in a submit a request form. Its working, however i'm unable to get focus back on the input box after clicking ok on the alert - it moves on to the next box.

    Code section:

     $("#request_custom_fields_360002836618").change(function () {
    var serialno = $('#request_custom_fields_360002836618').val();
    if(/[0-9][0-9]-[A-Z].[0-9][0-9][0-9][0-9]/.test(serialno)) {
    }
    else
    {
    alert('Please input a valid Product Serial Number');
    $("#request_custom_fields_360002836618").select(); //This will set the focus back to the field
    }
    });

    I've tried with focus too, which hasn't helped - as I understand, the script pauses until ok is clicked on the alert - been wracking my brain but can't find a way around it.

     

    Any pointers would be most appreciated!

     

    Cheers

     

     

     

    0
  • Socorro Fernandez

    Hi Alex,

    You are most welcome and glad to hear posts are helping out!

    It sounds like even the field fails the validation through the script and though we get the alert, its allowing users to still move on to the next field. This would be true because the script is looking for another change and the field did not change after the initial run of the script.

    A work around may be that we go ahead and clear the field if the validation fails so the user would need to add another value which will then have the script will run again. This would also allow the user to access other fields and so they are not locked to the serial number field and could go back to it when they are ready.

    All I am adding to your script is the line in bold which clears the field:

    $("#request_custom_fields_360002836618").change(function () {
    var serialno = $('#request_custom_fields_360002836618').val();
    if(/[0-9][0-9]-[A-Z].[0-9][0-9][0-9][0-9]/.test(serialno)) {
    }
    else
    {
    alert('Please input a valid Product Serial Number');
    $("#request_custom_fields_360002836618").val('');
    $("#request_custom_fields_360002836618").select(); //This will set the focus back to the field

    }
    });

     

    If you do not want this experience, please let me know and we can figure something out. Thank you!

    0
  • Socorro Fernandez

    Hi Paul,

    Glad to hear things are working out for you!

    As far as the text you want to display, do you want text to show in the ticket form? as an alert? please let me know what you would like, feel free to include some screenshots.

    0
  • Paul Bendzko

    Hey Socorro, thank you very much.

    I like to have it similar to the below one on my screenshot.

    Once i pick a topic in the dropdown, i just want, that a text is displayed to the end-user.

    0
  • Alex Gillum-Webb

    Hi Socorro,

    Thanks for the suggestion! Turns out the behaviour works as intended with Chrome (Version 76.0.3809.132) - focus stays on the correct window that failed validation, but it doesn't work on Firefox (68.0.2) where I was doing initial testing on - focus always moves on to the next field window, even after resetting the value.

    Should be able to work around this for intended use - but would you know of a simple resolution?

    I did have another query - I have 4 more field values that I want to perform validation on (if value is inputted only , as not all are required) - however in this instance, I want to validate that each one is different from the last.

    Ideally I wanted to do a check on all 4 fields after the 4th had been populated - however, there may only be 3 entries. I had been testing with the following code, checking each previous iterations for matches, but it you can force through the validation as it seems to only check once:

    // Validate Tamper serial 2 is unique from first
    $("#request_custom_fields_360002511197").change(function () {
    var tamper1 = $('#request_custom_fields_360002508358').val();
    var tamper2 = $('#request_custom_fields_360002511197').val();
    if (tamper1 != tamper2) {
    }
    else
    {
    alert('Duplicate Tamper Serial #2');
    $('#request_custom_fields_360002511197').select();
    }
    });
    // Validate Tamper serial 3 is unique from 1 and 2
    $("#request_custom_fields_360002508378").change(function () {
    var tamper1 = $('#request_custom_fields_360002508358').val();
    var tamper2 = $('#request_custom_fields_360002511197').val();
    var tamper3 = $('#request_custom_fields_360002508378').val();
    if (tamper1 != tamper2 && tamper1 != tamper3 && tamper2 != tamper3) {
    }
    else
    {
    alert('Duplicate Tamper Serial #3');
    $('#request_custom_fields_360002508378').select();
    }
    });
    // Validate Tamper serial 4 is unique from 1, 2 and 3
    $("#request_custom_fields_360002508378").change(function () {
    var tamper1 = $('#request_custom_fields_360002508358').val();
    var tamper2 = $('#request_custom_fields_360002511197').val();
    var tamper3 = $('#request_custom_fields_360002508378').val();
    var tamper4 = $('#request_custom_fields_360002511217').val();
    if (tamper1 != tamper2 && tamper1 != tamper3 && tamper1 != tamper4 && tamper2 != tamper3 && tamper2 != tamper4 && tamper3 != tamper4) {
    }
    else
    {
    alert('Duplicate Tamper Serial #4');
    $('#request_custom_fields_360002511217').select();
    }
    });

    Forgive the layman attempt! H

    How would you go about something like this? I suppose I could have another field that is a required field, inputted after these values, and have that trigger the validation of the 'Tamper label' fields?

    Once again - thanks for all your input so far.

    0
  • Tracy Scobba

    I have added the original sample code to the script.js file, but I see no change in my form. Am I doing it correctly? Do I need to also make a change to the new_request_page.hbs?

    The following is what I've done so far ... I'm a coding newbie and need a little hand-holding.

     

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Tracy,

    According to the article above, you should only need to edit the script page. Are you using a Legacy theme or the default Copenhagen theme? I'm rather limited on what I can assist with on my end but if you do have developers available you may want to get them involved here.

    Otherwise, we do have a professional services team that can customize your Help Center at an additional cost. If this is something you're interested in let me know and I can get you in touch with our account manager.

    Cheers!

    0
  • Tracy Scobba

    I am using the Copenhagen theme. Can you tell me if the code above looks correct ... directionally? :)

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Tracy,

    I myself am not a coder but I'll try reaching out to one of our Community Moderators to see if anyone can take a look.

    Cheers!

    0
  • Socorro Fernandez

    Hi Tracy and Brett,

    Tracy,

    I tested the script and I am confirming it still works in the script.js.

    On your screenshot, I believe you need to remove the curley bracket on line 23. This curley bracket is trying to close the document ready, voiding the rest of your scripts and possibly erroring which is why it may not be working.

    Let us know if it still doesnt work after. Thanks!

    0
  • Tracy Scobba

    Thanks, Brett! I figured it out. User error :)

    0
  • Brett Bowser
    Zendesk Community Team

    Glad to hear you were able to get this resolved Tracy :)

    0
  • Anthony DelCampo

    This is all great however, I think its silly to have to write code to remove simple fields. 

    If a company doesn't have a need for these "default" fields I think we should have the option to remove them. 


    0
  • Nicole S.
    Zendesk Community Team

    Thanks for that feedback, Anthony. I'd encourage you to post a request for that ability in the Support Product Feedback Topic. If you haven't posted a feedback request before, here are our tips on how to write an effective feedback post.

    0
  • Scott Patterson

    Hey there,

     

    I'm wondering if I could get some help setting up similar scripts as the users here, but instead of checking the value of a text box/dropdown in the criteria to show/hide things, instead query a checkbox or multi select field?

     

    Things seem to work fine if I am querying a text box or dropdown field, like this from Socorro's example from 06/10/18:

    $("#request_custom_fields_yourcustomfieldidhere").change(function() {   // Script will run if this field is changed
    if ($("#request_custom_fields_yourcustomfieldidhere").val() == "valueofcustomfield") {
    $('.request_description').show(); // Show description
    }
    });

     

    But using the same format to query a checkbox or multi-select field doesn't seem to work. I have tried storing the values of the checkbox/multi-select fields in a variable, and then checking the value of that so i can get an idea of how these fields work, but it seems like multi-select fields always have a blank value, and checkboxes always start with a value of "on" but this doesn't change if the state of the checkbox changes.

    I am wondering if multi-select fields store an array of some kind that could be queried? Though I'm not too sure how and my tests haven't been too fruitful. And I am a but stuck on the checkboxes too.

    Any help would be appreciated.


    Thanks,

    -SP

    0
  • Simon Celen

    Hi Scott,

    For checkboxes you can use the following:

    $('#request_custom_fields_checkboxfieldid').change(function() {
    if (this.checked) {
    // the checkbox is checked
    }
    });

    Multi-select fields are a bit more difficult:

    $('.request_custom_fields_multiselectfieldid .hc-multiselect-menu').click(function() {  // note that here we need .request_custom... not #request_custom...
    var values = [];
    $(this).prev().find('input').val(function(i, val) { values.push(val); });
    if (values.indexOf('myvalue') > -1) {
    // the multi-select has "myvalue" selected
    }
    });

     

    Hope that helps! If it doesn't seem to work, feel free to pass on the link to your Guide and I'll take a closer look.

    0
  • Samuel Mosher

    On my end, I am trying to disable the Submit button on a ticket form if a particular dropdown value is selected. I can get the button disabled well enough, but it appears that it is not re-evaluating when an option is chosen in the dropdown. Any thoughts?

    $(document).ready(function() {

    // Disable Submit
    $(':input[type="submit"]').prop('disabled', true)

    $("#request_custom_fields_123456").onchange {
    console.log("Field 1:", $(this).val())
    checkFieldsAndEnableSubmit()

    function checkFieldsAndEnableSubmit() {
    var selected = $('#request_custom_fields_123456').label();

    // Custom validation code here:
    if (selected == "Yes") {
    // Enable Submit
    $(':input[type="submit"]').prop('disabled', false)
    } else {
    $(':input[type="submit"]').prop('disabled', true)
    }

     

    0
  • Elanor Riley

    Samuel Mosher, it's possible that the code inside your $(document).ready is only seeing what's available in the DOM when the page loads. This is a common occurrence with more complex jQuery interactions. Your code also appears to be missing some closing tags which may be causing the issue.

    I would suggest modifying your code like so:

    $(document).ready(function() {

    // Disable Submit
    $(':input[type="submit"]').prop('disabled', true); // Semicolon needed here

    });

    $(document).on('change', '#request_custom_fields_123456', function() {
    // The difference between this and your original function call is
    // that this will apply to ANY item with the id of request_custom_fields_123456,
    // even if it is inserted into the DOM dynamically after page load
    // (which Zendesk may be doing).

    console.log("Field 1:", $(this).val()); // Make sure you have semicolons at the end of your lines!
    checkFieldsAndEnableSubmit();

    });

    function checkFieldsAndEnableSubmit() {
    var selected = $('#request_custom_fields_123456').label();

    // Custom validation code here:
    if (selected == "Yes") {
    // Enable Submit
    $(':input[type="submit"]').prop('disabled', false);
    } else {
    $(':input[type="submit"]').prop('disabled', true);
    } // You were missing this closing tag
    }
    1
  • Socorro Fernandez

    Hi Samuel,

    I have better luck with scripts when referencing the drop downs value tag rather than the label. Not to say you can't your code to work, I just went ahead and tried a new script and I was able to get the following to work based on your ask.

    It is only going to disable the submit button once the certain drop down field value is selected, otherwise it will enable if it does not equal that value:

     

    $("#request_custom_fields_dropdownfieldid").change(function() {
    if ($(this).val() == "dropdowntagvalue") {
    // Disable Submit
    $(':input[type="submit"]').prop('disabled', true);
    }
    else if ($(this).val() != "dropdowntagvalue"){
    //Enable Submit
    $(':input[type="submit"]').prop('disabled', false);
    }
    });

     

    Please let me know if you have any questions. 

    Thank you!

    1
  • Samuel Mosher

    Elanor Riley

    Thank you! That worked. I noted that the console was reflecting the values but that the button was not updating still. Changing

    var selected = $('#request_custom_fields_123456').label();

    to

    var selected = $('#request_custom_fields_123456').val();

    worked like a charm! I'm not a jQuery/JS expert by any means, and I appreciate your help and inline comments as well/

    1
  • Elanor Riley

    You're welcome! And yeah you're right I didn't even notice your use of .label() which isn't valid for jQuery, so that would totally explain why it wasn't working. Glad that we could help you find a solution :)

    0
  • Jamee Lewis

    Hi, 

    Hoping someone can help me. We are trying to hide the subject and description on just one of our forms and have them populate with details from the form upon submission.

    However, the description on other forms is being overridden when an employee submits their requests. Below is the code we have used:

    Any help would be great!! 

     

    //Form Submit

    $(document).submit(function() {

    //only run on specific form

    if (window.location.href == "https://INSERTDOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000041815")

    {

    //set a string to equal the custom field value

    var subjectstring1 = $("#request_custom_fields_360000255215").val();

    //set subject to equal a string including field value string

    $('#request_subject').val("Employee Departure" + " - " + subjectstring1);

    }

    {

     //set a string to equal the custom field value

    var subjectstring1 = $("#request_custom_fields_360000255215").val();

    //set description to equal a string including field value string

    $('#request_description').val("Employee Departure" + " - " + subjectstring1);

    }

    });

    //End Form Submit

     

      //adding a disclaimer

     

      var selected = $('#request_issue_type_select option:selected').text();

    if (selected == "Departure Request") {

    $('div.request_ticket_form_id').append('<p></p>');

      }

      //end disclaimer

     

      //hide system fields based on ticket forms (change subdomain and form id)

     if (window.location.href == "https://INSERTDOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000041815") { 

       $('#request_subject').val('"Employee Departure" + " - " + subjectstring1');

          $('#request_description').val('"Employee Departure" + " - " + subjectstring1');

          $('#request_subject').parent('.request_subject').hide();

          $('#request_description').parent('.request_description').hide();

    }

    0
  • Socorro Fernandez

    Hi Jamee Lewis

     

    It looks like the part of the code where it is updating the description is not within the if statement so its going to run for every form:

    //Form Submit

    $(document).submit(function() {

    //only run on specific form

    if (window.location.href == "https://INSERTDOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000041815")

    {

    //set a string to equal the custom field value

    var subjectstring1 = $("#request_custom_fields_360000255215").val();

    //set subject to equal a string including field value string

    $('#request_subject').val("Employee Departure" + " - " + subjectstring1);

    }

    {

     //set a string to equal the custom field value

    var subjectstring1 = $("#request_custom_fields_360000255215").val();

    //set description to equal a string including field value string

    $('#request_description').val("Employee Departure" + " - " + subjectstring1);

    }

    });

    //End Form Submit

     

    I believe you would want to move the update description field portion within the if statement where you are updating the subject field with the custom field value and it should resolve that issue. Here is just the form submit update that worked with testing on my end:

    //Form Submit

    $(document).submit(function() {

    //only run on specific form

    if (window.location.href == "https://INSERTDOMAIN.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000041815")

    {

    //set a string to equal the custom field value

    var subjectstring1 = $("#request_custom_fields_360000255215").val();

    //set subject to equal a string including field value string

    $('#request_subject').val("Employee Departure" + " - " + subjectstring1);

    //set description to equal a string including field value string

    $('#request_description').val("Employee Departure" + " - " + subjectstring1);

    }

    });

    //End Form Submit

    Please let me know if you have any questions or run into any other issues

    0
  • Juan Espinosa

    Hi There Socorro Fernandez 

     

    Hope you are able to help, is there a code i can enter on our script.js to customize the description to our users on our Description box? 

     

    Thanks for your help! 

    0
  • Dave Foster

    There's one thing that is a big downer about using this code to hide the system fields. If you have any Required Fields, and the customer doesn't fill it out, once the system reloads the page to show the warning that the field cannot be blank (or whatever the requirement is), it drops the ticket form id from the URL. Once this happens, all the hidden fields will show back up, including any custom text you've added to said fields.

    0
  • Doug Shaner

    I was able to successfully hide and auto fill several system fields, but I'm having trouble with custom fields.  

     

    Here is the code I used to hide a custom drop down field:

    Hide category
    $(document).ready(function() {
    $(".request_custom_fields_360024163811").hide();
    });

     

    Hiding it works, but I can't figure out how to auto populate this field.  I've tried things like the following with no luck:

    $('#request_custom_fields_360024163811').val('Equipment Request'); // autofill category

    Can someone tell me how to set this drop down field to a pre-defined value?

     

    Thank you!

     

    0
  • Ed Ball

    So working with the below code I was able to get it working with a couple issues. First issue is I do not want to change the description at all. But i can not remove that part without all of it breaking. It just does nothing if I remove the 'set description' part.

    I just want the Subject to be replaced with the contents of the custom field. But even with that part of this it seems to be showing the tag of the item selected  and not the label value. The customer can see the subject, so of course i do not want the tag showing.

    How do I remove the description part and show the Value in the Subject and not the tag for it?

    //Form Submit
    $(document).submit(function() {

    //only run on specific form
    if (window.location.href == "http://(brandx).zendesk.com/hc/en-us/requests/new?ticket_form_id=360001458394")
    {

    //set a string to equal the custom field value
    var subjectstring1 = $("#request_custom_fields_360041921694").val();

    //set subject to equal a string including field value string
    $('#request_subject').val("Rollback" + " - " + subjectstring1);

    //set description to equal a string including field value string
    $('#request_description').val("Rollback" + " - " + subjectstring1);
    }
    });

    //End Form Submit

    0
  • Sirin Sezer

    Hello

    How am I going to do this in V2 without jQuery?

    0

Please sign in to leave a comment.

Powered by Zendesk