Question

我一直在开发新应用程序，并且使用JQuery，HTML5和Bootstrap 3开发前端页面。但是，在我应用程序中的所有表单中，我都需要在用户提交表单后向用户显示消息。我试图进行研究，看看什么是最好的方法，但是有很多不同的意见/选择。这是我的示例：

$('#frmSave').on('submit', submitFrm);
function submitFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  
  var frmID = e.target.id,
      formData = $('#' + frmID).serialize();
      $('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button

  if (formData) {
    $('#frm_message').show().addClass('alert-success').html('Record successully saved!').delay(7000).fadeOut('slow').queue(function() {
      $(this).removeClass('alert-success').dequeue();
      $('#' + frmID).find(':submit').prop('disabled', false);
    });
  } else {
    $('#frm_message').show().addClass('alert-danger').html('Error!').delay(7000).fadeOut('slow').queue(function() {
      $(this).removeClass('alert-danger').dequeue();
      $('#' + frmID).find(':submit').prop('disabled', false);
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
  <div class="form-group">
    <label class="control-label" for="active"><span class="label label-primary">Active:</span></label>
    <select class="form-control" name="frm_active" id="frm_active" required>
      <option value="0">No</option>
      <option value="1">Yes</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
    <input type="text" class="form-control" name="frm_code" id="frm_code" maxlength="4" required>
  </div>
  <div class="form-group">
    <label class="control-label" for="name"><span class="label label-primary">Name:</span></label>
    <input type="text" class="form-control" name="frm_name" id="frm_name" maxlength="50" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="frm_message" class="alert alert-Submit"></div>
    </div>
  </div>
</form>

当我在Web上进行研究时，我注意到某些应用程序不使用超时消息。他们只需将消息保留在表单上即可。对我而言，这有点令人困惑，而且我看不到将其显示在屏幕上的目的。我使用计时器，消息在7秒后消失。我想知道是否有更好的方法可以做到这一点？或者我正在做的方式就是其中一种方式。

保存/编辑成功后如何显示消息？

0 个答案: