Showing HTML content just after login in ASP.Net MVC

Question

Is there any way to call HTML from JS function? Below is the code ref: The login method in ASP.Net MVC is implemented like this:

<div>
<button id = "btnSubmit" name ="btnSubmit" class="pop-submit" value="submit" type = "submit" onclick="loginl();">sign in </button>

 <script type="text/javescript">
 function loginl(){

   $("#inprogress").attr("style","display:block";height:50px;width:100%;");
   // HTML call to show message from here
   document.forms["formlogin"].submit();
   return true;
  }

 </script>

On click login, that is before submit, I would like to implement a piece of HTML:

Message: Thank you for contacting us. Please visit our new url( this url will go here). The following are most recent changes:

• Item1
• Item2

Is there any easiest way to achieve this? I was trying using "Alert" or a "Prompt". However, it seems there is no provision to include HTML/CSHTML in this.

This is how, I'm trying to do:

 <script type="text/javescript">
 function loginl(){

   $("#inprogress").attr("style","display:block";height:50px;width:100%;");
   alert('message' + $(this).html("DiLogBox")); //can I not do something like this?
   document.forms["formlogin"].submit();
   return true;
  }

 </script>

Then my HTML will be:

<div id = "DiLogBox">
......
</div>

Here is no validation. Simply show the message.

Answer 1

Well, you can just use the pop up box to assist you. Thats it

Answer 2

I would assume that what you're really trying to achieve is showing a message inside a modal like window. There is two options here: Vanilla JS or using some third party like jQuery modal . Here is another article on how to implement it using Vanilla JS.

You can then add an event listener to the form and prevent to send it until the user closes the modal.

Here is a simple example:

 // Get the modal var modal = document.getElementById("myModal"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; var showModal = function(){ modal.style.display = "block"; } var hideModal = function(){ modal.style.display = "none"; } //Prevent the form to submit document.forms[0].addEventListener("submit", function(e){ var form = this; e.preventDefault(); showModal(); span.addEventListener("click", function(){ hideModal(); form.submit(); alert("form submitted"); }); });

 /* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */.modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }

 <form> <label for="my-name">Name</label> <input id="my-name" type="text" /> <button type="submit">Submit</button> </form> <;-- The Modal --> <div id="myModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <span class="close">&times.</span> <p>Some text in the Modal..</p> </div> </div>