Develop Reference

How to use both radio buttons and checkboxes in same fieldset?

I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!

You need to use different names because each field needs to be identified individually by the server.

AngularJS radio button validation

Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?

Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!

use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS

HTML form with input radio and one text input with the same attribute name

I am trying to do a radio buttons group with couple of options and the last option will be a text input field "Other".
Something like this:
I want to do it so when submitted, the url called is
app://configuration?server=...
server should contain the value of the server attribute wether it's from one of the radio buttons or from the input group
I tried to do this
<form method="GET" action="app://configuration">
Select server <br>
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" value="">Other <input type="text" name="server" />
<input type="submit" value="Submit">
</form>
I have used the same name attribute for the radio buttons and the input field and the result is that the name (server) is being duplicated when the submit is pressed.
I understand why it doesn't work in the current way. Any idea how to achieve something like this with javascript ? (no third party like jquery please)
I have no access to change the server code so I can't use a different attribute name because the server will not know it...

Try this pure javascript (modified your html code)
function changeradioother() {
var other = document.getElementById("other");
other.value = document.getElementById("inputother").value;
}
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" id="other" value="other">Other <input id="inputother" type="text" onchange="changeradioother()" />
<input type="submit" value="Submit">
I added an id to the last radio button and the inputbox.

You cant use the same name for the text input. Radio buttons are fine because only one will be returned to the server.
Other <input type="text" name="serverCustom" />
Check to see if the value of "server" is null or empty ("") when you get it, and then if it is grab the value of serverCustom.
If you wish to use pure javascript to check the values, and send the data you require use this:
http://jsfiddle.net/Lord_Zero/w5x4h/

Is this what you are trying to do?
Fiddle: fiddle
function submit(){
var curRadio = document.querySelector('input[name="server"]:checked').value;
var serverValue;
if(curRadio==4)
{
serverValue=document.getElementById("other").value;
}
else
{
serverValue=curRadio;
}
alert(serverValue);
}

How to check a single radio button using jquery/java script?

I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act

Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>

Make input text fields changeable and selectable (toggled with checkbox)

Please see my current html snippet is as below. I am trying to make html input fields changeable and selectable. So I can change the value of colors in input text field which is toggled with the corresponding checkbox. When the submit button is clicked, only the information of the selected color is submitted.
My current html displays the content correctly, but it will submit two colors information. Despite of only one checkbox is selected.
<form id="myForm">
<input type="checkbox" name="color1" value="blue_check" />
Color1: <input type="text" name="blue" value="120" /></br>
<input type="checkbox" name="color2" value="red_check" />
Color2: <input type="text" name="red" value="160" /></br>
<input type="submit" value="OK" />
</form>
or click on: http://jsfiddle.net/4xDFK/56/
Thank you in advance.

With jQuery:
$(document).ready(function() {
$('#myForm :checkbox').each(function() {
$(this).next("input").attr('disabled',!$(this).is(':checked'));
});
});
$('#myForm :checkbox').change(function() {
$(this).next("input").attr('disabled',!$(this).is(':checked'));
});
As you don't mention the use of JavaScript or a JS-framework, here is a suggestion to solve it with the pure html form and server-side evaluation:
Give the checkboxes a telling name, like "check_blue" + "check_red"
On the server side, only process the color if the corresponding checkbox has been selected
If you only want to so submit or allow filling of the inputs according to the checkbox state, you have to use JavaScript (and should probably have mentioned that in your question or at least as a tag).

you can remove elements on submit , if related checkbox is not checked .
how to prevent form from sending some fields we don't want to send

All input values are submitted as you click hit the submit button. So what you need to do is to handle this on the server side. Give names to the checkboxes and check their values, google for "handling checkboxes in XXXX" where XXXX is your server side language.
<h1> Colors Information </h1>
<form id="myForm">
<input type="checkbox" name="choice1" value="choice1"/>
Color1: <input type="text" name="blue" value="120" /></br>
<input type="checkbox" name="choice2" value="choice2"/>
Color2: <input type="text" name="red" value="160" /></br>
<input type="submit" value="OK" />
</form>
You can then check which checkboxes are checked, and accordingly see if you should put the corresponding text input fields into consideration.