JQuery text display problem?

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_sub开发者_JAVA技巧mitted" value="true" />
<input type="submit" name="submit" value="Preview Changes" class="preview-changes-button" /></li>
</ul>
</fieldset>

</form>

</div>

To show the message at the top of the form, create and update a different div than #contact-form.

After you update the message, use setTimeout to remove the message after a period of time. 10 seconds is probably enough.

If you do not feel like modifying your HTML any, you have a few options.

First you can use prepend() which does the opposite of append(). Instead of putting the contents at the end of the selected element, it puts it at the beginning.

<form id="contact-form" ...>
     <li>Results saved!</li>
     .....
</form>

However, you probably don't want to put an <li> inside of a <form> tag, as it's not standards compliant. This option is much better, IMO, and I'd recommend that you use it if you want to stick with an <li> as your tag. (http://api.jquery.com/prepend/)

You can use before(), which places the content immediately BEFORE the selected tag. You'd have:

<li>Results saved!</li>
<form id="contact-form" ...>
    .....
</form>

Still won't validate, but from there you can probably see how to get it to work. (http://api.jquery.com/before/)

This would only happen to appear after submission, so long as you kept it in the same place in your JS code. If you wanted to make it animate interestingly, you could try something like this:

$('#contact-form').before('<li>Results saved!</li>').prev().fadeIn(200).delay(5000).fadeOut(400);

That would fade in the <li> in .2 seconds, hold for 5 seconds, and then fade the message out in .4 seconds. It also assumes that you have a style somewhere that sets this particular <li> to display:none;, otherwise the fadeIn() might work a little funky.

An easy solution would be to provide a predefined message element where you would like the message displayed - i.e.

<li id="contact-form-message"></li>

Then you would simply set the html of the element, for example

$(function() {
  $(".save-button").click(function() {
    $.post($("#contact-form").attr("action"), $("#contact-form").serialize(), function(html) {
        $("div.contact-info-form").html(html);
        $('#contact-form-message').html('Changes saved!');
    });
    return false; // prevent normal submit
  });
});

If needed you could wrap the text to insert in another element to allow formatting etc.