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

Question

Question

JavaScript changed HTML doesn't retain on Submit

Forms Web Customizations
Updated January 10, 2019
asked on January 10, 2019

I have a hidden field that is pre-filled on lookup, the change triggers the input to go into a placeholder in a Custom HTML. On the form everything works great, but on submit the change is not saved and it defaults back to the original placeholder value. 

I tried this:

//When the Field 20 receives input, it will replace the HTML placeholder 
  $("#q20 input").change(function(){ //when Instance ID is changed
   
    var spanC = document.getElementById('Course');
    var course = document.getElementById('Field20').value;
    
    while( spanC.firstChild ) {
    spanC.removeChild( spanC.firstChild );
    }
    spanC.appendChild( document.createTextNode(course) );
   
 });

And this:

//When the Field 20 receives input, it will replace the HTML placeholder 
  $("#q20 input").change(function(){ //when Instance ID is changed
   
    var value = document.getElementById('Field20').value; //this is the Course field
    document.getElementById('Course').innerHTML=Field20.value;

   
 });

Both work within the form but default back on Submit. (Forms 10.3.1)

0 0

Replies

replied on January 10, 2019 • Show version history

Changes to custom HTML elements are not saved by Forms because they are not treated like variables. As a result, every time the form loads it uses the original HTML configured in the designer.

You have JavaScript to make the changes, which is a good start, but what you're seeing is that the change event doesn't fire because the field is already set the second time around.

To "preserve" the changes, you would need a process in place to reproduce the change each time the form loads.

You could try this,

  1. Put the contents of your change events into standalone "html update" functions
  2. For the change event, call the "html update" function
  3. In the $(document).ready event, check if the field has a value already, if it does, call the "html update" function.

 

The idea is that either the change to the field will trigger the change to the HTML (when the lookup runs) or the second function call in document ready will handle the update if the field is already populated (on the second form).

Another option would be to manually trigger the change event after you assign the event handler, but there's about 100 ways you could do it really so it depends on what works best in your situation.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...