Changes to custom HTML are not captured on a submitted form because they are not user inputs, but the secondary issue is that inputs are changed to static div elements upon submission.

As a result, if you're pulling your docId value from a field using something like $('#Field1').val() it isn't going to find anything because there is no longer an input from which to retrieve the value.

What you need is a dynamic process that can detect an input on a live form, and a static div element on the submitted form so it can determine whether to use .val() or .html() to retrieve your value.

Like so:

var value = $('#q1 :input').val() || $('#q1 div[type]:eq(0)').html() || '';

In this example, the code looks for a value in an input for #q1. If it gets a null result, it then checks if there's a static element (i.e., for a printable or saved form) for #q1. If that isn't found either it defaults to a blank value.

the :input and div[type] selectors are intentionally generic so they will work with different field types because the divs are given different field type attributes (input = text, email = email, etc.), but you should be able to use the id instead if you don't need to be as flexible.

You can get an idea of how this work by looking at a previously-submitted form in the instance history and inspecting the page elements.