create radio button with javascript

Question

I have a html table built from a DB. It has a "Edit" button that will open up a form.

One of those input types will be a radio button I want to generate with On/Off selection:

<input type="radio" name="camera_status" value="On" /> On<br />
<input type="radio" name="camera_status" value="Off" /> Off

I have 3 problems:

I don't know how to create multiple radio options. The code below only creates one.
How do I make the value I passed in "camerastatus" the default checked value?
I need to have multiple labels. The form will be "Camera status" then labels for On/Off.

Code:

function edit2(to, cameraname, cameraquality, camerastatus, emailnotice, camerahash)
{
   var mydiv = document.getElementById("editform");
   var myForm = document.createElement("form");
   myForm.method = "post";
   myForm.action = to;

   //camera_status
   label = document.createElement("label");
   label.for = "text";
   label.innerHTML="<br>Camera status: <br>";
   myForm.appendChild(label);

   var myRadioElement;
   try{
      myRadioElement = document.createElement('<input type="radio" name="camera_status" />On');
   }catch(err){
      myRadioElement = document.createElement('input');
   }

   myRadioElement.type = "radio";
   myRadioElement.name = "camera_status";

   myForm.appendChild(myRadioElement);

   mydiv.appendChild(myForm);
}

"I don't know how to create multiple radio options. The code below only creates one." - So take the bit that creates one and repeat it. Also, get rid of the try/catch and just do it the way you've got in the catch (along with the two lines after the end of the catch block). But wouldn't a checkbox be better suited to an on/off field? — nnnnnn
– nnnnnn, Commented Dec 7, 2011 at 3:14

Xavura · Accepted Answer · 2011-12-07 03:04:30Z

2

To make a radio button the default, add the checked attribute.

<input type="radio" name="..." checked />

Wouldn't it be better to use a checkbox for something that can be on or off?

<input type="checkbox" ... />

answered Dec 7, 2011 at 3:04

Xavura

1642 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Over a year ago

Hrmm, a checkbox might be better. I guess I wasn't clear. It is pretty obvious how to do that in html. I want to create the form with the radio (or checkbox) in javascript.

Xavura Over a year ago

myRadioElement.checked = true;

Tom Over a year ago

that doesn't really help as I need multiple labels and it needs to be done in javascript...but you covered everything else. Thx.

Neil Flodin · Accepted Answer · 2011-12-07 03:12:31Z

0

"Male" value is checked:

<div><input type="radio" name="Gender" value="Male" checked="checked" /> Male</div>
<div><input type="radio" name="Gender" value="Female" checked="" /> Female</div>

To do this in JavaScript you could just put a block of code where you needed the radio buttons, and use document.write with a for loop for each radio button you need. (You'll also want to change the value every time too, of course.)

-Neil

answered Dec 7, 2011 at 3:12

Neil Flodin

5887 silver badges22 bronze badges

Collectives™ on Stack Overflow

create radio button with javascript

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related