SharePoint 2013 - How do I save the value of a read-only or hidden field?

Question

I'm trying to set a field in a list's edit form with a value after the user clicks "Save." Here's the catch: I don't want the field to be editable by the user (only JavaScript should set its value).

So first, I tried setting the field's "readonly" attribute. Didn't work - after saving the form, I find out that the value didn't take. So I think, "maybe SharePoint ignores saving read-only fields." Instead, I add styling to set its "display" to "none." I find out that this gives the same result as above.

I also tried adding a span, setting its positioning to "absolute", and giving it a solid background color, and increasing the z index so that it would cover up the field. No luck - still didn't save the value when I clicked "Save."

I even tried overriding the "PreSaveAction" function to make the field visible afterwards, but that didn't work either.

Unfortunately, it seems the only way for this to work is to allow the field to be completely visible and completely editable by the user, for the entire lifespan of the page, because when I tried that, it worked fine.

Is there something I'm missing?

---

EDIT: I forgot to mention that this list has a 2010 workflow that runs when an item is edited.

Answer 1

It seems you are doing something wrong, below works perfectly with pure javascript. Tried just now.

First I tried with Google chrome developer console, after page is loaded, ran below 2

document.getElementById("ReadOnlyField_30c913e4-d726-4ce2-996a-626d8ff43e24_$TextField").disabled = "disabled";
document.getElementById("ReadOnlyField_30c913e4-d726-4ce2-996a-626d8ff43e24_$TextField").value = "[email protected]"

Clicked on Save, went again to list view and i can see my value updated.

Now to make it dynamic, added script editor webpart on New form, kept the zone index of webpart to 2 so that it is displayed below form webpart

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', fn, false);

function fn(){
document.getElementById("ReadOnlyField_30c913e4-d726-4ce2-996a-626d8ff43e24_$TextField").disabled = "disabled";
document.getElementById("ReadOnlyField_30c913e4-d726-4ce2-996a-626d8ff43e24_$TextField").value = "[email protected]"
}

</script>

Loaded the form again, below is screenshot of form

Click save and go back to list view... it has saved readonly field.

Answer 2

You can turn off Read-only while editing the filed and set it back to read only after editing.

The demo for your reference:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function()
{
//Set the Field to Read only and change its background colour
$("input[title='Column1']").attr("readonly","true").css('background-color','#F6F6F6');
//You can disable the field also:  $("input[Title='Metrics ID']").attr("disabled", "disabled");
});

 function PreSaveAction()
{
  $("input[title='Column1']").attr("readonly","false");
  $("input[title='Column1']").val('new value');
  $("input[title='Column1']").attr("readonly","true");
  return true;

}

</script>