Jquery UI 对话框表单按钮类型更改为提交

Question

我有 Ui 对话框表单 jquery 及其转换提交和取消按钮，它们都是 [type="button']。我想将提交按钮的类型更改为“提交”。

我该怎么做？我所有的尝试都失败了

这是js代码。

        $('#jui-dialog-form-horizontal').dialog({
        autoOpen: false,
        modal: true,
        width: 700,
        buttons:

        {
            Submit: function () {
                $(this).dialog('close');
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });

这是输出到html。

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
    <button type="button" class="ui-button ui-corner-all ui-widget">Submit</button>
    <button type="button" class="ui-button ui-corner-all ui-widget">Cancel</button>
</div>

Answer 1

考虑以下示例。

$(function() {
  $('#jui-dialog-form-horizontal').dialog({
    autoOpen: false,
    modal: true,
    width: 700,
    buttons: {
      Submit: function() {
        $(this).dialog('close');
        $("#jui-form").submit();
      },
      Cancel: function() {
        $(this).dialog('close');
      }
    }
  });

  $("#jui-form-save").click(function(event) {
    event.preventDefault();
    $('#jui-dialog-form-horizontal').dialog("open");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="jui-form">
  <label>User Name</label>
  <input type="text" name="username" id="username" />
  <button type="submit" id="jui-form-save">Save</button>
</form>
<div id="jui-dialog-form-horizontal">
  <p>Are you sure you want to Submit this data?</p>
</div>

此示例向您展示如何在用户单击对话框中的提交按钮时触发表单上的 submit 事件。

Jquery UI 对话框表单按钮类型更改为提交

Jquery UI dialog form button type change to submit

html

jquery-ui