Radio Buttons Problem

[unplugged_web]

I came across this [link]http://jsfiddle.net/LbLHc/4/[/link] but would love to be able to use it with radio buttons instead. Does anybody know how to do this?

[davej]

Hmmm... I've never used an HTML name attribute that was an array.

[dsonesuk]

You usually use them for checkboxes with same name, where you have option to select multiple checkboxes, radio buttons are when only one option is required from many, i don't see why its used here though.

[unplugged_web]

I'm trying to use this on a site built with Silex but whenever I try to change it it messes everything else up or doesn't work at all.

 

I've attached the whole code

{% extends "form_select2_new.twig" %}{% block extra_css_scripts %}  {{ parent() }}  <link href="/css/datepicker.css" rel="stylesheet" media="screen"><style>form > .form-group { clear:left }.form-group > .form-group { clear:left }.form-group > .form-group > .form-group { clear:none }.form-group > .form-group label,form > .form-group > .form-group > label {   display:block; }form > .form-group:nth-child(5) > .form-group:first-of-type .form-group label {  display:block;}form > .form-group > .form-group .form-group {  float:left;  width: 16.2%;}form > .form-group > .form-group .form-group.remove_product {  width: 2%;  text-align:right;  padding-top:30px;}form > .form-group:nth-child(5) > .form-group:first-of-type .remove_product {  padding-top:35px;}</style>{% endblock %}{% block extra_js_scripts %}  {{ parent() }}  <script src="/js/bootstrap-datepicker.js"></script>{% endblock %}{% block inline_script %}  {{ parent() }}  $('#order_order_date').attr('placeholder', 'dd/mm/yy').datepicker({format:'dd/mm/yy',weekStart:1});  var products = $('.form-group label:contains("Order products")').parent(),    add_product_button = ' <a href="#" id="add_product"><span class="glyphicon glyphicon-plus"></span> Add product</a>',    remove_product_button = '<div class="form-group remove_product"><a href="#" class="glyphicon glyphicon-remove"></a></div>';  products.children().first().append(add_product_button);  $('form').on('click', '#add_product', function(e) {    e.preventDefault();    var prototype = $('#new_product_form').data('prototype'),    index = $('form > .form-group > .form-group').length;    var new_product_form = $('<div class="form-group"></div>').append(prototype.replace(/__name__/g, index));    $( remove_product_button ).appendTo( new_product_form );    products.append(new_product_form);    $('select[id^="order_order_products_'+index+'"]').select2();  });  $('form').on('change', 'select[id$="product_id"]', function (e) {    var product_line = $(this).parent().parent(),      unit_price = $('input[id$="unit_price"]', product_line),      invoice_bill = $('select[id$="invoice_bill"]', product_line);    $.getJSON('/product/'+$(this).val(), function (json) {      unit_price.val(json.SalePrice);      invoice_bill.val(json.PriceType?'B':'I').change();      $('#order_bill_description').val( $('#order_bill_description').val()+"n"+json.BillDescription);      $('#order_notes').val( $('#order_notes').val()+"n"+json.InternalDescription);      $('#order_notes').val( $('#order_notes').val()+"n"+json.WholesalerName);    });  });  $('label:contains("Contract length")').parent().after(remove_product_button);  $('form').on('click', '.remove_product a', function(e) {    e.preventDefault();    $(this).parent().parent().remove();  });  $('#delivery_address_options').insertBefore('#order_delivery_address');  $('#delivery_address_options input:radio').on('change', function() {    var oda = $('#order_delivery_address'),     oda_value = oda.val();    if ($(this).val()=='c') {      $.getJSON('/customer/view/'+$('#order_customer_id').val(), function (data) {        var address = [data.Name, data.Address, data.City+' '+data.County, data.Postcode];        oda.val(oda_value+"n"+address.join("n"));      });    }    if ($(this).val()=='s') {      var site_id = $('#order_customer_site_id').val();      if(site_id) {        $.getJSON('/customer_site/view/'+site_id, function (data) {          var address = [data.Name, data.Address, data.City+' '+data.County, data.Postcode];          oda.val(oda_value+"n"+address.join("n"));        });      } else if(site_id==-1) {        oda.val($('#order_customer_site_address').val()+"n"+$('#order_customer_site_city').val()+"n"+$('#order_customer_site_postcode').val());      }    }  });  $('#order_customer_site_name, #order_customer_site_address, #order_customer_site_city, #order_customer_site_postcode').parent().hide();  $('#order_customer_site_id').on('change', function(e) {    e.preventDefault();    if($(this).val()==-1) {      $('#order_customer_site_name, #order_customer_site_address, #order_customer_site_city, #order_customer_site_postcode').parent().show();    } else {      $('#order_customer_site_name, #order_customer_site_address, #order_customer_site_city, #order_customer_site_postcode').parent().hide();    }  });  $('#order_customer_contact_name, #order_customer_contact_email').parent().hide();  $('#order_customer_contact_id').on('change', function(e) {    e.preventDefault();    if($(this).val()==-1) {      $('#order_customer_contact_name, #order_customer_contact_email').parent().show();    } else {      $('#order_customer_contact_name, #order_customer_contact_email').parent().hide();    }  });  $('#order_delivery_option_box').insertBefore('#order_delivery_price');  function updateText(src){	if(src.checked)		document.getElementById('order_delivery_price').value = src.value;}{% endblock %}{% block body %}  <div id="new_product_form" data-prototype="{{ form_widget(form.order_products.vars.prototype)|e }}"></div>  {{ parent() }}  <div id="delivery_address_options">    <label class="radio-inline"> <input type="radio" name="delivery_address_option" value="c" id="dao_customer">Customer </label>    <label class="radio-inline"> <input type="radio" name="delivery_address_option" value="s" id="dao_customer_site">Customer Site</label>    <label class="radio-inline"> <input type="radio" name="delivery_address_option" value="0" id="dao_custom">Custom </label>  </div>  <div id="order_delivery_option_box">  <label class="radio-inline"> <input type="radio" name="delivery_price_option" value="15.00" id="dpo_pre" onClick='updateText(this);'>Pre 12</label>    <label class="radio-inline"> <input type="radio" name="delivery_price_option" value="8.00" id="dpo_next">Next Day</label>    <label class="radio-inline"> <input type="radio" name="delivery_price_option" value=" " id="dpo_custom">Custom </label></select></div>{% endblock %}