Forms Classic Javascript on Save to repository

asked on May 27

I have a checkbox field and have added additional input boxes where the user can enter the funding amount if they check each option. I am saving these values in fields below in case I need that to make this work with js.

After I submit, the values are erased from the fields I added through js. I understand that the inputs are converted to divs, but when I inspect the submitted form CSS they still appear to me as inputs.

Here's my entire Javascript, any help would be appreciated!


$(document).ready(function () {

  $("input[id^=Field28-0]").next("label").after(" $ " + "<input type='text' id='CMAQ' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#CMAQ").css("margin-top","0px");
  $("#CMAQ").attr("readonly",true);
  
  $("input[id^=Field28-1]").next("label").after(" $ " + "<input type='text' id='MPO' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#MPO").css("margin-top","0px");
  $("#MPO").attr("readonly",true);
  
  $("input[id^=Field28-2]").next("label").after(" $ " + "<input type='text' id='UDOT' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#UDOT").css("margin-top","0px");
  $("#UDOT").attr("readonly",true);
  
  $("input[id^=Field28-3]").next("label").after(" $ " + "<input type='text' id='TTIF' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#TTIF").css("margin-top","0px");
  $("#TTIF").attr("readonly",true);
  
  $("input[id^=Field28-4]").next("label").after(" $ " + "<input type='text' id='FTAD' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#FTAD").css("margin-top","0px");
  $("#FTAD").attr("readonly",true);
  
  $("input[id^=Field28-5").next("label").after(" $ " + "<input type='text' id='FTAF' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#FTAF").css("margin-top","0px");
  $("#FTAF").attr("readonly",true);
  
  $("input[id^=Field28-6").next("label").after(" $ " + "<input type='text' id='Local' class='number currency cf-small' maxlength='4000' vo='e' currencyformat='USD' separator-disabled='false' data-parsley-valid-format='number' data-parsley-id='17'/>");
  $("#Local").css("margin-top","0px");
  $("#Local").attr("readonly",true);
  
  $(".fundChoice").change(function () {
    var valC;
    if ($("input[id^=Field28-0]").is(':checked')) {
      valC = $("#CMAQ").val();
        $("#CMAQ").attr("readonly",false);
      	$('#q64 input').val(valC);
    } else {
        $("#CMAQ").attr("readonly",true);
    }
    if ($("input[id^=Field28-1]").is(':checked')) {
      valC = $("#MPO").val();
        $("#MPO").attr("readonly",false);
      	$('#q65 input').val(valC);
    } else {
        $("#MPO").attr("readonly",true);
    } 
    if ($("input[id^=Field28-2]").is(':checked')) {
      valC = $("#UDOT").val();
        $("#UDOT").attr("readonly",false);
      	$('#q66 input').val(valC);
    } else {
        $("#UDOT").attr("readonly",true);
    }
    if ($("input[id^=Field28-3]").is(':checked')) {
      valC = $("#TTIF").val();
        $("#TTIF").attr("readonly",false);
      	$('#q67 input').val(valC);
    } else {
        $("#TTIF").attr("readonly",true);
    }
    if ($("input[id^=Field28-4]").is(':checked')) {
      valC = $("#FTAD").val();
        $("#FTAD").attr("readonly",false);
      	$('#q68 input').val(valC);
    } else {
        $("#FTAD").attr("readonly",true);
    }
    if ($("input[id^=Field28-5]").is(':checked')) {
      valC = $("#FTAF").val();
        $("#FTAF").attr("readonly",false);
      	$('#q69 input').val(valC);
    } else {
        $("#FTAF").attr("readonly",true);
    }
   	if ($("input[id^=Field28-6]").is(':checked')) {
      valC = $("#Local").val();
        $("#Local").attr("readonly",false);
      	$('#q70 input').val(valC);
    } else {
        $("#Local").attr("readonly",true);
    }
    
  });
  
})

0 0

SELECTED ANSWER

replied on May 28

You are creating custom fields, and doing well to copy their values into fields that are stored after submission, since the custom fields do not save. But it doesn't look like you are copying the values back into your custom fields after the submission. That's the part you are missing with your current script.

That said - I think there is a better way to do it. Rather than create custom fields that we need to sync with the built-in fields - why don't we move the built-in fields where we want them?

The following has been tested in the Classic Designer on Version 11.0.2311.50556.

Here's how I've set-up the fields on the Layout page (I've included some text on each one regarding the CSS Class Names that have been used in the Javascript).

The Javascript below assumes that the number fields are all small size on the layout page (it uses the cf-small class from them). I used number fields, but currency fields should work too, they just need to be small size.

The Javascript below is also dependant upon the values I have listed on the Funding Source checkbox - I have them listed as: CMAQ, MPO, UDOT, TTIF, FTA_Disc, FTA_Form, Local, Local_Partner

The form uses this CSS to tweak the number fields when they are added after the checkboxes.

/*Handle the formatting of the number fields when they
are placed to the side of the checkboxes.*/
.fundingSourceNumbers.ro {
  display: inline-block!important;
}
.fundingSourceNumbers {
  margin-top: 0px!important;
  margin-left: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
}

And here is the Javascript that actually moves the number fields to the side of the checkbox labels:

$(document).ready(function() {
  
  //Declare variables that will be used below.
  var myFields = [{theClass: 'Funding_CMAQ', theValue: 'CMAQ'}, 
                  {theClass: 'Funding_MPO', theValue: 'MPO'}, 
                  {theClass: 'Funding_UDOT', theValue: 'UDOT'}, 
                  {theClass: 'Funding_TTIF', theValue: 'TTIF'}, 
                  {theClass: 'Funding_FTA_Disc', theValue: 'FTA_Disc'}, 
                  {theClass: 'Funding_FTA_Form', theValue: 'FTA_Form'}, 
                  {theClass: 'Funding_Local', theValue: 'Local'}];
  
  //Move the number fields after the labels on the checkboxes.
  myFields.forEach(function(element) {
    var theField = $('.' + element.theClass + ' .cf-field .cf-small');
    $(theField).addClass('fundingSourceNumbers');
    $('.funding_source input[value="' + element.theValue + '"]').next("label").after(theField);
    $('.' + element.theClass).hide();
  });
  
});

The end result looks like this on the in-progress form:

and like this on the completed form:

I hope that helps!

3 0

View 1 previous reply

replied on May 30 • Show version history

Thanks Matthew, I implemented those changes and it works great! Now I am trying to set/remove the read-only attribute to allow the $ value to be entered when the checkbox nearest is selected. Within the myFields.forEach function, I added the last line to set the fields as read only.

  myFields.forEach(function(element) {
    var theField = $('.' + element.theClass + ' .cf-field .cf-small');
    $(theField).addClass('fundingSourceNumbers');
    $('.funding_source input[value="' + element.theValue + '"]').next("label").after(theField);
    $('.' + element.theClass).hide();
    $(theField).attr({'readonly': 'True', 'backend-readonly': 'True'})
  });

Then I was trying to add a .funding_source on change function to set the field to read-only: false if the checkbox is checked.

  $(".funding_source").change(function () {
    if ($("input[id^=Field28-0]").is(':checked')) {
        $(this).closest('input').attr({'readonly': 'False', 'backend-readonly': 'False'})
    } else {
    }

Couldn't get this to work as I was expecting, what am I doing wrong?

0 0

replied on May 30 • Show version history

You are missing some semi-colons, and that second example is missing the closure of the change event function - I didn't know if that was a typo or just not including all of the code here.

Also, I believe on the read-only attributes we need to remove them rather than set them to false.

Finally, I would recommend writing the code so that you don't have to list out each specific checkbox.

There are a couple different ways we can handle this, and I have confirmed they are both working in my copy.

Option 1 - We set-up the change event function separate from our existing function that moved the fields - we can't rely on the variables we used before since the fields have moved out of their original location - but we can still use the fundingSourceNumbers function that we added to the fields in the other function.

$(document).ready(function() {
  
  //Declare variables that will be used below.
  var myFields = [{theClass: 'Funding_CMAQ', theValue: 'CMAQ'}, 
                  {theClass: 'Funding_MPO', theValue: 'MPO'}, 
                  {theClass: 'Funding_UDOT', theValue: 'UDOT'}, 
                  {theClass: 'Funding_TTIF', theValue: 'TTIF'}, 
                  {theClass: 'Funding_FTA_Disc', theValue: 'FTA_Disc'}, 
                  {theClass: 'Funding_FTA_Form', theValue: 'FTA_Form'}, 
                  {theClass: 'Funding_Local', theValue: 'Local'}];
  
  //Move the number fields after the labels on the checkboxes.
  myFields.forEach(function(element) {
    var theField = $('.' + element.theClass + ' .cf-field .cf-small');
    $(theField).addClass('fundingSourceNumbers');
    $('.funding_source input[value="' + element.theValue + '"]').next('label').after(theField);
    $('.' + element.theClass).hide();
    $(theField).attr({'readonly': 'True', 'backend-readonly': 'True'});
  });
  
  //When the checkboxes are marked, enable the number fields next to them, 
  //otherwise they are disabled.
  $('.funding_source input').change(function () {
    if($(this).is(':checked')) {
      $(this).parent().find('.fundingSourceNumbers').removeAttr('readonly').removeAttr('backend-readonly');
    }
    else {
      $(this).parent().find('.fundingSourceNumbers').attr({'readonly': 'True', 'backend-readonly': 'True'});
    }
  });
  
});

Option 2 - This might feel weirder than option 1, but it allows us to use the variables from the function that moved the fields before, because we're putting the change event function inside that other function, while those variables are still in place.

$(document).ready(function() {
  
  //Declare variables that will be used below.
  var myFields = [{theClass: 'Funding_CMAQ', theValue: 'CMAQ'}, 
                  {theClass: 'Funding_MPO', theValue: 'MPO'}, 
                  {theClass: 'Funding_UDOT', theValue: 'UDOT'}, 
                  {theClass: 'Funding_TTIF', theValue: 'TTIF'}, 
                  {theClass: 'Funding_FTA_Disc', theValue: 'FTA_Disc'}, 
                  {theClass: 'Funding_FTA_Form', theValue: 'FTA_Form'}, 
                  {theClass: 'Funding_Local', theValue: 'Local'}];
  
  //Move the number fields after the labels on the checkboxes.
  //Enable or Disable them based on the checkbox status.
  myFields.forEach(function(element) {
    var theField = $('.' + element.theClass + ' .cf-field .cf-small');
    $(theField).addClass('fundingSourceNumbers');
    $('.funding_source input[value="' + element.theValue + '"]').next('label').after(theField);
    $('.' + element.theClass).hide();
    $(theField).attr({'readonly': 'True', 'backend-readonly': 'True'});
    $('.funding_source input[value="' + element.theValue + '"]').change(function () {
      if($(this).is(':checked')) {
        $(theField).removeAttr('readonly').removeAttr('backend-readonly');
      }
      else {
        $(theField).attr({'readonly': 'True', 'backend-readonly': 'True'});
      }
    });
  });
  
});

Either of those two options are working for me, and we're not dealing with anything so big that there is going to be any noticable perforamance difference, so it might just be a matter of personal preference.

1 0

replied on May 30

Thank you, Matthew! I went with option 2 and it works great!

I really appreciate your thoughtful, step-by-step responses!

0 0

replied on May 30

Happy to help!

0 0

Question

Question

Forms Classic Javascript on Save to repository

Answer

Replies

Sign in to reply to this post.