Enable textbox when another textbox populated

Question

I have two textboxes if i insert a value in Landscaping, then Compound Walling gets disabled

<div class="col-md-2"> Enter Value for Landscaping
Html.TextBoxFor(model => model.landscapingsqm, htmlAttributes: new { id = "landscape", class = "form-control", onchange = "onchangeland()" })
Html.ValidationMessageFor(model => model.landscapingsqm, "", new { class = "text-danger" })
</div>

<div class="col-md-2"> Enter Value for Compound Walling
Html.TextBoxFor(model => model.compoundwalling, htmlAttributes: new { id = "compoundwall", class = "form-control", onchange = "onchangecompoundwalling()" })
Html.ValidationMessageFor(model => model.compoundwalling, "", new { class = "text-danger" })
</div>

Vishal Joshi · Answer

Hello, You can check on the page load/Edit the record. try the below sample code to fix the change. $( document ).ready(function() { function ajaxCalltoGetData(data){ if(data && data.compoundwall.value > 0){ $("#compoundwall").prop("readonly", true); } else{ $("#compoundwall").prop("readonly", false); } } }); Thanks Vishal Joshi

Amit Mohanty · Answer

Try this: Enter Value for Landscaping @Html.TextBoxFor(model => model.landscapingsqm, new { id = "landscape", class = "form-control", onchange = "onchangelandscaping()" }) @Html.ValidationMessageFor(model => model.landscapingsqm, "", new { @class = "text-danger" }) function onchangelandscaping() { var landscapeValue = document.getElementById("landscape").value; var compoundWallInput = document.getElementById("compoundwall"); if (landscapeValue) { compoundWallInput.disabled = true; } else { compoundWallInput.disabled = false; } }

Tuhin Paul · Answer

Sample Page $(document).ready(function() { // Mock data fetching function function fetchData() { // Simulating an AJAX call to get data return new Promise((resolve) => { setTimeout(() => { resolve({ compoundwall: { value: 1 } }); }, 1000); }); } function ajaxCalltoGetData(data) { if (data && data.compoundwall.value > 0) { $("#compoundwall").prop("readonly", true); } else { $("#compoundwall").prop("readonly", false); } } // Fetch data on page load and update input field based on the data fetchData().then((data) => { ajaxCalltoGetData(data); }); }); A mock fetchData function is added to simulate an AJAX call. The ajaxCalltoGetData function is called with the fetched data once the document is ready.

Vikas Singh · Answer

@Garima, you can try below one- Enter Value for Landscaping @Html.TextBoxFor(model => model.landscapingsqm, new { id = "landscape", class = "form-control", onchange = "onchangeland()" }) @Html.ValidationMessageFor(model => model.landscapingsqm, "", new { class = "text-danger" }) Enter Value for Compound Walling @Html.TextBoxFor(model => model.compoundwalling, new { id = "compoundwall", class = "form-control", onchange = "onchangecompoundwalling()" }) @Html.ValidationMessageFor(model => model.compoundwalling, "", new { class = "text-danger" }) function onchangeland() { var landscapingValue = document.getElementById('landscape').value; if (landscapingValue) { document.getElementById('compoundwall').disabled = true; } else { document.getElementById('compoundwall').disabled = false; } } function onchangecompoundwalling() { var compoundwallingValue = document.getElementById('compoundwall').value; // You can add any specific functionality you need when the compound walling value changes. }