[RESOLVED]How to set focus on field on edit click from another page

HTML, Jquery, Linq, Post, TextBox, Web Forms, Xml, , , , , ,

UI is like below:

Page 1 – 3 Textboxes

Page 2

Details

Edit Link for Textbox 1

Edit Link for Textbox 2

Edit Link for Textbox 3

When i click edit link on page 2, it should go the page 1, respective field & have the cursor on that field.

On page 1, i have something like below:

<div id="field1">
    Field 1
    <input type=textbox>
</div>
    <div id="field2">
    Field 2
    <input type=textbox>
</div>
        <div id="field3">
    Field 3
    <input type=textbox>
</div>
<div><input type=submit value=submit></div>

On page 2:

<div>
    <a href="Page1#field1">Edit</a>
</div>
<div>
    <a href="Page2#field2">Edit</a>
</div>
<div>
    <a href="Page3#field3">Edit</a>
</div>

Not able to get the cursor thing working. any idea.

You can pass the ID of the control which needs to be focused on in a query string.

page1.aspx?controlToFocus=textbox1

In page1, read the query string, and set the focus by using javascript.

http://stackoverflow.com/questions/17500704/javascript-set-focus-to-html-form-element

 

Hi,

Try setting Names to the textboxes:

<div id="field1">
    Field 1
    <input type=textbox name="field1" >
</div>
    <div id="field2">
    Field 2
    <input type=textbox name="field2" >
</div>
        <div id="field3">
    Field 3
    <input type=textbox name="field3" >
</div>

So adding name will set the focus to that field

Hi DreamBig,

Thanks for your post.

As for your problem, you could refer to the following sample.

Page1:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            var sPageURL = window.location.search.substring(1);
            //alert(sPageURL);
            $("#" + sPageURL).focus();
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="field1">
                Field 1
                <input id="f1" type="text" />
            </div>
            <div id="field2">
                Field 2
                <input id="f2" type="text" />
            </div>
            <div id="field3">
                Field 3
                <input id="f3" type="text" />
            </div>
            <div>
                <input type="submit" value="submit" />
            </div>
        </div>
    </form>
</body>
</html>

Page2:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
                <a href="Page1.aspx?f1">Edit</a>
            </div>
            <div>
                <a href="Page2.aspx?f2">Edit</a>
            </div>
            <div>
                <a href="Page3.aspx?f3">Edit</a>
            </div>
        </div>
    </form>
</body>
</html>

If you have any question about this issue, please post back.

Best Regards,

Fei Han

 

Hi Fei Han,

Thanks its working fine. But what can we do for non-JS users.

DreamBig

But what can we do for non-JS users.

Then you have to for a server side implementation.

Page1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page1.aspx.cs" Inherits="ForumTest.Page1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="field1">
            Field 1
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
        <div id="field2">
            Field 2
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </div>
        <div id="field3">
            Field 3
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </div>
        <div>
            <input type="submit" value="submit">
        </div>
    </form>
</body>
</html>

Note that I’ve converted all the textboxes to asp:TextBox since I need to access those from code behind now.

Page1 code behind (C#)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ForumTest
{
    public partial class Page1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string controlName = Request.QueryString["control"];
            TextBox tb = (TextBox)Page.FindControl(controlName);
            tb.Focus();
        }
    }
}

Page2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page2.aspx.cs" Inherits="ForumTest.Page2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a href="Page1.aspx?control=TextBox1">Edit</a>
        </div>
        <div>
            <a href="Page1.aspx?control=TextBox2">Edit</a>
        </div>
        <div>
            <a href="Page1.aspx?control=TextBox3">Edit</a>
        </div>
    </form>
</body>
</html>

Those are the only two options you’ve got really (Either set it from client side using javascripts or set it from code behind). 

I was asking in terms of MVC.

Leave a Reply