Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#10693 closed defect (fixed)

ComboButton: submits form onClick

Reported by: denov Owned by: Douglas Hays
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description

clicking the main button, not the drop downs in a comboButton will submit the form. calling .onClick on the comboButton will not submit the form. sample;

<form dojoType="dijit.form.Form" id="formD" encType="multipart/form-data" action="" method="" class="adsForm">
            <button dojoType="dijit.form.ComboButton" type="button" id="btnSaveTow">
                <span>&nbsp;Save&nbsp;&nbsp;</span>
                <div dojoType="dijit.Menu" id="saveTowMenu" style="display: none;">
                    <div dojoType="dijit.MenuItem" id="btnQuickSaveTow">Quick Save</div>
                </div>
            </button>    
</form>

Change History (9)

comment:1 Changed 9 years ago by denov

the <button> tag in the comboButton template is missing type="${type}"

comment:2 Changed 9 years ago by Jared Jurkiewicz

Owner: set to Douglas Hays

comment:3 Changed 9 years ago by Douglas Hays

And no value attribute either, plus the name attribute is on the dropdown arrow and not the button node. Seems like value and name should also be on the button along with type.

comment:4 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

(In [21297]) Fixes #10693. Changed ComboButton? template to have name/value/type all on the BUTTON tag. Added automated tests to check for correct button values on form submit.

comment:5 Changed 9 years ago by davidmark

Resolution: fixed
Status: closedreopened

_Never_ use the BUTTON element as it is interpreted as a submit input in some browsers and a button in others. (!)

What you want is:-

<input type="button" ... >

comment:6 Changed 9 years ago by Douglas Hays

Milestone: tbd1.5
Resolution: fixed
Status: reopenedclosed

The template change in [21297] adds the type=button attribute (the default) to the BUTTON element to make sure that it's interpretted consistently all on browsers. Users can override the default by using type=submit if desired. Using the BUTTON element is required to provide proper FORM handling when the user desires type=submit and overrides the default. The INPUT tag is insufficient for this widget since it contains no innerHTML.

comment:7 Changed 9 years ago by bill

Resolution: fixed
Status: closedreopened
Summary: comboButton submits form onClickComboButton: submits form onClick

Not sure if I should reopen this ticket or create a new one, but the submit test is failing on IE6 (ever since you created it in [21297]). The problem is that when the form is submitted, every submit button's name/value is sent, not just the submit button that was pressed.

I added a console.log() to the submit function:

submittedValues = function(values){
	for(var i in values){
		console.log("submitted value: " + i + " = " + values[i]);
		document.getElementById('buttonName').value = i;
		document.getElementById('buttonValue').value = values[i];
	}
};

and then in the console I see:

submitted value: Plain = <SPAN class="dijitReset dijitInline" dojoAttachPoint="iconNode" unselectable="on"><SPAN class="dijitReset dijitToggleButtonIconChar" unselectable="on">✓</SPAN></SPAN><SPAN class="dijitReset dijitInline dijitButtonText" id=Plain_label dojoAttachPoint="containerNode" unselectable="on">Plain Submit</SPAN>
submitted value: Combo = <DIV class="dijitReset dijitInline" waiRole="presentation" dojoAttachPoint="iconNode" role="presentation"></DIV> <DIV class="dijitReset dijitInline dijitButtonText" id=Combo_label waiRole="presentation" dojoAttachPoint="containerNode" role="presentation">Combo Submit</DIV>
submitted value: DropDown = <SPAN class="dijitReset dijitInline" dojoAttachPoint="iconNode" unselectable="on"></SPAN><SPAN class="dijitReset dijitInline dijitButtonText" id=DropDown_label dojoAttachPoint="containerNode,_popupStateNode" unselectable="on">DropDown Submit</SPAN><SPAN class="dijitReset dijitInline dijitArrowButtonInner" unselectable="on"> </SPAN><SPAN class="dijitReset dijitInline dijitArrowButtonChar" unselectable="on">▼</SPAN>

comment:8 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: reopenedclosed

(In [21894]) Fixes #10693, #10834. Refs #11003. Add hidden INPUT tag to Button templates. The BUTTON tag will invoke the click method of the INPUT tag. This fixes the IE issues with multiple submit buttons and with submit values. The BUTTON continues to have visible rich text content and the INPUT has a simple value name name attribute that actually gets submitted but is otherwise invisible to the user.

comment:9 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.