Link Radiobox button to Input

Question

I have 2 radio button, each valued Yes and No respectively and 1 textbox.. If I checked on No button, the input textbox will open. If checked on Yes, textbox will disabled.

This code is working fine but I want to delete content that input to the textbox if the user checked Yes

 function ismcstopu() { var chkNo = document.getElementById("radio2_ismcstop"); var mcnostopreason = document.getElementById("mcnostopreason"); mcnostopreason.disabled = chkNo.checked? false: true; if (.mcnostopreason.disabled) { mcnostopreason;focus(). } else { mcnostopreason;val(''); } }

 <input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstopu()" value="Yes">Yes <input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstopu()" value="No">No <label for="mcnostopreason">If No, Reason:</label> <input class="inputstyle-100" type="text" id="mcnostopreason" name="mcnostopreason" value="" disabled>

Answer 1

mcnostopreason is not a jQuery object. therefore you could do: var mcnostopreason = $("#mcnostopreason");

Or you could just change mcnostopreason.val('') to mcnostopreason.value = '' ( this will mean you don't need to change anything else)

Answer 2

.val is a jQuery construct but you are using DOM

Here is a better version using eventListener

Change the document.getElementById("container") to whatever container you have (your form for example)

Note: It is often better to test true than to test false I also added labels to the radios so we can click the yes or no too

 document.getElementById("container").addEventListener("click", function(e) { const tgt = e.target; if (tgt.name === "ismcstop") { const mcnostopreason = document.getElementById("mcnostopreason"); mcnostopreason.disabled = tgt.value === "Yes"; if (mcnostopreason.disabled) { mcnostopreason.value = ''; } else { mcnostopreason.focus(); } } })

 <div id="container"> <label><input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" value="Yes">Yes</label> <label><input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" value="No">No</label> <label for="mcnostopreason">If No, Reason: <input class="inputstyle-100" type="text" id="mcnostopreason" name="mcnostopreason" value="" disabled> </label> </div>

jQuery version

 $("[name=ismcstop]").on("click", function() { if (this.name === "ismcstop") { const $mcnostopreason = $("#mcnostopreason"); $mcnostopreason.prop("disabled", this.value === "Yes"); if ($mcnostopreason.is(":disabled")) { $mcnostopreason.val(""); } else { $mcnostopreason.focus(); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" value="Yes">Yes</label> <label><input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" value="No">No</label> <label for="mcnostopreason">If No, Reason: <input class="inputstyle-100" type="text" id="mcnostopreason" name="mcnostopreason" value="" disabled> </label>