javascript 根据另一个表单域的值隐藏表单域

Question

I have the following two fields on an HTML form:

<input type="hidden" name="Valid" id="Valid" value="True">

<input type="text" id="Address">

I need a JavaScript method that will disable the address input if the value of the valid input is true.

What can I use to do this, please?

I think I need a way of toggling disabled on the Address input form.

Answer 1

You can define a "onchange"-event, which triggers when the value of that hidden input changes. Here is an example of that: Does HTML Hidden control have any events? Like onchange or something?

But from reading the comments, that wasn't needed at all:-)

What is needed, is a logic which runs on page-load. Your function only needs to add the disabled-attribute to the field, when the valid-value is true.

<input type="hidden" name="Valid" id="Valid" value="True">


<script>
// Define your function
function yourfunc() {
    var validValue = document.getElementById("Valid").getAttribute('value');
    if(validValue == 'True') {
        document.getElementById("Address").setAttribute('disabled', true);
    }
}
yourfunc(); // Call the function: is important, otherwise your code will never be run.
</script>

To remove the disabled-property again, you can check this thread: .setAttribute("disabled", false); changes editable attribute to false

Answer 2

I need a javascript method that will disable the address input if the value of the valid input is true.

Based on this line alone, the below code should work

const validInput = document.querySelector('#Valid');
const addressInput = document.querySelector('#Address')

const toggleAddress = () => {
    const inputVal = validInput.value;
    
    if(inputVal === 'True') {
            addressInput.disabled = true
    }
}

toggleAddress()

Although your question doesn't say when it should be enabled.