Let's dive into the concept of an HTML form that posts the selected radio button values. To see the POST in action, use a developer tool like Firebug.
<body>
<form method="POST" action="mypostpage.php">
<input name="myRadio" type="radio" value="1"> Choice 1
<input name="myRadio" type="radio" value="2"> Choice 2
<input name="myRadio" type="radio" value="3"> Choice 3
<input type="submit" value="Submit">
</form>
</body>
To create radio buttons dynamically using JavaScript/JQuery, follow this general pattern:
JSFiddle Link
JQuery:
// Check the selected value
$('#myForm').on('change', function() {
var selectedRadio = $('input[name="myRadio"]:checked', '#myForm').val()
console.log(selectedRadio);
});
// Add more radios
$('#addRadio').on('click', function() {
var lastRadioVal = parseInt($('input[name="myRadio"]:last', '#myForm').val());
for (i = lastRadioVal + 1; i <= lastRadioVal + 5; i++) {
$('#myForm').append('<input type="radio" name="myRadio" value="' + i + '"> Choice ' + i );
}
});
HTML:
<form id="myForm" method="POST" action="mypostpage.php">
<input name="myRadio" type="radio" value="1"> Choice 1
<input name="myRadio" type="radio" value="2"> Choice 2
<input name="myRadio" type="radio" value="3"> Choice 3
<input type="submit" value="Submit">
</form>
<input type="button" id="addRadio" value="Add Radio">
UPDATED
(The JSFiddle link remains the same as above)
HTML
<form id="myForm" method="POST" action="mypostpage.php">
<input name="myRadio" type="radio" value="1"> Choice 1
<input name="myRadio" type="radio" value="2"> Choice 2
<input name="myRadio" type="radio" value="3"> Choice 3
<input id="myButton" type="button" value="Submit">
JQuery
// Check the selected value
$('#myForm').on('change', function() {
var selectedRadio =$('input[name="myRadio"]:checked', '#myForm').val()
console.log(selectedRadio);
});
// Add more radios
$('#addRadio').on('click', function() {
var lastRadioVal = parseInt($('input[name="myRadio"]:last', '#myForm').val());
for (i = lastRadioVal + 1; i <= lastRadioVal + 5; i++) {
$('#myForm').append('<input type="radio" name="myRadio" value="' + i + '"> Choice ' + i );
}
// Change button style
if($(this).hasClass("warning")) {
$(this).removeClass("warning");
$(this).addClass("error");
$(this).val("Error!");
} else {
$(this).addClass("warning");
$(this).val("Warning!");
}
});
// Change the button styling
$('#myButton').on('click', function() {
$(this).addClass("validated");
// You'll need to submit the form since the button is just a button and not a submit button.
// I've commented it out below because this is just an example
//$('#myForm').submit();
});
CSS
.validated {
background: green;
}
.warning {
background: yellow;
}
.error {
background: red;
}