php - Multiple Radio button with text input -
how can enable input type=text if "other" radio button 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>
you can use javascript disable/enable input based on onclick event of each input. it's pretty messy gets 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 demo: jsbin
i recommend using library jquery attach event handler radio buttons instead of messy inline solution.
Comments
Post a Comment