Clever Geek Handbook

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

I have built a normal form in onsen-ui, but if I try to use ons-button

instead of the normal button

form, the form is not submitted.

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

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

This is the form I am processing with AngularJS. I noticed that there is a resolved issue , but I am using OnsenUI v1.1.4 which should contain this fix by now.

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

:

<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>
+3


source to share


3 answers


Since the ons-button directive does not support 'submit', in this case, instead of the ons button, use the Normal button instead. I will report this to the UFC Onsen team.



+2


source


You can try this: provide ons-switch as one angular model and check when it is dispatched.

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>
+1


source


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

My solution was to use a regular button, but set the class to "button" to get the Onsen style:

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


source






More articles:


All Articles