Reputation: 5480
I have two hidden input fields in my form:
<input type="hidden" name="lat" id="lat" value=""/>
<input type="hidden" name="long" id="long" value="" />
I am assigning their value by doing the following:
document.getElementById('lat').value = lat;
document.getElementById('long').value = lng;
Can someone please tell me how I can remove the hidden <input>
fields and replace them with a @Html.HiddenFor<>
and make my Javascript update the HiddenFor? I want to do this because it will obviously automatically bind the data.
My HiddenFor currently looks something like this:
@Html.HiddenFor(m => Model.Listing.Location.Latitude);
@Html.HiddenFor(m => Model.Listing.Location.Longitude);
I change the Javascript to do this:
document.getElementById('Listing.Location.Latitude').value = lat;
document.getElementById('Listing.Location.Longitude').value = lng;
I get the following error in the Console:
Uncaught TypeError: Cannot set property 'value' of null
Can anyone see where I am going horribly wrong?
Upvotes: 7
Views: 12258
Reputation: 463
Try this.
@Html.HiddenFor(m => m.Listing.Location.Latitude, new {id = "theIdyouWant"})
So you can get the element using Javascript:
document.getElementById("theIdyouWant")
Upvotes: 5
Reputation: 17288
Your problem is that id
will be another. Listing.Location.Latitude
is name attribute.
For example:
@Html.TextBoxFor(x => x.General.Site_Name)
generated as:
<input id="General_Site_Name" type="text" name="General.Site_Name" />
Upvotes: 3
Reputation: 20674
The Ids of these fields will have underscores not dots, their names will have the dots. Try this:
document.getElementById('Listing_Location_Latitude').value = lat;
Upvotes: 11