JQuery text display problem?

Posted by SLAPme on Stack Overflow See other posts from Stack Overflow or by SLAPme
Published on 2010-03-23T02:39:28Z Indexed on 2010/03/23 2:41 UTC
Read the original article Hit count: 388

Filed under:
|

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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about html