Alert Message upon Clicking Submit

asked on July 10, 2017 • Show version history

A client would like to have an alert pop-up when clicking the submit button as a reminder to upload certain attachments if they are needed. If they choose to upload or choose to proceed the second time they click the submit button the form will submit and no message will display. I have this as the start of my code:

$('.Submit').on('click', function() {
    var checkboxController = $('.control input').val();
    if (checkboxController == "") {
            alert("Are Photos or JHA/EHA Form Uploaded?");
        }
    });

And here is the section of the form, specifically the id=q74.

If they check the boxes and then click submit, the message would not need to come up, and if they receive the message the firs time and do not check any boxes, the form would need to submit and not show another message on the second click.

This is a strange request and I'm not sure if it would be possible, any help is appreciated. Thank you!

0 0

replied on July 10, 2017 • Show version history

Hey @████████

This code will temporarily make the checkboxes required fields. If they are incomplete when the submit happens, the alert will popup. Then the requirement is removed. If they are complete the alert won't popup. And after the alert has popped once it won't pop again. I can't promise this is the most efficient solution, but it worked in my testing.

This code assumes your checkboxes all have CSS Class: myCheckbox This is in lines 7, 19, and 31 (plus comments on 5 and 29).

This also assumes that all three checkboxes have to be populated to trigger the alert This is in line 22.

This pops a message that says 'Alert Message!' This is in line 23.

Hope this helps!

$(document).ready(function () {

  var alertComplete = false; 
  
  //Make the checkboxes with the myCheckbox class required fields.
  //This is done via code rather than Layout, so that it can be removed via code.
  $('.myCheckbox input').each(function() {
    $(this).attr('required', 'true');
    $(this).addClass('required');
  });

  //If the checkboxes are incomplete (not checked) - then an
  //alert message will pop-up.  But then the required status is removed.  Thus the alert
  //will only popup the first time the submit is attempted without the checkboxes complete.
  //On subsequent attempts or if the checkboxes are complete, the submit will go through.
  $('.action-btn.Submit').on('click', function() {
    var doAlert = 0;
    $('.myCheckbox input:checked').each(function() {
      doAlert++;
    });
    if (doAlert < 3 && !alertComplete) { 
      alert('Alert Message!'); 
      alertComplete = true; 
      setTimeout(removeRequirement, 500); 
    }
  });
  
  //Removes the required status of the checkboxes with the myCheckbox class.
  function removeRequirement() { 
    $('.myCheckbox input').each(function() {
      $(this).removeAttr('required');
      $(this).removeClass('required');
    });
  }
  
});

0 0

Question

Question

Alert Message upon Clicking Submit

Replies

Sign in to reply to this post.