1

I have been working on my new application and I use JQuery,HTML5 and Bootstrap 3 to develop my front end pages. However, in all the form in my app I need to show the message to the user after they submit the form. I tried to do the research and see what is the best way to do that but there is a lot of different opinions/options. Here is my example:

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

While I was researching on the web I noticed that some application do not use time out for the message. They simple just leave the message on the form. To me that was bit confusing and I do not see a purpose of leaving that message on the screen. I use the timer and message disappears after 7 seconds. I'm wondering if there is better way to do this? Or the way I'm doing is one of the ways to go.

espresso_coffee
  • 5,980
  • 11
  • 83
  • 193
  • But you need to add the AJAX and the success function where you show the result of the submission and hide the throbber – mplungjan Jul 19 '18 at 13:11
  • This might help you: https://stackoverflow.com/a/374677/2644437 – RUKAclMortality Jul 19 '18 at 13:12
  • @mplungjan Yes, but this is just small example that shows how my vide works to display the message to users. – espresso_coffee Jul 19 '18 at 13:12
  • Voting to close as _primarily opinion-based Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise._ – mplungjan Jul 19 '18 at 13:14
  • 1
    My personal opinion is to leave the message if it is important the person sees it and dismisses it. If it is not important, and the user does not need to see the message if he leaves for a cup of coffee after submission, then fade it out by all means – mplungjan Jul 19 '18 at 13:15
  • @mplungjan That's exactly the reason why I posted this question. I'm not sure if this message can be considered as very important since they will see that right after form is begin submitted. Thanks for your replay. – espresso_coffee Jul 19 '18 at 13:17
  • YW. It is however an off topic question at SO – mplungjan Jul 19 '18 at 13:18

0 Answers0