jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Editors › Button, RepeatButton, ToggleButton, LinkButton › buttongroup object not showing on form
This topic contains 3 replies, has 2 voices, and was last updated by baradhili 11 years, 4 months ago.
-
Author
-
Hi All,
I’m trying to puzzle this one out…I have a buttongroup running on my form, is presents correctly and if I add a bit of a debug I can see it being clicked and show which is selected.
So far so good.. However when I try and submit the form, it simply doesn’t show up.. Running firebug it also doesn’t show in the DOM.Any ideas?
Here is the code snippets:
<div id='sexInput'> <button type="radio" name="sex" style="padding:4px 16px;" id="Male" value="Male">Male</button> <button type="radio" name="sex" style="padding:4px 16px;" id="Female" value="Female">Female</button> </div>
and the JS:
$("#sexInput").jqxButtonGroup( { mode: 'radio', theme: 'orange' }); $('#sexInput').jqxButtonGroup('setSelection', 0); ... $('#testForm').submit(function() { var frm = $('#testForm'); frm.submit(function (ev) { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: { Card: $('#CardInput').val(), firstname: $('#firstnameInput').val(), lastname: $('#lastnameInput').val(), driveyrs: $('#driveyrsInput').val(),street: $('#streetInput').val(), suburb: $('#suburbInput').val(), state: $('#stateInput').val(), zip: $('#zipInput').val(), email: $('#emailInput').val(), phone: $('#phoneInput').val(), company: $('#companyInput').val(), veh_make: $('#veh_makeInput').val(), veh_model: $('#veh_modelInput').val(), veh_year: $('#veh_yearInput').val(), interests: $('#interestsInput').val(), birth: $('#birthInput').jqxDateTimeInput('val'), accept: $('#acceptInput').jqxCheckBox('val'), sex: $('#sexInput').jqxButtonGroup('getSelection') }, success: function (data) { alert('ok'); } }); ev.preventDefault(); }); });
from the html tab I see this
<div id="sexInput" class="jqx-widget-orange jqx-rc-all-orange jqx-buttongroup jqx-buttongroup-orange jqx-widget jqx-rc-all" aria-disabled="false" role="radiogroup"> <div id="Male" class="jqx-button jqx-button-orange jqx-group-button-normal jqx-group-button-normal-orange jqx-fill-state-normal jqx-fill-state-normal-orange jqx-rc-tl jqx-rc-tl-orange jqx-rc-bl jqx-rc-bl-orange jqx-group-button-pressed jqx-group-button-pressed-orange jqx-fill-state-pressed jqx-fill-state-pressed-orange" style="padding: 4px 16px; margin-left: -1px; float: left;" role="radio">Male</div> <div id="Female" class="jqx-button jqx-button-orange jqx-group-button-normal jqx-group-button-normal-orange jqx-fill-state-normal jqx-fill-state-normal-orange jqx-rc-tr jqx-rc-tr-orange jqx-rc-br jqx-rc-br-orange" style="padding: 4px 16px; margin-left: -1px; float: left;" role="radio">Female</div> <div style="clear: both;"></div> </div>
Hi baradhili,
The solution is to add hidden INPUT tag after the Button Group, set its “name” attribute and update its value when the ButtonGroup’s selection is changed.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMy workaround…
create hidden field in form id=”genderInput”$("#sexInput").bind('buttonclick', function (event) { var buttonindex = $('#sexInput').jqxButtonGroup('getSelection'); $("#genderInput").val(buttonindex); });
Now teh hidden field is visible, even if I cannot submit the buttongroup data..
-
AuthorPosts
You must be logged in to reply to this topic.