Jquery UI dialog form button type change to submit-CodePudding

I have Ui dialog form with jquery and its convert Submit and cancel buttons which is [type="button'] both of them. I would like to change type of submit button to the "submit".

How can I do it? im failed all of my tries

This is js codes.

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

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

This is output to 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>

CodePudding user response：

Consider the following example. In the future, please provide a Minimal, Reproducible Example.

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

This example shows you how you can trigger the submit event on the form when the User clicks the Submit Button in the Dialog.