I am trying to hide or show a textbox, in a ASP MVC razor view, now i using javascript to handle when i click the radio button which can help me to do hide or show function. however, i want to base on database record hide and show the textbox, so if i use below code , i need to click the radio for hide or show a textbox, anyone can give me advise how to hide or show textbox base on database record and no need to click radio button? thanks
<script type="text/javascript">
const { checked } = require("modernizr");
function text(x) {
if (x == 0 ) document.getElementById("name").style.display = "block",
document.getElementById("address").style.display = "none",
else document.getElementById("name").style.display = "none",
document.getElementById("address").style.display = "block",
return;
}
</script> //radio name
@Html.LabelFor(Model => Model.Type, "A")
@Html.RadioButtonFor(Model => Model.Type, "A" , new { @onclick = "text(0)", @id = "but1" })
@Html.LabelFor(Model => Model.Type, "B")
@Html.RadioButtonFor(Model => Model.Type, "B" , new { @onclick = "text(1)", @id = "but2" })
//textbox(name)
<div class="form-group col-md-6" id="name">
@Html.LabelFor(model => model.name, new { @class = "control-label" })
@Html.TextBoxFor(model => model.name, new { @class = "form-control"e })
</div>
//textbox(address)
<div class="form-group col-md-6" id="address">
@Html.LabelFor(model => model.address, new { @class = "control-label" })
@Html.TextBoxFor(model => model.address, new { @class = "form-control" })
</div><script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
text(@Model.Value);
})();
</script>
This is a document ready function. Your text() method will be called when page is loaded. Use @Model.Value your initial db value. That way it will work for the first time with the value which is in the db.