Displaying symbols before and after text entry fields in one column only

MatthewM
MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭
edited July 20 in Custom Code

Hi,

I have a survey where nearly every question collects monetary data. I would like to display a dollar sign before the text entry field, and ".00" after each field. I am able to use the following Javascript where I have a single column of text fields.

However, I have a couple of questions where there is more than column, and a column in the grid collects numerical but non-monetary data. I also have questions with a single column, with a text entry field on the last line.

In these cases the Javascript displays the dollar sign and cents where I don't want them to appear. Is there any way I can adjust the Javascript so the symbols do not appear in the first column?

Best Answers

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    Accepted Answer

    Try replacing the relevant lines with these:

    let target_cell = this_row.cells[1].querySelector(".SumTotal") || this_row.cells[1];
    target_cell.insertAdjacentHTML("afterbegin", "$");
    target_cell.insertAdjacentHTML("beforeend", ".00");
    
  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    Accepted Answer

    No. You weren't wrong, its just that the constant sum question is structured differently.

    I would therefore recommend moving to a matrix style question for consistency (i.e. code reuse).

    Here's something that should work for you;

    Qualtrics.SurveyEngine.addOnReady(function () {
        let all_rows = this.questionContainer.querySelectorAll("li");
    
    
        for (let i = 0; i < all_rows.length; i++) {
            let input_el = all_rows[i].querySelector("[class*='Sum'] input");
            input_el.insertAdjacentHTML("beforebegin", "$");
            input_el.insertAdjacentHTML("afterend", ".00");
            input_el.style.width = "100px";
        }
    });
    

    Result:


«1

Answers

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    Qualtrics.SurveyEngine.addOnReady(function () {
        // Get all the rows in the table body, i.e. excluding headers
        let all_rows = document.querySelectorAll("tbody tr");
    
        // Change it all_rows.length - 1, if you want to skip the totals row
        for (let i = 0; i < all_rows.length; i++) {
            let this_row = all_rows[i]; // Get the row
    
            // Get the relevant cell. Index starts from '0', but that stores statements
            // So, first input cell will be at location '1'
            // Suppose you only want to add it to the second cell
            // Not using 'input' here, as we want to add text before and after it
            this_row.cells[2].insertAdjacentHTML("afterbegin", "$");
            this_row.cells[2].insertAdjacentHTML("beforeend", ".00");
    
            // To add something to all cells in the row
            // Again, start from '1' to skip the statement column
            for (let j = 1; j < this_row.cells.length; j++) {
                // Using 'input' here, as we want to change it's style and not that of the cell
                this_row.cells[j].querySelector("input").style.width = "100px";
            }
        }
    });
    


    I've added some comments so that you can understand what's happening, and customize it further.

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Thank you @ahmedA for the code and additional comments. I can't seem to get it to work as is in either a Constant Sum type question, or Matrix-Constant Sum question; neither the dollar sign nor the cents display, and the field width appears to be the default size. I'll try to see if I can understand the code better and get it to work in my questions, but I appreciate the time you took to assist.

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Do you have any additional JS? For debugging, the starting point is to open the console (ctrl+shift+i). Since the code isn't executing, it must be throwing an error (in red).

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Thanks for your reply. Correction, it looks like the code IS executing, just not where I expected it to. I applied it to Question 7 in the image below, but it's showing up in the first row of the question above it. The image captures it with the Javascript I had in Question 6, but this still happens even after I removed Javascript from Q6 and all of the other questions in that block of the survey.


  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭
    1. This may be due to some code you have in your header.
    2. If not, please share the survey preview link of the question.
  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Thanks. I had some html in the Look & Feel header for the project title, and also used a custom Theme. But removing both of those does not change anything.

    Here's a preview of the block if you are willing to take a look at it. https://surveys.ada.org/jfe/preview/SV_78wHq9SxrV6uGs6/BL_2beXWHnMRtwnp9r?Q_SurveyVersionID=current

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Please change this line:

    let all_rows = document.querySelectorAll("tbody tr");
    

    To:

    let all_rows = this.questionContainer.querySelectorAll("tbody tr");
    

    This will ensure that the code works on per question basis. This give you more control, but with the overhead that you'll need to add JS to each question you want to customize.

    The reason why the code isn't working for Q7 is that, there is no statement row, so instead of this_row.cells[2] you need to use this_row.cells[1]

    Please see if these changes get it to work.

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Thank you! It's getting there. The symbols appear where they should be in the entry fields, but not in the read-only Total line.


  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Thank you, that worked for my Matrix-Constant Sum question! Can this code be adapted to a Constant Sum question where I have a text entry field on the last line, that I don't want the dollar sign and cents to appear around? (See line 5 in the example below.)


  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    I think you are using a combination of codes. With the code that I had provided, this shouldn't happen.

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    I just used an example of the previous code I found somewhere else for illustration purposes. When I tried to apply variations of the working code you provided (thank you again), nothing appears; see below. It seems like the code might not be executing, but I don't detect any errors when I debug.


  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Please share the preview link and the code you are using.

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Here's a block preview. https://surveys.ada.org/jfe/preview/SV_78wHq9SxrV6uGs6/BL_7PpX8TMKx5dQLcx?Q_SurveyVersionID=current

    In Question 10a I've applied most of the different variations of the code you shared above. This is the latest one I tried in the block preview above. Sorry for taking up your time, I'm probably too Javascript-illiterate to be trying to do this.

    Qualtrics.SurveyEngine.addOnReady(function () {

      // Get all the rows in the table body, i.e. excluding headers

    let all_rows = this.questionContainer.querySelectorAll("tbody tr");


      // Change it all_rows.length - 1, if you want to skip the totals row

      for (let i = 0; i < all_rows.length; i++) {

        let this_row = all_rows[i]; // Get the row


        // Get the relevant cell. Index starts from '0', but that stores statements

        // So, first input cell will be at location '1'

        // Suppose you only want to add it to the second cell

        // Not using 'input' here, as we want to add text before and after it

        this_row.cells[1].insertAdjacentHTML("afterbegin", "$");

        this_row.cells[1].insertAdjacentHTML("beforeend", ".00");

        // To add something to all cells in the row

        // Again, start from '1' to skip the statement column

        for (let j = 1; j < this_row.cells.length; j++) {

          // Using 'input' here, as we want to change it's style and not that of the cell

          this_row.cells[j].querySelector("input").style.width = "100px";

        }

      }

    });

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Thanks. I was afraid that the Constant Sum question was structured differently. I'm kind of locked into using Constant Sum for the questions in this block because it's the only question type I know of that will allow me to pipe the Total value into an entry field several blocks later in the survey. What I might do instead is to remove the Other write-in field in line 5 to a separate object altogether, and use code I have from an earlier iteration of this survey (and worked) to make the dollars and cents appear in the Constant Sum questions.

    But I do appreciate the time and patience in helping me perfect a solution for the Matrix question; that was a major hurdle I could not get through the past two years I've set up this project. If you had a tip jar, I would make a contribution!

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    Thank you @MatthewM you too kind, I'm glad we reached a solution.

    A tip won't be necessary for this, if you ever have commercial work you can get in touch with me at www.survey-awesome.com

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    Sorry to bug you again, but I'm trying to get this last bit of code you shared to work in Question 1a at the link below. I must either be missing something, or the code doesn't work the same way in a Matrix that doesn't have a text field in the first column.


    https://surveys.ada.org/jfe/preview/SV_78wHq9SxrV6uGs6/BL_6y62dEM2v4powJv?Q_SurveyVersionID=current

  • ahmedA
    ahmedA IndiaCommunity Member, XMPN Member Wizard ✭✭✭✭✭

    @MatthewM I'm going to let you figure this one out, since I've already answered the question earlier.

  • MatthewM
    MatthewM Chicago, ILCommunity Member, Qualtrics Brand Admin Superuser ✭✭✭✭

    OK, I guess it must be because the questions I tried to use them on don't have a text entry field in the first column.