如何隐藏/取消隐藏表单？

Question

我使用jquery做了一个表单，可以在不刷新页面的情况下提交信息，但在tutorial中，我遵循的是，它必须首先显示一个表单供人编辑，但我想做的事情略有不同。

我想要显示一个用户配置文件页面，然后有一个小编辑链接旁边的每个项目，这会导致一个文本字段出现，如果他们点击编辑。我相信我可以在不刷新的情况下提交表单，但是当单击“编辑”按钮而不刷新时，如何才能显示表单？

你知道我如何才能做到这一点吗，或者更好，我应该搜索什么来学习如何做到这一点？我浏览了jquery站点上的示例项目，它们似乎都不能通过单击来隐藏/取消隐藏。

Answer 1

这里有一个我如何处理这个概念的快速示例，我将继续发布和验证，以及所有其他一些服务器端脚本等，但这可以作为你的垫脚石。你所要记住的就是javascript/jquery完全是烟雾弥漫，因为它都是在客户端处理的，你基本上需要处理屏幕上的东西，不管它是隐藏的还是其他的。在这种情况下，你有两个元素，一个默认显示，另一个隐藏，当一个元素被选中时，你可以创建一个隐藏在另一个之上的逻辑，并分别对这两个元素执行所需的操作。

<div id="wrapper">
   <div id="container">
      <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
      <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
   </div>
</div>


<script type="text/javascript">
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});
</script>

DEMO

Answer 2

如果不刷新页面，则无法提交HTML表单。但是，可以使用JavaScript (扩展为jQuery)来提交类似的GET或POST请求。您还可以使用jQuery的.append方法插入必要的标记，以动态创建输入。jQuery还可用于访问已输入到字段中的值(通常由id完成)。

我正在做的事情和你需要的类似：

(这个特定的代码从一个可见的表单获取一些输入，并将其聚合成一个不可见的表单以供以后使用)

jQuery('#submitButton').click(function(){

  jQuery('#prev_request').append('<input type="hidden" name="sort_order" value="'+jQuery("input[@name=sort_order]:checked").val()+'" />');
  jQuery('#prev_request').append('<input type="hidden" name="sort_by" value="'+ jQuery("#sort_by option:selected").val() +'" />');


});

Answer 3

我认为最简单的事情应该是这样：

HTML

<form id="form1" style="display: none;">
</form>
<a id="editButton" href="javascript:void(0)">Edit</a>
<a id="closeButton" href="javascript:void(0)" style="display: none;">Close</a>

JavaScript (确保在页面上包含jQuery )

$(function() {
    $("#editButton").click(function() {
        $("#form1").show();
        $("#editButton").hide();
        $("#closeButton").show();
    });

    $("#closeButton").click(function() {
        $("#form1").hide();
        $("#editButton").show();
        $("#closeButton").hide();
    });
});

使用show()和hide()方法添加扩展过渡效果也很容易。只需将所需的转换持续时间传递给函数(以毫秒为单位)，如下所示：

$("#form1").show(500);