Exclude radio buttons from a form submit, without disabling them

Question

I'm using some radio buttons to influence the behavior states of a jQuery widget. That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.

Here are two potential solution starts, not yet satisfying though :

• remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
• disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?

As far as possible, I'm rather looking for a cross-browser solution.

Linoleum

Do they need to be inside the form? – Barrie

We have to assume it's part of the requirements. The idea is that the widget is included in a form and works like any other field. – Linoleum

Answer 1

Try this:

<form>
    <input type="radio" name="group1" value="1" form="">
    <input type="radio" name="group1" value="2" form="">
</form>

This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.

The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)

I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.

Embrasure

Answer 2

Try call a function before submit, that disables the radio buttons.

function disableBtn() {
  document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
  document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
  return true;
}

Then, in form:

<form action="file" method="post" onsubmit="return disableBtn()">

Rolanda