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>

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>

• javascript
• html
• angularjs
• forms
• onsen-ui

3 Answers 3

It doesn't look like Onsen will support this: https://github./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">

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.

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>