How do I make radio buttons outside of forms?

Question

I'm trying to program a dynamic form, so I can't use the normal form tags and stuff. I use normal buttons, JQuery, and AJAX calls to simulate a traditional form. However, I can't figure out how to do radio buttons. Any help?

EDIT: Yeah, I suppose I should have been more specific. I tried doing

<input type="radio" />

and stuff, but:

1. it lets me select more than one button at a time (which kind of defeats the point of radio buttons)
2. it won't let me deselect a button after it's pressed!

EDIT 2: The reason I'm not using form tags is that I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags.

Freestone

"I need multiple submit buttons as well, and the only solution I found to that dilemma was to not use form tags." - Give them the same name. Give them different values. You can detect which was successful when the form is submitted (only the clicked one will be successful). If you want to do Ajax, then bind click handlers to the submit buttons instead of a submit handler to the form. – Treblinka

I guess using multiple submit buttons is not an issue – Accusal

Answer 1

Why can't you use the form tag? There is nothing stopping you from doing so. But if you don't want to use the form tag, why not:

<input type='radio' name='test' value='1' checked>
<input type='radio' name='test' value='2'>
<input type='radio' name='test' value='3'>
<input type='radio' name='test' value='4'>

Works fine for me. Demo

Edit:

1: You need to specify a name for the radio group, otherwise each input is considered its own group. Hence why you can select more than one button at a time when using <input type="radio" />. Look at my code above. The radio group is 'test'.

2: Radio buttons are suppose to have a default value. When you create a radio group you should be specifying a default value with the checked attribute. A consequence of this is that you can't deselect a radio button. You can either choose a different value or stick with the default. If you want to be able to deselect, then consider using checkboxes instead. I've updated the example code to reflect this.

Bartolome

Not specifying a method will give you the default method — get. – Treblinka

That's invalid HTML. The <input> element cannot have any children. – Treblinka

Hmm, I didn't realize that. But if he is using Ajax to submit the form, what's the issue? And yeah, invalid HTML. Half asleep, fixed it. =/ – Bartolome

It's a somewhat bizarre red herring to throw into an answer. – Treblinka

Indeed, I see what you mean. Edited it out. – Bartolome

Answer 2

If you are able to select more than one radio button, its sounds like your name attributes are not matching. What you want to end up with is something like the following:

<input type="radio" name="group-1" value="something-unique">
<input type="radio" name="group-1" value="something-else-unique">
<input type="radio" name="group-1" value="another-unique-something">

<input type="radio" name="group-2" value="something-unique">
<input type="radio" name="group-2" value="something-else-unique">
<input type="radio" name="group-2" value="another-unique-something">

Note that the name attribute is the same for the group of options, which means that the selections will replace each other.

Also, I haven't had any issues not wrapping radios in form tags, when using them purely with javascript, however if you want to do any html post stuff, I would expect that they are required.

Amblyoscope

Answer 3

You can try this:

HTML

<div>
     <ul>
        <li><input type="radio" name="radio" value="value1" checked>Radio Button1</input></li>
        <li><input type="radio" name="radio" value="value1">Radio Button2</input></li>
        <li><input type="radio" name="radio" value="value1">Radio Button3</input></li>
     </ul>
</div>

DEMO

Unconventionality

@user1544712 can you check that if not working please inform me – Unconventionality

Answer 4

There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.

If, for whatever reason, that does not work, perhaps you should reconsider the format through which you are asking the user to submit information.

Single

All right then, more background: The user wants to build a multiple-choice question. There is at least one answer choice, but the number of answer choices is otherwise arbitrary. I need two normal buttons: "Add answer choice" and "Submit question". I need the radio buttons so the user can determine which answer choice is correct. – Freestone

Correct me if I'm wrong, but it sounds to me like you are trying to use a form to generate ANOTHER FORM dynamically. If that is the case, I think you are missing some steps. You will need to take the information in with the first form which will require a submission of some kind. Then you will need to create an additional set of functions that generate the final form. From there you can either update the page or submit it somewhere. – Single