So this is sort of an exceptional case situation - I have a plugin that I can't modify for contractual reasons. It displays a set of drop downs and I need it to display a set of radio buttons instead. Is there a js/jquery method for converting dropdowns to radio buttons w/o changing the HTML. Remember, I can add stuff - I just can modify the plugin (and thus the HTML) directly.
I get that this is a bad way to do it, trust me I don't like it any more than you do.
Possibly by detecting the values of the drop-down options and then reformatting them as radio buttons, hiding the original dropdown?
<form action="http://example.net/store/cart/" method="post" class="shopp product">
<ul class="variations">
<li>
<label for="options-1">Music Download</label>
<select name="products[117][options][]" class="category-catalog product117 options" id="options-1">
<option value="">Select an option</option>
<option value="1">Full Album</option>
<option value="7">Theme</option>
<option value="8">Simian Segue </option>
<option value="9">DK Island Swing</option>
<option value="10">Cranky's Theme</option>
<option value="11">Cave Dweller Concert</option>
<option value="12">Bonus Room Blitz</option>
<option value="13">Aquatic Ambiance</option>
<option value="14">Candy's Love Song</option>
<option value="15">Bad Boss Boogie</option>
<option value="16">Mine Cart Madness</option>
<option value="17">Life in the Mines</option>
<option value="18">Voices of the Temple </option>
</select>
</li>
</ul>
<p>
<select name="products[117][quantity]" id="quantity-117">
<option selected="selected" value="1">1</option><option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option><option value="5">5</option>
<option value="6">6</option><option value="7">7</option>
<option value="8">8</option><option value="9">9</option>
<option value="10">10</option><option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option>
<option value="15">15</option><option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option><option value="40">40</option>
<option value="50">50</option><option value="75">75</option>
<option value="100">100</option>
</select>
<input type="hidden" name="products[117][product]" value="117" />
<input type="hidden" name="products[117][category]" value="catalog" />
<input type="hidden" name="cart" value="add" />
<input type="submit" name="addtocart" value="Add to Cart" class="addtocart" />
</p>
</form>
Add Radio Buttons Dynamically In order to create a radio button, we need to define the input element and assign it to a variable called input. Then, change its input type to radio. Finally, append the input element to the label element.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.
Answer: When you are editing or creating a sign up form, click the "Create A New Field" button to produce a new field. In the popup that appears, select either you would like a "Select Box" (drop down) or "Radio" button field. When you click on your selection, you will be prompted to enter your choices.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
Hide the dropdown and place the new radio elements outside the form, they don't need to post, just update the dropdown value.
Here is a code example on jsFiddle.
$("#d option").each(function(i, e) { // get the options
$("<input type='radio' name='r' />") // create a radio element
.attr("value", $(this).val()) // set the value
.attr("checked", i == 0) // check the first by default
.click(function () { // add event click which updates the dropdown
$("#d").val($(this).val()); // update the dropdown if clicked
})
.appendTo("#r"); // append to some visible place
});
To encapsulate this into a declarative attribute, I extended @BrunoLM 's function to style all <select>'s with a given CSS class into the radio button look.
jsFiddle
<select class="radioSelect" id="sizeOptions">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="2XL">2XL</option>
<option value="3XL">3XL</option>
<option value="4XL">4XL</option>
<option value="5XL">5XL</option>
</select>
/* http://jsfiddle.net/496c9/ */
.radioSelectContainer > select {
display: none;
}
.radioSelectContainer > label {
display: inline-block;
margin: 0.3em 0.3em 0 0;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
}
.radioSelectContainer > label > span {
padding: 0.2em;
text-align: center;
display: block;
white-space: nowrap;
}
.radioSelectContainer > label > input {
position: absolute;
top: -20px;
}
.radioSelectContainer > label > input:checked + span {
background-color: #404040;
color: #F7F7F7;
}
// http://stackoverflow.com/questions/3975331/update-drop-down-selection-with-radio-button-selection-using-jquery
// http://jsfiddle.net/ChinmayeeG/TkGP8/
$(function () {
$('.radioSelect').each(function (selectIndex, selectElement) {
var select = $(selectElement);
var container = $("<div class='radioSelectContainer' />");
select.after(container);
container.append(select);
select.find('option').each(function (optionIndex, optionElement) {
var radioGroup = select.attr('id') + "Group";
var label = $("<label />");
container.append(label);
$("<input type='radio' name='" + radioGroup + "' />")
.attr("value", $(this).val())
//.click((function () { select.val($(this).val()); })) //radio updates select - see optional below
.appendTo(label);
$("<span>" + $(this).val() + "</span>").appendTo(label);
});
//http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click
//optional - this logic handles unchecking when clicking on an already checked radio
container.find(":radio + span").mousedown(
function (e) {
var $span = $(this);
var $radio = $span.prev();
if ($radio.is(':checked')) {
var uncheck = function() {
setTimeout(function () { $radio.prop('checked', false); }, 0);
};
var unbind = function() {
$span.unbind('mouseup', up);
};
var up = function() {
uncheck();
unbind();
};
$span.bind('mouseup', up);
$span.one('mouseout', unbind);
} else {
select.val($radio.val());
}
}
);
select.change((function () { //select updates radio
$("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true);
}));
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With