Home/ Questions/Q 879557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:57:05+00:00

I am working on a form where I need to conditionally set the content

  • 0

I am working on a form where I need to conditionally set the content inside the facebox modal. I have created a sample code below where on click of each link I need to open a facebox modal(which is getting opened). Now in this modal I am having a textbox. I want the textbox to be filled automatically with the value equals to the text of anchor which opened the modal i.e On clicking the first hyperlink the textbox should be filled with “Field1” and on clicking the second the textbox should have “Field2” value. Here is the sample code: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
    <form id="HtmlForm" runat="server">

    <a href="#info" rel="facebox">Field1</a> <br />
    <a href="#info" rel="facebox">Field2</a> <br />

    <div id="info" style="display: none;">
        <p>
           Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Edit"  />
        </p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('a[rel*=facebox]').facebox();
        });
    </script>
</body>
</html>

The one approach with which I am going right now is creating a fake anchor and then triggering its click event to open the modal

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
    <form id="aspnetForm" runat="server">
    <a id="afake" href="#info" style="display:none;"></a>
    <a href="#info" rel="facebox">Field1</a> <br />
    <a href="#info" rel="facebox">Field2</a> <br />

    <div id="info" style="display: none;">
        <p>
           Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Edit"  />
        </p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {

            $('a[rel*=facebox]').click(function () {
                $('#afake').facebox().trigger('click');
                var instance = $(this);
                $('#<%= TextBox1.ClientID %>').val(instance.html());
            });

        });
    </script>
</body>
</html>

Looking for more robust solution than mine.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not familiat with ASP.NET enough to know whether the ID ‘#TextBox1’ I reference below is appropriate, but this should help get you started at least. It’s simply setting the value of the input element to the text contained in the anchor tag when the anchor tag is clicked.

    <script type="text/javascript">
    jQuery(function($) {
        $('a[rel*=facebox]').facebox().click(function(event) {
            $('#TextBox1').val($(this).text());
        });
    });
</script>
    • 0