Radio Buttons with Input Other Option

Question

I have here an html code that has a radio button and an input choice. How can i clear the input field when the radio button is selected as well as when the input field was selected, the radio button selected will not be selected anymore.

 function loadChoice() { a = document.getElementById('load_choice'); a.checked = true; } function regularload() { a = document.getElementById('load_choice'); a.value = ""; }

 <div class="form-group"> <span>3. # ng Bahay kung saan po kayo susunduin</span><br> <input type="radio" id="none" onclick="regularload()" name="3. # ng Bahay kung saan po kayo susunduin" value="None">   <label for="none">None</label><br> <label for="other" onclick="loadChoice()">Others</label> <input type="text" id="load_choice" name="3. # ng Bahay kung saan po kayo susunduin"> </div>

Answer 1

Like this

I changed to checkbox since that makes more sense

I also gave the wrapper an ID

 document.getElementById("bahay").addEventListener("click", function(e) { const tgt = e.target; const textField = document.getElementById("other"); const check = document.getElementById("none"); if (tgt.id === "none") textField.value = ""; // or if (tgt.type && tgt.type === "radio") else if (tgt.id === "other") check.checked = false; })

 <div class="form-group" id="bahay"> <span>3. # ng Bahay kung saan po kayo susunduin</span><br> <label><input type="checkbox" id="none" name="3. # ng Bahay kung saan po kayo susunduin" value="None">None</label><br> <label>Others <input type="text" id="other" name="3. # ng Bahay kung saan po kayo susunduin"></label> </div>

Using a radio

 document.getElementById("bahay").addEventListener("click", function(e) { const tgt = e.target; const textField = document.getElementById("other"); const check = document.getElementById("none"); if (tgt.id === "none") textField.value = ""; else if (tgt.id === "other") check.checked = false; })

 <div class="form-group" id="bahay"> <span>3. # ng Bahay kung saan po kayo susunduin</span><br> <label><input type="radio" id="none" name="3. # ng Bahay kung saan po kayo susunduin" value="None">None</label><br> <label>Others <input type="text" id="other" name="3. # ng Bahay kung saan po kayo susunduin"></label> </div>

Answer 2

Here is another solution that will work with any number of questions and options (it will work regardless, whether there is another free-text option available or not):

 const div=document.querySelector(".form-group"); // get parent of all inputs ... div.addEventListener("change",ev=>{ const el=ev.target; if(el.type==="radio") div.querySelectorAll("[type=text][name="+el.name+"]").forEach(o=>o.value=""); }); div.addEventListener("input",ev=>{ const el=ev.target; if(el.type==="text") div.querySelectorAll("[type=radio]:checked[name="+el.name+"]").forEach(o=>o.checked=false); });

 <div class="form-group"><span>3. # ng Bahay kung saan po kayo susunduin</span><br> <label><input type="radio" name="n3bahay" value="1">one</label><br> <label><input type="radio" name="n3bahay" value="2">two</label><br> <label><input type="radio" name="n3bahay" value="3">three</label><br> <label><input type="radio" name="n3bahay" value="4">four</label><br> <input type="text" name="n3bahay" placeholder="other ..."> <hr><span>4. # and another question ...</span><br> <label><input type="radio" name="n4more" value="1">one</label><br> <label><input type="radio" name="n4more" value="2">two</label><br> <label><input type="radio" name="n4more" value="3">three</label><br> <label><input type="radio" name="n4more" value="4">four</label><br> <input type="text" name="n4more" placeholder="other ..."> <hr><span>5. # a yes/no question:</span><br> <label><input type="radio" name="n5xtra" value="1">yes</label><br> <label><input type="radio" name="n5xtra" value="0">no</label> </div>

It works with "delegated event attachment", so, even when further questions were to be added, they would also be handled correctly.