asked on How do I make fields in an MVC View, hidden, and set their values with JavaScript?
I have a .NET MVC CORE 5 application and in the Create.cshtml view, I want some of the fields in the form to be hidden so that users cannot set the values.
Instead, I want to use JavaScript to set the values for those fields.
Suppose the Create.cshtml currently has a field like this:
<div class="form-group">
<label asp-for="Hremail" class="control-label"></label>
<input asp-for="Hremail" class="form-control" />
<span asp-validation-for="Hremail" class="text-danger"></span>
</div>
The browser page source will be like this:
<div class="form-group">
<label class="control-label" for="Hremail">Hremail</label>
<input class="form-control" type="text" id="Hremail" name="Hremail" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Hremail" data-valmsg-replace="true"></span>
</div>
One approach I might try is to use the JavaScript document.getElementById("Hremail").value =
to set the value myself.
However, I don't know how to make that field hidden for only that one view except to use JavaScript on page load to make the type be a hidden field.
Or maybe I can make the entire div tag surrounding it not be visible, or maybe even display: none.
I do see how to make the field hidden for all views by changing the model with the [HiddenInput] attribute; but I only want it hidden for that one view.
That's according to this:
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-6.0
Another way I can think of is to remove the MVC generated tag helper and replace it with an HTML helper as is done here:
Maybe there is a better way altogether.
Does anyone have any suggestions on this?
thanks
Even if the field hidden with CSS or JS this will still display the content from browser console.
So you may want to encrypt the data to prevent user changing the value.
Or hide it completely using server side code if not required by the form in some case.
Thank you.
I just want to make sure of some things:
First:
If I set the CSS, display: none for a class on the div, the form should still submit as it normally would. Correct?
Second:
Suppose the form in the .cshtml is this:
<form asp-action="NewLeave">
. . .
<div class="form-group">
<input type="submit" value="NewLeave" class="btn btn-primary" />
</div>
</form>
<div class="form-group">
<input type="button" onclick="return SaveLeaveRecord();" value="NewLeave" class="btn btn-primary" />
</div>
Then at the end of the SavePersonRecord() function I plan to have some kind of code like this:
document.NewLeave.submit();
Is that the best way to do it?
Will the form know to submit to the NewLeave action method as it had before?
Since I'm using JavaScript to set the fields, then I don't see any other way than to change the input type from submit to button and have an onclick event which calls a functions, sets the fields, then submits.
Should I remove or keep the,
value="NewLeave
Should it be,
onclick="return SaveLeaveRecord();"
or remove the word, return:
onclick="SaveLeaveRecord();"
The NewLeave action method looks like:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> NewLeave([Bind("Created,SupervisorApproval,SupervisorApprovalDate,HrApproval,HrName . . . ")] LeaveRequest leaveRequest)
{
if (ModelState.IsValid)
{
_context.Add(leaveRequest);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(leaveRequest);
}
That's a great idea.
If I understand you correctly, I leave the type="submit" as is.
<input type="submit" value="NewLeave" class="btn btn-primary" />
For example, on the page load event, I could have some of the hidden fields set.
Then for other hidden fields that require concatenation or other manipulation from visible fields, I can have that happen on some onblur event or other user action event.
Right?
If any of the hidden fields will never change, I would remove them from the form, and just manually set the variable in the server side code.
Open in new window
Even if you hide it, you need to make sure you do not accept the input on the back end.