表单提交的jQuery对话框是否提交

时间:2017-03-22 09:34:45

标签: jquery forms jquery-ui-dialog

我使用jQuery对话框进行确认,无论是Submit表格还是Not
我在提交表单之前做了一些验证。当我点击提交按钮时,它首先提醒结束,这是在提交按钮点击处理程序的末尾,我的验证失败了 以下是我的代码段

$('#id-submit-btn').click( function( event ) {
    //var $this = $(this);
    var submit = true;
    if( !$('.class-employees-cb:checked').length ) {
        $("<div title='Employee Selection'>Please select at least one employee.</div>").dialog({
            buttons: [ { text: 'OK', click: function() { $(this).dialog('close'); } } ]
        });
        submit = false;
        //event.preventDefault();
        //alert("2");
    }
    if( $('input:checkbox[name=isPrepondPostpond]').is(':checked') ) {
        //event.preventDefault();
        $("<div title='Prepond/Postpond Alert'>Have You Changed Meeting Date before Prepond / Postpond ?</div>").dialog({
            buttons:[
                {
                    text: 'Yes',
                    click: function() {
                        $(this).dialog('close');
                        $('#id-submit-btn').submit();
                    }
                },
                {
                    text: 'No',
                    click: function() {
                        submit = false;
                        //event.preventDefault();
                        $(this).dialog('close');
                    }
                }
            ]
        });
        //alert("5");
    }
    alert("End");
    //event.preventDefault();
    if( !submit )
        return false;
});

我想阻止表单提交如果用户单击否,如何实现?

1 个答案:

答案 0 :(得分:1)

试试这个

&#13;
&#13;
$('#id-submit-form').on("submit", function(event) {
  event.preventDefault(); // cancel the submission
  if (!$('.class-employees-cb:checked').length) {
    $("<div title='Employee Selection'>Please select at least one employee.</div>").dialog({
      buttons: [{
        text: 'OK',
        click: function() {
          $(this).dialog('close');
        }
      }]
    });
  }
  if ($('input:checkbox[name=isPrepondPostpond]').is(':checked')) {
    $("<div title='Prepond/Postpond Alert'>Have You Changed Meeting Date before Prepond / Postpond ?</div>").dialog({
      buttons: [{
          text: 'Yes',
          click: function() {
            $(this).dialog('close');
            $('#id-submit-form')[0].submit(); // submit the form
          }
        },
        {
          text: 'No',
          click: function() {
            $(this).dialog('close');
          }
        }
      ]
    });
  }
});
&#13;
&#13;
&#13;