Best approach for confirmation page - email

I just finished the basic design structure for my contact page without flash; it's located here.
Can anyone suggest the best approach for making a confirmation script (inside a DIV) without reloading the page (preferably with jQuery). I want to replace the content in the main WRAP with new content (just text) confirming the email was received.
Any suggestions?

First of all I don't believe you can notify the user that the mail was actually received (at least not in a trivial way). But you can notify that it was sent.
For this with jQuery you can send the contact info via AJAX and then show the response in the DIV.
May be something like this:
$.ajax({
type: "POST",
url: "sendMail.php",
data: $('#contactForm').serialize(),
success: function(msg){
$("#responseDiv").html(msg).show();
}
});
Of course this is assuming that your server sends the for with "sendForm.php" and that your contact form is wrapped with a <form> with "contactForm" as an id.
The server should respond with the text to show within the div. If the message was sent or not.
Hope this helps.
References:
Ajax help for jQuery

Related

Can I use HTML to create a vote button on an email that sends a reply?

Situation:
I am a HTML newbie who gets by through Google-fu and I am in charge of a tool which sends HTML email to customers.
I have been asked by our customers (Because pressing reply and typing a single word is really difficult) if I can create buttons on the emails I send which allows them a 1-click reply.
Conditions:
The reply has to come from their own email address
It needs to go back to the email address that sent the email (We have one template email which can be sent from several addresses)
It needs to maintain the same subject line (It contains a reference number to ensure the email is processed correctly when received)
Must be created using inline HTML(4 or 5) only (Restrictions of the system that generates the email)
Ideally will send the reply immediately (And show them as much in some manner), but opening up a new email already pre-populated is an acceptable alternative
I have struggled to find much at all on this, which leads me to think that it is not possible.
If using tiny bit of pure javascript, that does not need any external library on your website.
This code goes to your website where you want your check to be made.
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
document.addEventListener("DOMContentLoaded", function(event) {
if(getURLParameter('answ') == 0) document.getElementById('answered_yes').remove();
else if(getURLParameter('answ') == 1) document.getElementById('answered_no').remove();
else {
document.getElementById('answered_yes').remove(); document.getElementById('answered_no').remove();
}
});
</script>
<div id="answered_yes">
THIS IS HOLDER FOR YES ANSWERER //Put your wanted info hare if he answered yes
</div>
<div id="answered_no">
THIS IS HOLDER FOR NO ANSWERER //Put your wanted info hare if he answered no
</div>
Now on email links put these type of links.
<a href="yourwebsite.com/index.php?answ=0" target="_blank" >ANSWER NO</a>
<a href="yourwebsite.com/index.php?answ=1" target="_blank" >ANSWER YES</a>
What this does is simply puts a parameter on a link called answ that has 0 or 1 by my setting and once your website gets a request it checks which parameter is it 0 or 1. If its 0 that means we remove the div that says yes, otherwise do the same with no div.
with only html it is not possible unless you would give him different links as in.
<a href="yoursite.com/he_answered_no.html" >No</a>
<a href="yoursite.com/he_answered_yes.html" >Yes</a>
And put your contents inside there.
However if you are going to use this script in your website, put that code somewhere in the body, its not perfect, but it will do the job. Then put your information on yes div and on no div, its going to remove whatever div he answers too.
But like I mentioned, with purely HTML it is not possible only adding some bits with other languages, pure javascript should work on any HTML site, unless you are trying to add the code to some kind of platform that blocks any ongoing scripts.
You can just use a "mailto:" link similar to this:
Email Us
Here's the link with more info: https://css-tricks.com/snippets/html/mailto-links/
It will open up a prepopulated email with the "to" address, subject line, and body text already inserted. People will be able to modify the text if they want or just click send. You would need to some way to dynamically change the subject line to the one the customer received, but your email tool probably has that capability.

AEM: Display an Alert box after server side validation

I have a form in AEM. When the submit button is clicked control goes to forward.jsp. I have done some validations in forward.jsp and would like to generate on alert on the page once the validation is failed. How can I pass the alert to the page?
if(condition){
// validation success
} else{
// code for alert
}
FormsHelper.redirectToReferrer(slingRequest, slingResponse);
If you want to do the validation server-side, but show an alert client-side, I recommend you use JavaScript to make an AJAX call. You could change your submit button so that when it is clicked, it fires an AJAX call instead of submitting a form. See http://api.jquery.com/jquery.ajax/ for a description of how this could be done using jQuery, but other options would also work for making the AJAX request.
In the response to that AJAX request you can put whetever you need. It can be a status code, a string of JSON, or a blurb of HTML. You then would write client-side JavaScript to handle the response and do whatever is appropriate based on the given response--such as show an alert on the page.
An example of this sort of approach if seen at http://michaelsoriano.com/how-to-ajax-validate-forms/
This topic is more complicated that you might think. Basically you can see sample implementation in the foundation components such as /libs/foundation/components/form/text/text.jsp. They all use the com.day.cq.wcm.foundation.forms.LayoutHelper#printErrors method to check if they are errors on field. This is happening over the com.day.cq.wcm.foundation.forms.ValidationInfo class which is set as request attribute in order to transfer the field state between the different classes. You can check also the com.day.cq.wcm.foundation.forms.FieldHelper class which performs actually the validation. Putting some sort of logic in the forward.jsp is the wrong ways

Simplest example for sending post data via links in Zend Framework

Starting with Zend and I´d like to know what is the simplest way of sending POST data to another page, not by forms, but by some link in my view instead. Thanks :)
You can't send POST data through a link. At least not through a normal link. Link can only carry GET data.
If you need to send POST over a link it's most certainly a design flaw.
If you're 100% sure, that you need it, you can do that using jQuery and onclick event. It`s not possible to do it without javascript. Other option would be to send it using form with hidden fields with single submit button visible - that would even work without javascript.
Normal hyperlinks in HTML are sent with GET requests and are not supposed to change the state of the resource being accessed. This is known as being idempotent. You can repeat the request over and over, and the result of each succeeding request to the same URL is the same as the first one.
POST requests don't have this restriction and are intended for when the user needs to change something (such as creating a new resource.)
It's not possible to send a POST request via a normal HTML link. And even if you find a way, it breaks an almost universal expectation that web users have. What are you trying to accomplish? Maybe there's a better way.
But to answer your question, you could use something like jQuery to capture the "click" event and make it do a POST request:
$('.my-link').click(function() {
var url = $(this).attr('href');
var data = {};
$.post(url, data, function() {
window.alert('success!');
});
return false;
});
If your URL has any query parameters, i.e. "?foo=bar&baz=bum", then you'd probably need to strip them off of the URL and pass them as a second parameter to the $.post() function. This is left as an exercise for the reader. ;-)

Asynchronous send mail while action return content

In my web portal while somebody commented on a user's post i send email to post owner about it.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SubmitComment(...)
{
Comment comment = new Comment {...
Mail.SendEmail(...);
return Content("OK");
}
When a comment submitted a post
request with ajax and append the
comment bottom of comment div. Because
of sending email take relatively
longer time response return late. So
users begin to click submit link more
than once. How can I return content
while send email at background. Async
Controller is a choice but the only
where i need is this section.
Any recommendation, tutorial etc.
check this link, it describes how to send email async and catch message about sending status
http://msdn.microsoft.com/en-us/library/x5x13z6h.aspx#Y2052
and after in controller i would create an action
that will be looking into session where you write data about sending email for particular user...
and of course reading it using ajax for response... the problem is the time may wary, so the question is .. is it the best way?
p

Preventing form resubmission

Page one contains an HTML form. Page two - the code that handles the submitted data.
The form in page one gets submitted. The browser gets redirected to page two. Page two handles the submitted data.
At this point, if page two gets refreshed, a "Confirm Form Resubmission" alert pops up.
Can this be prevented?
There are 2 approaches people used to take here:
Method 1: Use AJAX + Redirect
This way you post your form in the background using JQuery or something similar to Page2, while the user still sees page1 displayed. Upon successful posting, you redirect the browser to Page2.
Method 2: Post + Redirect to self
This is a common technique on forums. Form on Page1 posts the data to Page2, Page2 processes the data and does what needs to be done, and then it does a HTTP redirect on itself. This way the last "action" the browser remembers is a simple GET on page2, so the form is not being resubmitted upon F5.
You need to use PRG - Post/Redirect/Get pattern and you have just implemented the P of PRG. You need to Redirect. (Now days you do not need redirection at all. See this)
PRG is a web development design pattern that prevents some duplicate form submissions which means, Submit form (Post Request 1) -> Redirect -> Get (Request 2)
Under the hood
Redirect status code - HTTP 1.0 with HTTP 302 or HTTP 1.1 with HTTP 303
An HTTP response with redirect status code will additionally provide a URL in the location header field. The user agent (e.g. a web browser) is invited by a response with this code to make a second, otherwise identical, request to the new URL specified in the location field.
The redirect status code is to ensure that in this situation, the web user's browser can safely refresh the server response without causing the initial HTTP POST request to be resubmitted.
Double Submit Problem
Post/Redirect/Get Solution
Source
Directly, you can't, and that's a good thing. The browser's alert is there for a reason. This thread should answer your question:
Prevent Back button from showing POST confirmation alert
Two key workarounds suggested were the PRG pattern, and an AJAX submit followed by a scripting relocation.
Note that if your method allows for a GET and not a POST submission method, then that would both solve the problem and better fit with convention. Those solutions are provided on the assumption you want/need to POST data.
The only way to be 100% sure the same form never gets submitted twice is to embed a unique identifier in each one you issue and track which ones have been submitted at the server. The pitfall there is that if the user backs up to the page where the form was and enters new data, the same form won't work.
There are two parts to the answer:
Ensure duplicate posts don't mess with your data on the server side. To do this, embed a unique identifier in the post so that you can reject subsequent requests server side. This pattern is called Idempotent Receiver in messaging terms.
Ensure the user isn't bothered by the possibility of duplicate submits by both
redirecting to a GET after the POST (POST redirect GET pattern)
disabling the button using javascript
Nothing you do under 2. will totally prevent duplicate submits. People can click very fast and hackers can post anyway. You always need 1. if you want to be absolutely sure there are no duplicates.
You can use replaceState method of JQuery:
<script>
$(document).ready(function(){
window.history.replaceState('','',window.location.href)
});
</script>
This is the most elegant way to prevent data again after submission due to post back.
Hope this helps.
If you refresh a page with POST data, the browser will confirm your resubmission. If you use GET data, the message will not be displayed. You could also have the second page, after saving the submission, redirect to a third page with no data.
Well I found nobody mentioned this trick.
Without redirection, you can still prevent the form confirmation when refresh.
By default, form code is like this:
<form method="post" action="test.php">
now, change it to
<form method="post" action="test.php?nonsense=1">
You will see the magic.
I guess its because browsers won't trigger the confirmation alert popup if it gets a GET method (query string) in the url.
The PRG pattern can only prevent the resubmission caused by page refreshing. This is not a 100% safe measure.
Usually, I will take actions below to prevent resubmission:
Client Side - Use javascript to prevent duplicate clicks on a button which will trigger form submission. You can just disable the button after the first click.
Server Side - I will calculate a hash on the submitted parameters and save that hash in session or database, so when the duplicated submission was received we can detect the duplication then proper response to the client. However, you can manage to generate a hash at the client side.
In most of the occasions, these measures can help to prevent resubmission.
I really like #Angelin's answer. But if you're dealing with some legacy code where this is not practical, this technique might work for you.
At the top of the file
// Protect against resubmits
if (empty($_POST)) {
$_POST['last_pos_sub'] = time();
} else {
if (isset($_POST['last_pos_sub'])){
if ($_POST['last_pos_sub'] == $_SESSION['curr_pos_sub']) {
redirect back to the file so POST data is not preserved
}
$_SESSION['curr_pos_sub'] = $_POST['last_pos_sub'];
}
}
Then at the end of the form, stick in last_pos_sub as follows:
<input type="hidden" name="last_pos_sub" value=<?php echo $_POST['last_pos_sub']; ?>>
Try tris:
function prevent_multi_submit($excl = "validator") {
$string = "";
foreach ($_POST as $key => $val) {
// this test is to exclude a single variable, f.e. a captcha value
if ($key != $excl) {
$string .= $key . $val;
}
}
if (isset($_SESSION['last'])) {
if ($_SESSION['last'] === md5($string)) {
return false;
} else {
$_SESSION['last'] = md5($string);
return true;
}
} else {
$_SESSION['last'] = md5($string);
return true;
}
}
How to use / example:
if (isset($_POST)) {
if ($_POST['field'] != "") { // place here the form validation and other controls
if (prevent_multi_submit()) { // use the function before you call the database or etc
mysql_query("INSERT INTO table..."); // or send a mail like...
mail($mailto, $sub, $body); // etc
} else {
echo "The form is already processed";
}
} else {
// your error about invalid fields
}
}
Font: https://www.tutdepot.com/prevent-multiple-form-submission/
use js to prevent add data:
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}