@uditk Simple layout behaves different and does not support jQuery by default. Questions are maybe also set up with different IDs, elements and styles as the other layouts. 

The question ID is e.g., defined like “question-QID10”. 

Here is the code you have to put in the header of your survey (via the HTML editor <>) for loading JQuery with simple layout:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

And as JavaScript for your questions either try this: 

jQuery("#question-"+this.questionId+" input+type='text']").attr('type', 'tel');

Or this: 

jQuery("#question-"+this.questionId+" .text-input").attr('type', 'tel');

Best
Christian

Thank you for the speedy response!

I ended up taking some of your code and using my brother’s inputs (he shared pure JS version of your code). That way I didn’t have to put anything in the header, reducing additional script calls.

This is the code I used for each question:

try {
    document.querySelectorAll("#question-"+this.questionId+" .text-input").forEach(el => {
        el.setAttribute("type", "tel");
    });
} catch (err) { console.log(err); }	

It works!

I’m having a similar problem with the new Simple layout.

I had this custom code to transform a text field into a drop-down but it seems like the new Simple layout is not accepting the information parsed in the field from a drop down.

Any clue what may need to be amended in the code?
 

Qualtrics.SurveyEngine.addOnload(function() {

    // Define German title options


    var options = s"--- Bitte wählen Sie eine ---", "Herr", "Frau", "Dr.", "Prof.", "Prof. Dr.", "Dipl.-Ing.", "Dipl.-Kfm.", "Magister", "Bachelor", "Master"];

    // Locate the input field by its specific ID


    var field = document.getElementById("form-text-input-QID5-25");
    if (field) {

        // Create a select element


        var select = document.createElement("select");
        select.id = field.id;
        select.name = field.name;

        // Set various styles for the select element

        select.style.width = "31.25rem"; // Set width to 31.25rem
        select.style.height = "3.125rem"; // Set height to 35px (or as desired)
        select.style.border = "0.0625rem solid"; // Set border thickness to 0.0625rem solid
        select.style.padding = "1rem"; // Add padding of 1rem
        select.style.borderRadius = "0.25rem"; // Set border-radius to 0.25rem
        select.style.lineHeight = "1.375"; // Set line-height to 1.375
        select.style.marginRight = "0.625rem"; // Add margin-right of 0.625rem
        select.style.fontFamily = 'var(--font-family, "72", "Helvetica Neue", Helvetica, Arial, sans-serif)'; // Set font-family
        select.style.fontSize = 'var(--answer-text-size, 1rem)'; // Set font-size to 1rem or variable

        // Populate the select element with options

 options.forEach(function(optionText) {
            var option = document.createElement("option");
            option.value = optionText;
            option.text = optionText;
            select.appendChild(option);
        });

        // Insert the select element before the original input field

        field.parentNode.insertBefore(select, field);

        // Hide the original input field

field.style.display = "none";

        // Update the hidden input field's value when the dropdown selection changes

        select.addEventListener("change", function() {
            field.value = select.value;
        });
    }
});