Kind of new to JQuery and I was wondering how can I state that the users submitted info was saved when they click the submit button by displaying the message Changes saved at the top of the form and then have it disappear when the user leaves the
web page and return back to it?
Right now my code only displays that changes were saved at the bottom of the form outside of the lists and will not disappear when the users leave the
web page and return back to it.
Here is the JQuery code.
$(function() {
$(".save-button").click(function() {
$.post($("#contact-form").attr("action"), $("#contact-form").serialize(), function(html) {
$("div.contact-info-form").html(html);
$('#contact-form').append('<li>Changes saved!</li>');
});
return false; // prevent normal submit
});
});
Here is the html code.
<div id="contact-info-form" class="form-content">
<h2>Contact Information</h2>
<form method="post" action="index.php" id="contact-form">
<fieldset>
<ul>
<li><label for="address">Address 1: </label><input type="text" name="address" id="address" size="25" class="input-size" value="<?php if (isset($_POST['address'])) { echo $_POST['address']; } else if(!empty($address)) { echo $address; } ?>" /></li>
<li><label for="address_two">Address 2: </label><input type="text" name="address_two" id="address_two" size="25" class="input-size" value="<?php if (isset($_POST['address_two'])) { echo $_POST['address_two']; } else if(!empty($address_two)) { echo $address_two; } ?>" /></li>
<li><label for="city_town">City/Town: </label><input type="text" name="city_town" id="city_town" size="25" class="input-size" value="<?php if (isset($_POST['city_town'])) { echo $_POST['city_town']; } else if(!empty($city_town)) { echo $city_town; } ?>" /></li>
<li><label for="state_province">State/Province: </label>
<?php
echo '<select name="state_province" id="state_province">' . "\n";
foreach($state_options as $option) {
if ($option == $state_province) {
echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n";
} else {
echo '<option value="'. $option . '">' . $option . '</option>'."\n";
}
}
echo '</select>';
?>
</li>
<li><label for="zipcode">Zip/Post Code: </label><input type="text" name="zipcode" id="zipcode" size="5" class="input-size" value="<?php if (isset($_POST['zipcode'])) { echo $_POST['zipcode']; } else if(!empty($zipcode)) { echo $zipcode; } ?>" /></li>
<li><label for="country">Country: </label>
<?php
echo '<select name="country" id="country">' . "\n";
foreach($countries as $option) {
if ($option == $country) {
echo '<option value="' . $option . '" selected="selected">' . $option . '</option>' . "\n";
}
else if($option == "-------------") {
echo '<option value="' . $option . '" disabled="disabled">' . $option . '</option>';
}
else {
echo '<option value="'. $option . '">' . $option . '</option>'."\n";
}
}
echo '</select>';
?>
</li>
<li><label for="email">Email Address: </label><input type="text" name="email" id="email" size="25" class="input-size" value="<?php if (isset($_POST['email'])) { echo $_POST['email']; } else if(!empty($email)) { echo $email; } ?>" /><br /><span>We don't spam or share your email with third parties. We respect your privacy.</span></li>
<li><input type="submit" name="submit" value="Save Changes" class="save-button" />
<input type="hidden" name="contact_info_submitted" value="true" />
<input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li>
</ul>
</fieldset>
</form>
</div>
