Onsen-ui: ons-button submit 不提交表单

Posted 2023-03-05

【中文标题】Onsen-ui: ons-button submit 不提交表单

【英文标题】：Onsen-ui: ons-button submit doesn't submit the form

【发布时间】：2014-12-05 03:47:42

【问题描述】：

我在 onsen-ui 中构建了一个普通表单，但如果我尝试使用ons-button 而不是普通的button，表单不会提交。

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

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

这是我使用 AngularJS 处理的一种形式。我注意到有一个类似的resolved issue，但我使用的是 OnsenUI v1.1.4，它现在应该包含此修复程序。

如果有帮助，这是ons-button 生成的 html 标记：

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

【参考方案1】：

因为 ons-button 指令不支持 'submit'，在这种情况下请使用普通按钮代替 ons-button。我会向 Onsen UI 团队报告。

【讨论】：

我不确定。如果您对“提交”仍有任何问题，请在 git hub 问题上发帖。 github.com/OnsenUI/OnsenUI/issues然后团队会回复。

【参考方案2】：

您可以尝试如下，将ons-switch作为一个角度模型，并检查它何时提交。

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>

【参考方案3】：

看来 Onsen 不会支持这个：https://github.com/OnsenUI/OnsenUI/issues/1538

我的解决方案是使用普通按钮，但将类设置为“按钮”，以便接收 Onsen 样式：

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