Question

JQuery的一些新功能，我想知道如何通过显示保存在表单顶部的消息更改然后在用户离开时消失，当用户单击提交按钮时，保存用户提交的信息已保存网页并返回它？

现在我的代码只显示更改已保存在列表外部的表单底部，并且在用户离开网页并返回到该页面时不会消失。

这是JQuery代码。

$(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
    });
});

这是html代码。

<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>

Answer 1

要在表单顶部显示消息，请创建并更新与#contact-form不同的div。

更新邮件后，请在一段时间后使用setTimeout删除邮件。 10秒就足够了。

Answer 2

如果您不想修改HTML，可以选择几种方法。

首先，您可以使用与prepend()相反的append()。它不是将内容放在所选元素的末尾，而是将其放在开头。

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

但是，您可能不希望在<li>标记内放置<form>，因为它不符合标准。这个选项要好得多，IMO，如果你想坚持使用<li>作为你的标签，我建议你使用它。（http://api.jquery.com/prepend/）

您可以使用before()，它会在所选标记之前立即放置内容。你有：

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

仍然无法验证，但从那里你可以看到如何让它工作。（http://api.jquery.com/before/）

这只会在提交后出现，只要您将它保存在JS代码中的相同位置即可。如果你想让它有趣地制作动画，你可以试试这样的东西：

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

这将在<li>中以0.2秒为单位暂停，持续5秒，然后在.4秒内将消息淡出。它还假设您有一个样式，将此特定<li>设置为display:none;，否则fadeIn()可能会有点时髦。

Answer 3

一个简单的解决方案是提供一个预定义的消息元素，您希望显示消息 - 即

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

然后你只需设置元素的html，例如

$(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
  });
});

如果需要，您可以将文本换行插入另一个元素以允许格式化等。

JQuery文本显示问题？

3 个答案: