CODEWITHSUNDEEP
c#asp.net-core-mvc
StillLearning
StillLearning

Reputation: 111

Make input fields readonly with values based on another input field

I have 3 input fields in the create user form. Based on the selection of status, I want to make the next 2 fields read-only with specific values.
So If the user selects "Full-Time" for Status, the next 2 fields should become read-only with values 5 and 7.6 respectively. For any other selection, it should remain as a normal input field for the user to enter values. How can I achieve this? Would highly appreciate any help enter image description here

Upvotes: 0

Views: 539

Answers (2)

Karney.
Karney.

Reputation: 5031

You can use listener events and jquery's method attr to handle the state of the other two text boxes. Here is an example.

function changeVal(e) {
            console.log(e.target.value)
            if (e.target.value == "Full Time") {
                $("#workingday").val(5)
                $("#workinghour").val(7.6)
                $("#workingday").attr("readonly", true)
                $("#workinghour").attr("readonly", true)
            } else {
                $("#workingday").val("")
                $("#workinghour").val("")
                $("#workingday").attr("readonly", false)
                $("#workinghour").attr("readonly", false)
            }
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table>
    <tr>
        <td>status</td>
        <td>Working Day in weeks</td>
        <td>Working Hours Per Day</td>
    </tr>
    <tr>
        <td>
            <select onchange="changeVal(event)">
                <option value="">--select--</option>
                <option value="Full Time">Full Time</option>
                <option value="other">other value</option>
            </select>
        </td>
        <td>
            <input type="text" id="workingday" name="workingday" value="0" />
        </td>
        <td>
            <input type="text" id="workinghour" name="workinghour" value="0" />
        </td>
    </tr>
</table>

Upvotes: 1

Towsif Ahamed Labib
Towsif Ahamed Labib

Reputation: 686

add runat attribute to Status

runat="server"

then take the value of Status and compare it to set the parameters of the other fields

String statustxt = Status.Value;
if(Equals(statustxt, targettxt) {
workingdays.Text = "5";
workingdays.ReadOnly = true;
workinghours.Text = "7.6";
workinghours.ReadOnly = true; }

You can also set Editable = false

Upvotes: 0

Related Questions