CODEWITHSUNDEEP
phpjavascripthtml
RyanskyHeisenberg
RyanskyHeisenberg

Reputation: 53

Multiple Radio button with text input

How can I enable the input type=text only if the "other" radio button is clicked.

<tr><td><font color='red' size='3'>*</font>CIVIL STATUS</td><td>:</td><td><input type='radio' name='civstat' value='Single' required='required'> Single 
                                    <br><input type='radio' name='civstat' value='Married' required='required'> Married 
                                    <br><input type='radio' name='civstat' value='Annuled' required='required'> Annuled 
                                    <br><input type='radio' name='civstat' value='Widowed' required='required'> Widowed 
                                    <br><input type='radio' name='civstat' value='Seperated' required='required'> Seperated 
                                    <br><input type='radio' name='civstat' required='required' onclick='civstattxton()'> Others, 
                                    please specify here<input type='text' name='civstat' id='civstaton'></td>
                                    </tr>

Upvotes: 0

Views: 1784

Answers (2)

dnapierata
dnapierata

Reputation: 1213

You can use javascript to disable/enable the input based on the onclick event of each input. It's pretty messy but gets the job done:

  <tr><td><font color='red' size='3'>*</font>CIVIL STATUS</td><td>:</td><td><input type='radio' name='civstat' value='Single' required='required'  onclick='document.getElementById("civstaton").setAttribute("disabled","disabled");document.getElementById("civstaton").value = "";'> Single 
                                <br><input type='radio' name='civstat' value='Married' required='required'  onclick='document.getElementById("civstaton").setAttribute("disabled","disabled");document.getElementById("civstaton").value = "";'> Married 
                                <br><input type='radio' name='civstat' value='Annuled' required='required'  onclick='document.getElementById("civstaton").setAttribute("disabled","disabled");document.getElementById("civstaton").value = "";'> Annuled 
                                <br><input type='radio' name='civstat' value='Widowed' required='required'  onclick='document.getElementById("civstaton").setAttribute("disabled","disabled");document.getElementById("civstaton").value = "";'> Widowed 
                                <br><input type='radio' name='civstat' value='Seperated' required='required' onclick='document.getElementById("civstaton").setAttribute("disabled","disabled");document.getElementById("civstaton").value = "";'> Seperated 
                                <br><input type='radio' name='civstat' required='required' onclick='document.getElementById("civstaton").removeAttribute("disabled");'> Others, 
                                please specify here<input type='text' name='civstat' id='civstaton' disabled></td>
                                </tr>

Here is the demo: JSBIN

I recommend using a library like jQuery to attach an event handler to your radio buttons instead of this messy inline solution.

Upvotes: 1

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

    <input type='radio' name='civstat' required='required' 
       onclick='document.getElementById("civstaton").disabled = false'> 
       Others, please specify here
    <input type='text' name='civstat' id='civstaton' disabled>

DEMO

Upvotes: 0

Related Questions