1

I wrote this simple form in Liferay:

enter image description here

<aui:input type="checkbox" name="team" value="joe" label="joe" checked="false" />
<aui:input type="checkbox" name="team" value="ben" label="ben" checked="false" />

PROBLEM: When I click on the label "ben", the value of the joe checkbox changes.

Is my syntax incorrect?

Nicolas Raoul
  • 58,567
  • 58
  • 222
  • 373

2 Answers2

1

By default aui assign the name as id. So it is not unique and onclick triggers the wrong input id (which is the first input).

Just set a unique id to each input should works.

<aui:input id="chkbox1" type="checkbox" name="team" value="joe" label="joe" /> 
<aui:input id="chkbox2" type="checkbox" name="team" value="ben" label="ben" />
Federico klez Culloca
  • 26,308
  • 17
  • 56
  • 95
Faizul Sulaiman
  • 11
  • 1
0

No. name has to be unique for checkboxes, just like normal HTML.

<aui:input type="checkbox" name="teamAAA" value="joe" label="joe" checked="false" />
<aui:input type="checkbox" name="teamBBB" value="ben" label="ben" checked="false" />

Did you mean to use type radio? Those would need the same name.

<aui:input type="radio" name="team" value="joe" label="joe" checked="false" />
<aui:input type="radio" name="team" value="ben" label="ben" checked="false" />

Update:

<aui:input> will normalize name and id if id isn't explicitly passed. So in your code, but inputs have the same id, which causes the wrong input to be focused when clicking the label.

Byran Zaugg
  • 967
  • 9
  • 25
  • Pretty much any HTML tutorial that I could find uses the same `name` for several boxes: http://www.w3schools.com/tags/att_input_checked.asp http://www.tizag.com/htmlT/htmlcheckboxes.php – Nicolas Raoul Feb 05 '16 at 04:49
  • Never use W3Schools as an authoritative reverence. See: http://www.w3fools.com/. Check [MDN ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type) instead. "Radio buttons that have the same value for the name attribute are in the same "radio button group"" – Byran Zaugg Feb 05 '16 at 20:05
  • See also: [WHATWG Writing a form's user interface](https://html.spec.whatwg.org/multipage/forms.html#writing-a-form's-user-interface) – Byran Zaugg Feb 05 '16 at 20:13
  • So it looks like I was a bit wrong. You can use the same `name` for checkboxes but the `value` sent to the server will be comma separated. I updated my answer to reflect how `` behaves. – Byran Zaugg Feb 05 '16 at 20:38