Onsen-ui: ons-button submit doesn't submit the form

Question

I have constructed a normal form in onsen-ui, but if I try to use ons-button instead of a normal button, the form does not submit.

<!-- doesn't work -->
<ons-button type="submit">Submit</ons-button>

<!-- works -->
<button type="submit">Submit</button>

It is a form which I am handling with AngularJS. I notice that there is a resolved issue that is similar, but I am using OnsenUI v1.1.4 which should contain this fix by now.

If it helps, this is the HTML markup that ons-button is producing:

<ons-button type="submit" class="ng-isolate-scope button effeckt-button slide-left"><span class="label ons-button-inner"><span class="ng-scope">Submit</span></span>
  <span class="spinner button__spinner "></span>
</ons-button>

score 3 · Answer 1 · answered Oct 11 '17 at 23:33

3

It doesn't look like Onsen will support this: https://github.com/OnsenUI/OnsenUI/issues/1538

My solution was to use a normal button but set the class to "button" so that is receives the Onsen styling:

<button type="submit" class="button">

answered Oct 11 '17 at 23:33

AKMorris

422
4
16

score 2 · Accepted Answer · answered Oct 14 '14 at 02:25

2

Because ons-button directive doesn't support 'submit', please adopt normal button instead of ons-button in this case. I'll report this to Onsen UI team.

answered Oct 14 '14 at 02:25

Ataru

544
4
7

I'm not sure. If you have still any problem regarding 'submit', please post on git hub issues. https://github.com/OnsenUI/OnsenUI/issues Then the team will reply. – Ataru Mar 06 '15 at 08:04

score 1 · Answer 3 · answered Nov 14 '14 at 01:59

You can try as the following, give ons-switch as one angular model, and check when it is submit.

javascript

  $scope.testClick = function(item) {
    console.log($scope.switch);
    console.log(item);
 }

markup

<ons-list-item>
    <ons-switch  ng-click="switch(switch)" ng-model="switch" checked></ons-switch>
</ons-list-item>
<ons-button ng-click="testClick(item)">Lorem</ons-button>

Onsen-ui: ons-button submit doesn't submit the form

3 Answers3