I want to know how to hide the submit button and show a processing animation gif in its place when the form is submitted?
Also, I don't redirect the users to another page after the form is submitted. Instead, I hide the form and show a success message. Is it possible to clear the "post" state so that if a user hits refresh, the form data doesn't get submitted twice?
The code for the form in question is below:
@using System.Text.RegularExpressions;
@{
var fullname = Request["fullName"];
var email = Request["email"];
var dob = Request["dob"];
var phone = Request["phone"];
var besttime = Request["time"];
var reason = Request["message"];
var postSend = "";
var result = false;
var serverdatetime = DateTime.Now;
var ipaddress = Request.UserHostAddress;
Validation.RequireField("fullname", "Enter your full name");
Validation.Add("dob",
Validator.Required("Date of Birth (DOB) is required"),
Validator.DateTime("Enter DOB as dd/mm/yyyy (e.g. 07/14/1970)")
);
Validation.Add("email",
Validator.Regex(@"^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$",
"Invalid format for an email address")
);
Validation.Add("phone",
Validator.Required("Phone is required"),
Validator.Regex(@"^([\(]{1}[0-9]{3}[\)]{1}[\.| |\-]{0,1}|^[0-9]{3}[\.|\-| ]?)?[0-9]{3}(\.|\-| )?[0-9]{4}$",
"Invalid format for phone number")
);
if(IsPost){
if (Validation.IsValid()) {
try {
var db = Database.Open("dbNameHere");
var insertCommand = "INSERT INTO Appointment (fullname, dob, email, phone, besttime, reason, serverdatetime, ipaddress) Values(@0, @1, @2, @3, @4, @5, @6, @7)";
db.Execute(insertCommand, fullname, dob, email, phone, besttime, reason, serverdatetime, ipaddress);
var mailMessage = @"<html>
<head>
<style type='text/stylesheet'>
body{font-family: arial, verdana, serif; font: 12px/20px; line-height: 20px; color: #444;}
h1{font-size: 14px; color: #8bb758;}
td{padding: 15px;}
.lbl{font-weight: bold; color: #333;}
</style>
</head>
<body>
<h1>Appointment Request Form:</h1>
<table>
<tr>
<td class='lbl'>Full Name:</td>
<td>" + fullname + @"</td>
</tr>
<tr>
<td class='lbl'>DOB:</td>
<td>" + dob + @"</td>
</tr>
<tr>
<td class='lbl'>Email:</td>
<td>" + email + @"</td>
</tr>
<tr>
<td class='lbl'>Phone:</td>
<td>" + phone + @"</td>
</tr>
<tr>
<td class='lbl'>Prefered Time:</td>
<td>" + besttime + @"</td>
</tr>
<tr>
<td class='lbl'>Reason for Visit:</td>
<td>" + reason + @"</td>
</tr>
<tr>
<td class='lbl'>Server Time:</td>
<td>" + serverdatetime + @"</td>
</tr>
<tr>
<td class='lbl'>User IP:</td>
<td>" + ipaddress + @"</td>
</tr>
</table>
</body>
</html>";
// Send email
WebMail.Send(to: "email@addresshere.com",
subject: "Appointment Form",
body: mailMessage
);
postSend = "Success! Your message has been received. We will contact you shortly.";
result = true;
}
catch (Exception ex) {
postSend = ex + "Opps! Something went wrong and your message was not sent. Please try again later.";
}
}
else{
ModelState.AddFormError("There are some errors with your submission");
}
}
}
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Request an Appointment";
}
@section meta{
<meta name="description" content="" />
}
<div class="ctr">
<h2>@Page.Title</h2>
<div class="w80">
@{
if (result) {
<text><div class="success">@Html.Raw(postSend)</div></text>
}
else {
<form id="appointment" action="" method="post">
<fieldset>
<legend>Request an Appointment</legend>
<div>
@Html.ValidationSummary(true)
</div>
<div>
@Html.Label("Full Name:", "fullname") <span class="example">e.g. Tracy Smith</span><br/>
@Html.TextBox("fullname", Request["fullname"])
@Html.ValidationMessage("fullname")
</div>
<div>
@Html.Label("DOB:", "dob") <span class="example">e.g. 07/14/1970</span><br/>
@Html.TextBox("dob", Request["dob"])
@Html.ValidationMessage("dob")
</div>
<div>
@Html.Label("Email:", "email") <span class="example">e.g. tracy@live.com</span><br/>
@Html.TextBox("email", Request["email"])
@Html.ValidationMessage("email")
</div>
<div>
@Html.Label("Phone:", "phone") <span class="example">e.g. 530-555-5555</span><br/>
@Html.TextBox("phone", Request["phone"])
@Html.ValidationMessage("phone")
</div>
<div>
@Html.Label("Time Preferred:", "time") <span class="example">e.g. Morning or Afternoon?</span><br/>
@Html.ListBox("time", "Select One", new List<SelectListItem>{new SelectListItem{Value = "Morning", Text = "Morning"}, new SelectListItem{Value = "Afternoon", Text = "Afternoon"}})
@Html.ValidationMessage("time")
</div>
<div>
@Html.Label("Reason for visit:", "message") <span class="example">What would you like to see the doctor for?</span><br/>
@Html.TextArea("message", Request["message"])
</div>
<div>
<input class="submit" type="submit" value="Send"/>
</div>
</fieldset>
</form>
}
}
</div>
<div class="w20">
<div id="aside">
<h4>Resources</h4>
@RenderPage("/shared/_Service.cshtml")
</div>
</div>
<div class="cf"></div>
</div>
@section scripts {
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/js/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
}
Thank you Mike. I will give AJAX a go as well. The MVC example seems straight forward but I wonder the logic/code will translate into web pages? I may have to ask more questions using AJAX with web pages. Thanks again.
I'm able to hide the submit button and show the loading gif when submit is clicked; however, it does not do anything. The form does not get submitted; instead, the loading gif is doing it's thing and nothing is happening. Suggestions?
Edit: This DOES NOT work properly. Here's the problem:
If all of the data is valid - it works.
If submit is clicked without entering data - the client side jquery validation works; however, if you click submit again without entering data, the loading gif shows and the form again does nothing.
If the jquery validation passes on the first time the submit button is clicked but the server returns an error and the error is corrected - when clicking submit - the loading gif does not display; however, the form is submitted properly.
Since the code uses the client side unobtrusive jquery validation, the div containing the submit button should only hide the submit button and show the loading gif if the client side validation passes. I'm not sure how to write the IF javascript statement
to that effect. I tried:
It works the first time the submit button is clicked meaning that client side validation is checked and if it fails, the errors are shown and the submit button is still there. However, if the submit button is clicked again after the client validation fails,
the loading gif is displayed and the submit button is hidden. The form is not submitted the second time so nothing is happening. The page has to be refreshed to get the submit button back.
How would you write the IF statement to only trigger loading gif if it passes the client side validation?
davidsa
Member
210 Points
126 Posts
Animation GIF after Form is submitted & Clear Form Post state
Jul 20, 2012 09:54 PM|LINK
I want to know how to hide the submit button and show a processing animation gif in its place when the form is submitted?
Also, I don't redirect the users to another page after the form is submitted. Instead, I hide the form and show a success message. Is it possible to clear the "post" state so that if a user hits refresh, the form data doesn't get submitted twice?
The code for the form in question is below:
@using System.Text.RegularExpressions; @{ var fullname = Request["fullName"]; var email = Request["email"]; var dob = Request["dob"]; var phone = Request["phone"]; var besttime = Request["time"]; var reason = Request["message"]; var postSend = ""; var result = false; var serverdatetime = DateTime.Now; var ipaddress = Request.UserHostAddress; Validation.RequireField("fullname", "Enter your full name"); Validation.Add("dob", Validator.Required("Date of Birth (DOB) is required"), Validator.DateTime("Enter DOB as dd/mm/yyyy (e.g. 07/14/1970)") ); Validation.Add("email", Validator.Regex(@"^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$", "Invalid format for an email address") ); Validation.Add("phone", Validator.Required("Phone is required"), Validator.Regex(@"^([\(]{1}[0-9]{3}[\)]{1}[\.| |\-]{0,1}|^[0-9]{3}[\.|\-| ]?)?[0-9]{3}(\.|\-| )?[0-9]{4}$", "Invalid format for phone number") ); if(IsPost){ if (Validation.IsValid()) { try { var db = Database.Open("dbNameHere"); var insertCommand = "INSERT INTO Appointment (fullname, dob, email, phone, besttime, reason, serverdatetime, ipaddress) Values(@0, @1, @2, @3, @4, @5, @6, @7)"; db.Execute(insertCommand, fullname, dob, email, phone, besttime, reason, serverdatetime, ipaddress); var mailMessage = @"<html> <head> <style type='text/stylesheet'> body{font-family: arial, verdana, serif; font: 12px/20px; line-height: 20px; color: #444;} h1{font-size: 14px; color: #8bb758;} td{padding: 15px;} .lbl{font-weight: bold; color: #333;} </style> </head> <body> <h1>Appointment Request Form:</h1> <table> <tr> <td class='lbl'>Full Name:</td> <td>" + fullname + @"</td> </tr> <tr> <td class='lbl'>DOB:</td> <td>" + dob + @"</td> </tr> <tr> <td class='lbl'>Email:</td> <td>" + email + @"</td> </tr> <tr> <td class='lbl'>Phone:</td> <td>" + phone + @"</td> </tr> <tr> <td class='lbl'>Prefered Time:</td> <td>" + besttime + @"</td> </tr> <tr> <td class='lbl'>Reason for Visit:</td> <td>" + reason + @"</td> </tr> <tr> <td class='lbl'>Server Time:</td> <td>" + serverdatetime + @"</td> </tr> <tr> <td class='lbl'>User IP:</td> <td>" + ipaddress + @"</td> </tr> </table> </body> </html>"; // Send email WebMail.Send(to: "email@addresshere.com", subject: "Appointment Form", body: mailMessage ); postSend = "Success! Your message has been received. We will contact you shortly."; result = true; } catch (Exception ex) { postSend = ex + "Opps! Something went wrong and your message was not sent. Please try again later."; } } else{ ModelState.AddFormError("There are some errors with your submission"); } } } @{ Layout = "~/_Layout.cshtml"; Page.Title = "Request an Appointment"; } @section meta{ <meta name="description" content="" /> } <div class="ctr"> <h2>@Page.Title</h2> <div class="w80"> @{ if (result) { <text><div class="success">@Html.Raw(postSend)</div></text> } else { <form id="appointment" action="" method="post"> <fieldset> <legend>Request an Appointment</legend> <div> @Html.ValidationSummary(true) </div> <div> @Html.Label("Full Name:", "fullname") <span class="example">e.g. Tracy Smith</span><br/> @Html.TextBox("fullname", Request["fullname"]) @Html.ValidationMessage("fullname") </div> <div> @Html.Label("DOB:", "dob") <span class="example">e.g. 07/14/1970</span><br/> @Html.TextBox("dob", Request["dob"]) @Html.ValidationMessage("dob") </div> <div> @Html.Label("Email:", "email") <span class="example">e.g. tracy@live.com</span><br/> @Html.TextBox("email", Request["email"]) @Html.ValidationMessage("email") </div> <div> @Html.Label("Phone:", "phone") <span class="example">e.g. 530-555-5555</span><br/> @Html.TextBox("phone", Request["phone"]) @Html.ValidationMessage("phone") </div> <div> @Html.Label("Time Preferred:", "time") <span class="example">e.g. Morning or Afternoon?</span><br/> @Html.ListBox("time", "Select One", new List<SelectListItem>{new SelectListItem{Value = "Morning", Text = "Morning"}, new SelectListItem{Value = "Afternoon", Text = "Afternoon"}}) @Html.ValidationMessage("time") </div> <div> @Html.Label("Reason for visit:", "message") <span class="example">What would you like to see the doctor for?</span><br/> @Html.TextArea("message", Request["message"]) </div> <div> <input class="submit" type="submit" value="Send"/> </div> </fieldset> </form> } } </div> <div class="w20"> <div id="aside"> <h4>Resources</h4> @RenderPage("/shared/_Service.cshtml") </div> </div> <div class="cf"></div> </div> @section scripts { <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script> <script src="~/js/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> }Mikesdotnett...
All-Star
154927 Points
19867 Posts
Moderator
MVP
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 07:39 AM|LINK
You can use jQuery for this. You can giv the div that your submit button sits in a name and hide it when it is clicked, and replace it with an image:
$('#submit-button').click(function(){ $("#button").empty().html('<img src="/images/loading.gif" />'); });I do the same thing on my site with MVC: http://www.mikesdotnetting.com/Article/106/A-Degradable-jQuery-AJAX-Email-Form-for-ASP.NET-MVC. You can View Source to see how the form is sbmittted using AJAX too.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
davidsa
Member
210 Points
126 Posts
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 06:38 PM|LINK
Thank you Mike. I will give AJAX a go as well. The MVC example seems straight forward but I wonder the logic/code will translate into web pages? I may have to ask more questions using AJAX with web pages. Thanks again.
Mikesdotnett...
All-Star
154927 Points
19867 Posts
Moderator
MVP
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 07:32 PM|LINK
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
davidsa
Member
210 Points
126 Posts
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 08:05 PM|LINK
Mike,
I'm able to hide the submit button and show the loading gif when submit is clicked; however, it does not do anything. The form does not get submitted; instead, the loading gif is doing it's thing and nothing is happening. Suggestions?
Mikesdotnett...
All-Star
154927 Points
19867 Posts
Moderator
MVP
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 08:12 PM|LINK
Without seeing your code, I can't begin to guess what the problem might be.
Beginning ASP.NET Web Pages with WebMatrix | My Site | Twitter
davidsa
Member
210 Points
126 Posts
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 08:19 PM|LINK
<div id="slock"> <input id="submit" class="submit" type="submit" value="Send"/> </div>@section scripts { <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script> <script src="~/js/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#submit').click(function() { $("#slock").empty().html('<img src="/mg/loading.gif" />'); }); }); </script> }The rest of the code is the same as the original post.
davidsa
Member
210 Points
126 Posts
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 21, 2012 09:24 PM|LINK
This fixed the problem:
<script type="text/javascript"> $(document).ready(function() { $("form").submit(function() { $('#submit').click(function() { $("#slock").empty().html('<img src="/mg/loading.gif" />'); $("form").submit(); }); }); }); </script>Edit: This DOES NOT work properly. Here's the problem:
If all of the data is valid - it works.
If submit is clicked without entering data - the client side jquery validation works; however, if you click submit again without entering data, the loading gif shows and the form again does nothing.
If the jquery validation passes on the first time the submit button is clicked but the server returns an error and the error is corrected - when clicking submit - the loading gif does not display; however, the form is submitted properly.
davidsa
Member
210 Points
126 Posts
Re: Animation GIF after Form is submitted & Clear Form Post state
Jul 23, 2012 10:21 PM|LINK
Since the code uses the client side unobtrusive jquery validation, the div containing the submit button should only hide the submit button and show the loading gif if the client side validation passes. I'm not sure how to write the IF javascript statement to that effect. I tried:
$(document).ready(function() { $("form").submit(function() { $('#sub').click(function() { if($("#appointment").validate()) { $("#slock").empty().html('<img src="/mg/loading.gif" />'); $("form").submit(); } }); }); });It works the first time the submit button is clicked meaning that client side validation is checked and if it fails, the errors are shown and the submit button is still there. However, if the submit button is clicked again after the client validation fails, the loading gif is displayed and the submit button is hidden. The form is not submitted the second time so nothing is happening. The page has to be refreshed to get the submit button back.
How would you write the IF statement to only trigger loading gif if it passes the client side validation?
Thank you for all of your help.