You are viewing limited content. For full access, please sign in.

Question

Question

Added text information in text box fields not showing after submission. (FORMS)

asked on September 14, 2022 Show version history

So, a customer wanted a text box on a radio dial field/s to input information. I was able to add the text boxes, however when the form is submitted, it is blank when submitted or stored in the repository. Below is the JS that I'm using. 

 

$(document).ready(function() {
    //add field textbox
    $("input[id^=Field14-0]").next("label").after(" " + "<input id='scantron' type='text' />");
    $("input[id^=Field14-3]").next("label").after(" " + "<input id='testPassword' type='text' />");
    $("input[id^=Field15-3]").next("label").after(" " + "<input id='deliveredAdministrativeAssistant' type='text' />");
    $("input[id^=Field15-2]").next("label").after(" " + "<input id='deliveredtooffice' type='text' />");

    //add field class
    $("#scantron").addClass("singleline cf-small");
    $("#testPassword").addClass("singleline cf-small");
    $("#deliveredAdministrativeAssistant").addClass("singleline cf-small");
    $("#deliveredtooffice").addClass("singleline cf-small");

    //add field attributes
    $("#scantron").attr("readonly", true);
    $("#testPassword").attr("readonly", true);
    $("#deliveredAdministrativeAssistant").attr("readonly", true); 
    $("#deliveredtooffice").attr("readonly", true);
  
//make field value NOT readonly
    $(".appearancechoice").change(function() {
        if ($("input[id^=Field14-0]").is(':checked')) {
            $("#scantron").attr("readonly", false);
        } else {
            $("#scantron").attr("readonly", false);
        }
    });

    //make field value NOT readonly
    $(".appearancechoice").change(function() {
        if ($("input[id^=Field14-3]").is(':checked')) {
            $("#testPassword").attr("readonly", false);
        } else {
            $("#testPassword").attr("readonly", false);
        }
    });

     //make field value NOT readonly
    $(".appearancechoice").change(function() {
        if ($("input[id^=Field15-3]").is(':checked')) {
            $("#deliveredtooffice").attr("readonly", false);
        } else {
            $("#deliveredtooffice").attr("readonly", false);
        }
    });

    //make field value NOT readonly
    $(".appearancechoice").change(function() {
        if ($("input[id^=Field15-3]").is(':checked')) {
            $("#deliveredAdministrativeAssistant").attr("readonly", false);
        } else {
            $("#deliveredAdministrativeAssistant").attr("readonly", false);
        }
    });

0 0

Replies

replied on September 14, 2022

This is not going to work. HTML changes are not captured by form submissions, even if they contain input elements, because they're not mapped to any field variables.

Think about it this way, anyone can run JavaScript from a browser console meaning you could do something like changing the title/header of the form or changing other verbiage/logos and you wouldn't want client-side actions like that to affect your final form.

If you want that added data to be captured, you have to store the values in actual variable fields, and if you want to add custom HTML elements via JavaScript, the code would need to run every time the form is loaded, and different variations would need to run for readonly copies like the ones shown in the history or when saved to the repository.

You'd be much better off adding actual fields in the form designer and getting fancy with CSS to put them next to the radio buttons.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.