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