CODEWITHSUNDEEP
htmlforms
alyx
alyx

Reputation: 2733

HTML Forms: Radio buttons with text fields

This seems like a simple problem, but how do I create a basic HTML form that has a series of radio button options, with the last one being a text field to fill in a custom response (i.e. "Other").

What I have now:

    Reason given for stop? <br>
    <input type="radio" name="reason" value="Fit Description">Fit Description<br>
    <input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
    <input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
    <input type="radio" name="reason" value="">Other<br>

Upvotes: 23

Views: 102307

Answers (5)

Gangula
Gangula

Reputation: 7274

Found a similar answer here.

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
  } else document.getElementById('ifYes').style.visibility = 'hidden';

}
<div>
  Yes
  <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No
  <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck" checked="checked">
  <br>
  <div id="ifYes" style="visibility:hidden">
    If yes, please explain: <input type='text' id='yes' name='yes'>
  </div>
</div>

Note: You need to specifically target the input type='text' when you use this in a form

Upvotes: 0

j08691
j08691

Reputation: 207861

Just add a text input field to it.

Reason given for stop? <br>
<input type="radio" name="reason" value="Fit Description">Fit Description<br>
<input type="radio" name="reason" value="Suspicious Behavior">Suspicious Behavior<br>
<input type="radio" name="reason" value="No Reason Given">No Reason Given<br>
<input type="radio" name="reason" value="">Other <input type="text" name="other_reason" />

jsFiddle example

Upvotes: 30

Georgi Shopov
Georgi Shopov

Reputation: 11

There is a neat way to add text field alongside radio buttons without using functions or Javascript (jQuery). Just add the radio btn (Other) and the text field next to it, on the top of your HTML form. Here is what i use:

Color:

<input type="radio" name="title[<?=$red?>][color]" value="" <?php if ($row['color'] != ' ') {echo 'checked';} ?> />Other <input type="text" name="title[<?=$red?>][color]" value="<?php echo $row['color'] ?>" style="width: 200px;" /> |

<input type="radio" name="title[<?=$red?>][color]" value="natural" <?php if ($row['color'] == 'natural') {echo 'checked';} ?> />natural|

<input type="radio" name="title[<?=$red?>][color]" value="stain" <?php if ($row['color'] == 'stain') {echo 'checked';} ?> />stain |

<input type="radio" name="title[<?=$red?>][color]" value="white" <?php if ($row['color'] == 'white') {echo 'checked';} ?> />white|

Basically you do not put value on the "Other" radio input, but on the text input so whatever you write in the text field will be send to db - its 1st field in the FORM. If nothing in the text field - the other checked radio input will be processed.

Hope this helps.

Upvotes: 1

R Bowen
R Bowen

Reputation: 67

Simply add a text field as you would normally but give it the same name attribute as the others, that way when accessing them you'll get one of them.

In JavaScript (which I assume you'll be using?) just access these elements and check the the textfield is empty, if it is get the radio buttons.

Upvotes: 0

Anthony
Anthony

Reputation: 658

  1. Create a text field, and set it to display:none;
  2. Then with jQuery, detect when the 'Other' radio button is checked and show the textbox.
  3. Then on your process script, do and if statement to see if the value of your radio button group is "" (nothing), and grab the post data of the textbox and do what you want with it.

Upvotes: 5

Related Questions