JQuery文本显示问题？

JQuery的一种新的，我想知道如何才能声明用户提交的信息已保存，当他们点击提交按钮通过显示消息更改保存在窗体的顶部，然后让用户离开时消失网页并返回到它？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>

来源

2010-03-23 SLAPme

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

更新该消息后，使用setTimeout在一段时间后删除该消息。 10秒可能就够了。

来源

2010-03-23 03:08:15

如果你不想修改你的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> .2秒，保持5秒钟，然后淡出的消息出0.4秒。它还假定您有某种设置此特定<li>到display:none;的样式，否则fadeIn()可能会有点时髦。

来源

2010-03-23 11:05:08

一个简单的解决方案将是，以提供在这里您想显示的消息的预定义消息元件 - 即

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

如果需要，你可以包装文本插入另一个元素，以允许格式化等。

来源

2010-03-26 04:36:16

JQuery文本显示问题？

回答

相关问题