Question

我正在玩jquery并制作了一个表单，在没有页面刷新的情况下提交信息，但在tutorial我跟着它必须首先显示一个表单供人们编辑，但我想要做的是略有不同

我想显示一个用户个人资料页面，然后在每个项目旁边都有一个小编辑链接，这会导致在单击编辑时显示文本字段。我相信我可以在没有刷新的情况下提交表单，但是如果单击“编辑”按钮而没有刷新，我怎么能显示一个表单？

我知道如何才能实现这一目标，甚至更好地了解我应该如何学习如何做到这一点？我浏览了jquery网站上的示例项目，并且没有一个看起来通过点击隐藏/取消隐藏。

Answer 1

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

我正在做的事情 simmilar 到你需要的东西：

（此特定代码从可见表单中获取一些输入，并将其聚合为一个不可见的形式供以后使用）

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 2

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

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

Answer 3

以下是我如何处理这个概念的快速示例，我将通过发布和验证以及其他所有其他服务器端脚本等方式进行跟进，但这可以作为您整体的踏脚石。几乎所有你需要记住的是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 4

Lostsoul，

我会在UpdatePanel控件中使用asp DataGrid：

的.ascx：

<asp:UpdatePanel ID="yourUPpanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
       <asp:DataGrid ID="yourDG" runat="server" AutoGenerateColumns="False" CellPadding="2" AllowSorting="False" AllowPaging="False" EnableViewState="false" onItemCommand="yourDG_CellClick">
          <FooterStyle CssClass="cssFooter"></FooterStyle>
          <AlternatingItemStyle CssClass="CssAltItem"></AlternatingItemStyle>
          <ItemStyle CssClass="cssGridItem"></ItemStyle>
          <HeaderStyle CssClass="GridHeader"></HeaderStyle>
       </asp:DataGrid>
       <asp:Panel ID="yourAdditionalStuff" runat="server" Visible="false">
         <table>
           <tr>
             <td>
               <asp:TextBox ID="yourTXT" runat="server" Width="100px"/>
             </td>
           </tr>
         </table>
       </asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

的.vb

Public Sub yourUPpanel_Load(ByVal sender As Object, ByVal e As EventArgs) Handles yourUPpanel.Load

        If cnADO Is Nothing Then blahblah.getConnection("yourserver", cnADO) 'whatever the case may be here
        Try

            Dim da As SqlDataAdapter

            Dim cmd3 As New SqlCommand
            cmd3.Connection = cnADO
            cmd3.CommandType = CommandType.StoredProcedure
            cmd3.CommandText = "SP to populate GRID"     'whatever the case may be here
            daPeople = New SqlClient.SqlDataAdapter
            daPeople.SelectCommand = cmd3

            If yourDG.Columns.Count <= 0 Then
                Dim btnc As New ButtonColumn
                btnc.ButtonType = ButtonColumnType.LinkButton
                btnc.HeaderText = "Edit"
                btnc.DataTextField = "primarykey"
                btnc.DataTextFormatString = "<img border='0' src=" & ResolveUrl("~/images/edit.gif") & ">"         'whatever the case may be here
                btnc.CommandName = "Edit"
                btnc.ItemStyle.HorizontalAlign = HorizontalAlign.Center
                yourDG.Columns.Add(btnc)

                Dim bc As New BoundColumn

                bc = New BoundColumn
                bc.DataField = "sqlColumnName"
                bc.HeaderText = "First"
                yourDG.Columns.Add(bc)

            End If

            Dim dt As New DataTable
            yourDG.Fill(dt)
            yourDG.DataSource = dt
            yourDG.DataBind()

            'lbtnEditAddPerson.Visible = True
        Catch ex As Exception

        Finally
            If Not cnADO Is Nothing Then
                If cnADO.State = ConnectionState.Open Then
                    cnADO.Close()
                End If
            End If
        End Try
    End Sub



 Protected Sub yourDG_CellClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)

        Dim cmd As String = e.CommandName.ToString.ToUpper
        If cmd.ToUpper = "EDIT" Then
            Using cnADO As SqlConnection = New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("yourserver").ToString) 'whatever the case may be here
                Using scmd As New SqlCommand("", cnADO)
                    scmd.CommandText = "YOURTEXTHERE"

                    Using dr As SqlDataReader = scmd.ExecuteReader()
                        If dr.Read Then
                            'fill textbox for load
                        End If
                    End Using
                End Using
            End Using

            yourAdditionalStuff.Visible = True


        ElseIf cmd.ToUpper = "ANOTHERCOMMAND" Then 'if you want to...allows for extensibility (would need another column tho)

        End If
End Sub

请注意，这是一个框架，但应该非常接近您需要的内容（或至少为您提供搜索内容）。我实际上已经使用过这种方法，因此我可以确认它确实有效。如果您没有使用数据库（即，如果您不需要保存/加载用户在您出现的文本框中放置的内容），那么它应该简化。这应该让你谷歌搜索。希望它有所帮助！

-sf

编辑：Per Chris的评论，我认为：

function hideOnClick(){
  var d =  document.getElementById('<% =yourtextbox.ClientID %>');
  if(d.style.display == "none"){
     d.style.display = "inline";
  }else{
     d.style.display = "none";
  }
 }

如果您需要的是客户端javascript来切换显示/隐藏，

可能会对您有所帮助。您只需将其附加到编辑按钮即可。

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

4 个答案: