title: ASP.NET MVC 3 HiddenFor Javascript
body: <p>I have two hidden input fields in my form:</p>
  
  <pre><code>&lt;input type="hidden" name="lat" id="lat" value=""/&gt;
  &lt;input type="hidden" name="long" id="long" value="" /&gt;
  </code></pre>
  
  <p>I am assigning their value by doing the following:</p>
  
  <pre><code>document.getElementById('lat').value = lat;
  document.getElementById('long').value = lng;
  </code></pre>
  
  <p>Can someone please tell me how I can remove the hidden <code>&lt;input&gt;</code> fields and replace them with a <code>@Html.HiddenFor&lt;&gt;</code> and make my Javascript update the HiddenFor? I want to do this because it will obviously automatically bind the data.</p>
  
  <p>My HiddenFor currently looks something like this:</p>
  
  <pre><code>@Html.HiddenFor(m =&gt; Model.Listing.Location.Latitude);
  @Html.HiddenFor(m =&gt; Model.Listing.Location.Longitude);
  </code></pre>
  
  <p>I change the Javascript to do this:</p>
  
  <pre><code>document.getElementById('Listing.Location.Latitude').value = lat;
  document.getElementById('Listing.Location.Longitude').value = lng;
  </code></pre>
  
  <p>I get the following error in the Console:</p>
  
  <pre><code>Uncaught TypeError: Cannot set property 'value' of null 
  </code></pre>
  
  <p>Can anyone see where I am going horribly wrong?</p>