I have this small issue, regarding an ajax form that i'm submitting (with success).
I followed a tutorial (http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/), and the form that it is submitting is just a standard contact form. However mine is sending a message through the form, and thus I want to display a message to the user, and then give the user the ability to remove the message on click.
HTML
<div class="module send-message" id="send-message">
<form name="send" class="pure-form pure-form-stacked">
<fieldset>
<label for="recipient" id="recipient_label">Your recipient(s):</label>
<input type="text" name="recipient" id="recipient" class="pure-input-1 input-tags"></input>
<label class="error" id="recipient_error" for="recipient">This field is required.</label>
<label for="message">Your message:</label>
<textarea name="message" maxLength="120" rows="4" class="pure-input-1" id="message"></textarea>
<label class="error" for="message" id="message_error">This field is required.</label>
<p id="counter" style="margin-bottom: 25px;"><span>0</span> characters of 120</p>
<input type="submit" name="submit" id="submit_btn" class="button btn-large btn-warning" value="Pipit"></input>
</fieldset>
</form>
</div>
JS/Jquery:
var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#send-message').html("<div id='feedback'></div>");
$('#feedback').html("<h2>Your message has been sent!</h2>")
.append("<p>Click anywhere to hide this message.</p>")
.hide()
.fadeIn();
}
});
return false;
});
});
:: UPDATE :: Thanks to a number of people on this fantastic site, I got it to work!
However, there are two minor flaws:
Can any1 help here?
Thank you so much!
You can attach a click function to the div like so:
$('#feedback').html("<h2>Your message has been sent!</h2>")
.append("<p>Click anywhere to hide this message.</p>")
.hide()
.fadeIn()
.click(function(){
// Hide the div and remove it
$(this).fadeOut(function(){
$(this).remove();
});
)};
Or if you'd just like to auto hide the message you could use the jQuery delay() function or simply setTimeout. Here's how you'd use the delay() function:
$('#feedback').html("<h2>Your message has been sent!</h2>")
.append("<p>Click anywhere to hide this message.</p>")
.hide()
.fadeIn()
.delay(1000)
.fadeOut();
Alternatively here's an example using a setTimeout funciton:
setTimeout(function(){
$('#feedback').hide();
}, 1000);
The 1000 here relates to the number of milliseconds to wait before executing the code.
1000 miliseconds = 1 second
EDIT:
Ok so to make sure you're not replacing the form you need to append the message instead like this:
$('#send-message').append("<div id='feedback'></div>");
You can also temporarily hide the form and then show it once you're user has dismissed the feedback message:
$('#send-message form').hide();
// Add show form to the click function
.click(function(){
// Hide the div and remove it
$(this).fadeOut(function(){
$(this).remove();
$('#send-message form').show();
});
)};
FURTHER EDIT:
// Simple jQuery Plugin
$.fn.clearForm = function() {
$this = this;
// Find inputs
$this.find('input[type=text], select').val('');
$this.find('input[type=checkbox]').removeAttr('checked');
};
// Usage
$('#form').clearForm();
Example here: http://jsfiddle.net/dUQ9T/5/
Something like this:
$('#feedback').on('click',function() { $(this).hide(); });
Assign a click event to your feedback div that causes it to hide when clicked.
Something like this should work for you:
Change this line of code:
$('#send-message').html("<div id='feedback'></div>");
to:
$('#send-message').html("<div id='feedback' onclick='hideMe()'></div>");
then add:
var hideMe = function () {
$("#feedback").hide();
}
if you just want to hide it. If you want to remove it completely, then use .remove() instead of .hide();
var hideMe = function () {
$("#feedback").remove();
}
Try this,
$('#send-message').html("<div id='feedback' onclick='$(this).hide();'></div>");
If you want to offer the end-user the possibility to hide the #feedback div wherever he clicks in the document, you could add an event handler to the document and hide the #feedback div whenever a click event occurs:
// jQuery
$(document).on('click', function(){
$('#feedback').hide();
// to show the form again
$('#formID').show();
});
// no jQuery
document.addEventListener('click', function() {
document.getElementById('feedback').style.display = none;
// show the form again
document.getElementById('formID').style.display = block;
});
If you want your user to close that div when he clicks inside the #feedback div, simply change the element that listens for that click event:
// jQuery
$('#feedback').on('click', function(){
$(this).hide();
// show the form
$('#formID').show();
});
// no jQuery
document.getElementById('feedback').addEventListener('click', function() {
this.style.display = none;
// if you want to show the form
document.getElementById('formID').style.display = block;
});
EDIT1: I have updated my answer to show the form div as soon as the feedback div gets hidden. If your form div gets empty after you receive the feedback, you could cache the for m HTML at the beginning of your script, or copy that div in a variable and append it to the div when you re-display your form.
I'd do it like this, on click first fades it out then removes it from the dom completely.
var dataString = 'recipient='+ recipient + '&message=' + message + '&terms=' + terms;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#send-message').html("<div id='feedback'></div>");
var $feedback = $('#feedback');
$feedback.html("<h2>Your message has been sent!</h2>").append("<p>Click anywhere to hide this message.</p>");
$feedback.on("click", function () {
$(this).fadeOut(function () {
$(this).remove();
});
});
$feedback.fadeIn();
}
});
return false;
});
});