<div class="modal-header"> <h2>Share: <span>Health Care</span></h2> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="frm-share" method="get" role="form"> <fieldset class="p-2"> <input type="hidden" name="share_url" id="shareUrl" value="https://aging.networkofcare.org/denverregion-co/HealthCare/GovernmentPrograms"> <input type="hidden" name="share_title" id="shareTitle" value="Health Care"> <input type="hidden" name="share_type" id="shareType" value="email"> <div class="row mb-4"> <div class="col-md-6"> <label aria-hidden="true" for="shareYourName">Your Name</label> <input id="shareYourName" class="form-control" name="shareYourName"> </div> <div class="col-md-6 share-as-email"> <label for="shareYourEmail" data-translate="Your Email">Your Email</label> <input type="email" class="form-control" name="shareYourEmail" id="shareYourEmail"> </div> <div class="col-md-6 share-as-text"> <label for="shareToText" data-translate="Phone Number">To <span class="small text-muted">(Phone Number)</span></label> <input id="shareToText" class="form-control" name="shareToText" placeholder="Phone number of the person you're texting this to."> </div> </div> <div class="share-as-email"> <div class="mb-4"> <label for="shareToEmail" id="shareToLabel">To</label> <input id="shareToEmail" type="email" class="email form-control" name="shareToEmail" placeholder="Email of the person you're sending this to."> </div> <div class="mb-2"> <label for="shareMessage"> Message <span class="small text-muted">(Let them know your thoughts about this page.)</span> </label> <textarea class="form-control" name="shareMessage" id="shareMessage" rows="5"></textarea> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button id="btnShareFormSend" type="button" class="btn btn-primary"><i class="fa fa-envelope-o fa-lg"></i> Send</button> <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button> </div> <script> $(document).ready(function () { $.validator.messages.required = ""; $("#frm-share").validate({ rules: { shareYourName: { required: true }, shareToText: { required: { depends: function (element) { return ($("#shareType").val() == "text"); } } }, shareYourEmail: { required: { depends: function (element) { return ($("#shareType").val() != "text"); } } }, shareToEmail: { required: { depends: function (element) { return ($("#shareType").val() != "text"); } } }, shareMessage: { required: { depends: function (element) { return ($("#shareMessage").val().length === 0); } } } }, highlight: function (element, errorClass, validClass) { $(element).addClass("is-invalid"); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass("is-invalid"); } }); if ("email" == "text") { $("#shareToLabel span").text("(phone number)"); $(".share-as-email").hide(); $(".share-as-text").show(); } else { $("#shareToLabel span").text("(email address)"); $(".share-as-email").show(); $(".share-as-text").hide(); } $("#btnShareFormSend").bind("click", function (e) { e.preventDefault(); // if valid if ($("#frm-share").valid()) { var data = JSON.stringify({ url: $("#shareUrl").val(), title: $("#shareTitle").val(), type: $("#shareType").val(), toPhone: $("#shareToText").val(), toEmail: $("#shareToEmail").val(), fromEmail: $("#shareYourEmail").val(), fromFullName: $("#shareYourName").val(), message: $("#shareMessage").val() }); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "/denverregion-co/Share/Send", data: data, dataType: "json", success: function (response) { var message = ""; if (response.sent) { message = '<div class="alert alert-success" role="alert"> <strong>Thank you, ' + $("#shareYourEmail").val() + '.</strong> You successfully shared information about <strong>' + $("#shareTitle").val() + '</strong>. </div>'; } else { message = '<div class="alert alert-danger" role="alert">Something went wrong. The URL could not be shared.</div>'; } $("#frm-share").hide().parent().append(message); // hide send button in footer $(".modal-footer").hide(); } }); } }); }); </script>