Как вызвать отправку формы или передать объект формы в диалоговых кнопках JQuery? - PullRequest
Новая
       44

Как вызвать отправку формы или передать объект формы в диалоговых кнопках JQuery?

0 голосов
/ 14 марта 2019

У меня есть JQuery Dialog с формой внутри. В диалоговом окне есть две кнопки Submit и Cancel. Когда пользователь нажимает Submit, я хочу отправить данные формы. Вот пример моего кода: 

$(document).on('click', '#show_btn', showDialog);

function showDialog() {
  var myHtml = "<form id='myfrm' method='post'><div><input type='checkbox' name='status1' id='status1'>Check 1</div><div><input type='checkbox' name='status2' id='status2'>Check 2</div><div class='alert message-submit'></div></form>";
  displayConfirmation(myHtml, 'Dialog Box');
};


function displayConfirmation(msg, msgTitle, minH, width) {
  if (msgTitle == undefined) msgTitle = 'System Message';
  if (minH == undefined) minH = 100;
  if (width == undefined) width = 435;

  if (!$("#message-dialog").length) $("<div id='message-dialog'></div>").appendTo("body");
  if (msg.match(/<.+>/) == null) msg = '<p>' + msg + '</p>';

  $("#message-dialog").html(msg);
  $("#message-dialog").dialog({
    autoOpen: true,
    title: msgTitle,
    minHeight: minH,
    width: width,
    modal: true,
    position: {
      my: "center",
      at: "center",
      of: window
    },
    draggable: false,
    buttons: [{
        text: "Accept",
        class: "btn btn-primary",
        id: "btn_accept",
        click: function() {
          saveFrm();
        }
      },
      {
        text: "Cancel",
        class: "btn btn-secondary",
        click: function() {
          $(this).dialog("close");
        }
      }
    ]
  });
}

function saveFrm() {
  var frmData = $(this).serialize(),
    submitBtn = $(this).closest('form').find(':submit'),
    messageBox = $(this).closest('form').find('.message-submit'),
    statusLen = $(this).find('input[type=checkbox]:checked').length;

  console.log(frmData);
  console.log(submitBtn);
  console.log(messageBox);
  console.log(statusLen);
  // I need all varibales above. The frmData is used for ajax call. submitBtn should select Accept button element. Message box should select hidden div and status length should check aall check boxes in the form.
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<div><input type="button" name="show_btn" id="show_btn" value="Show Dialog"></div>

Код выше вернет 0 / undefined для всех элементов консоли. Если кто-нибудь знает, как выбрать эти элементы из диалогового окна jquery, сообщите мне.

...