SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    calling a function when return button is clicked

    Hello all.
    Im coding my site using asp.net. I have the following javascript added to the
    onkeydown event of each textbox on a page:

    Code:
    return IPressedEnterBasic();
    Located within a seperate javascript file, is the following js function (ive made sure that the js file has been inclueded in the <head> tag):

    Code:
    function IPressedEnterBasic()
    {
     if(event.which || event.keyCode)
     {
      if ((event.which == 13) || (event.keyCode == 13)) 
      {
       var save= confirm("Do you want to save?");
       if (save == true)
        {
            document.getElementById("<%=SaveButton.ClientID%>").click();
        }
        else
        {
            return false; 
        }
      }
     } 
     else 
     {
      return true;
     }
    }
    Whenever a keypress is made on any of the textboxes, this function is called. If the key was the enter key, i would like the click event from the SaveButton to be executed. The click event from the SaveButton is located within the cs file of the page that contains the textboxes and look like this:

    Code:
    protected void SaveButton_Click(object sender, EventArgs e)
    {
    }
    At present, the function will not execute the SaveButton, it will execute the button on the page that is currently in focus.
    Where am I going wrong in the above function?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use Page.GetPostBackEventReference

    http://msdn2.microsoft.com/en-us/lib...reference.aspx

    to get the javascript code to fire the event for that control, and incoroperate it into your code

    Code:
    function IPressedEnterBasic(event)
    {
    	if(!event)
    		var event = window.event;
    
    	if(event.which || event.keyCode)
    	{
    		if ((event.which == 13) || (event.keyCode == 13)) 
    		{
    			var save= confirm("Do you want to save?");
    			if (save == true)
    			{
    				<%= Page.GetPostBackEventReference(SaveButton); %>
    				//document.getElementById("<%=SaveButton.ClientID%>").click();
    				return true;
    			}
    		}
    	}
    	return false;
    }
    then setup your textbox to deal with it.

    Stick this in your Page_Load and change TextControl for the name of the text box your wanting to use.

    TextControl.Attributes.Add("onkeydown","return IPressedEnterBasic();");


  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using onkeypress instead of onkeydown. Also, I made a small change to your listener so it will work in FF too.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Template</title>
    <script type='text/javascript'>
    window.onload = function()
    {
      var i, a;
    
      if (!document.getElementsByTagName) return;
    
      a = document.getElementsByTagName('form');
      for (i = 0; i < a.length; ++i) {
        a[i].onsubmit = formOnSubmit;
      }
    
      a = document.getElementsByTagName('input');
      for (i = 0; i < a.length; ++i) {
        if (a[i].type && a[i].type.toLowerCase() == 'text') {
          a[i].onkeypress = IPressedEnterBasic;
        }
      }
    }
    function IPressedEnterBasic(e)
    {
     e = e || window.event;
     if(e)
     {
      if ((e.which == 13) || (e.keyCode == 13)) 
      {
       var save= confirm("Do you want to save?");
       if (save == true)
        {
            //document.getElementById("<%=SaveButton.ClientID%>").click();
            return true; // allow submit
        }
        else
        {
            return false; // don't allow submit
        }
      }
     } 
     else 
     {
      return true;
     }
    }
    function formOnSubmit()
    {
      alert('onsubmit for ' + this.name);
      return false;
    }
    </script>
    </head>
    <body>
    <form name='f1'>
    <p><input type='text'></p>
    <p><input type='text'></p>
    <p><input type='submit'></p>
    </form>
    <form name='f2'>
    <p><input type='text'></p>
    <p><input type='text'></p>
    <p><input type='submit'></p>
    </form>
    </body>
    </html>

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gav! We posted at almost the same time!

    bewise, I don't know anything about asp.net, so I would go with Gav's advice.

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol sorry... Since he/she's using ASP.Net you can get the javascript reference to the postback using that.

    I haven't done it this way before as i've just assigened the call using Attributes.Add.

    Should work fine enoough.

    Off Topic:

    Since your online, fancy looking at my post with regards to dynamic scripts (forgive me if you already have).


  6. #6
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, ive been able to get MikeFosters way working. However, I am looking to use the way gRoberts suggested.

    However, when trying this way, (i.e. adding an onkeydown contol to each textbox in the page_load and adding the function to javascript.js), I cant get anything to work, the confirmation box will not even appear.

    By using the firefox javascript console, I get the following errors:

    1. illegal XML character <%= Page.GetPostBackEventReference(SaveButton); %>
    2. IPressedEnterBasic is not defined

    Any ideas whats going on?

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there an ASP.Net guru in the house?

  8. #8
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried "cheating" and setting the focus the the save button before calling the click?

  9. #9
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought this line of code did both?

  10. #10
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternativley, as ive already got the code that Mike suggested working, I might use that, however, I do need a slight alteration making.

    Is there any way of making an input from form f1 to access IPressedEnterBasic functon where as an inout from form f2 will access IPressedEnterAdvanced?

    Thanks

  11. #11
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your getting the errors in the Javascript console because some how your page is not parsing the ASP.Net.

    And because theirs an error in parsing the <%= Page.GetPostBackEventReference(SaveButton); %> your IPressedEnterBasic failed.

    I will try and sort something out for you as I am using Linux and the lack of support for visual studio is a pain so I will have to try and do it manually (oh the pain).

    I will get back to you in a mo.


  12. #12
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <%@ Page Language="C#"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <script language="C#" runat=server>
    
    void Page_Load(Object sender, EventArgs e)
    {
    	textBox.Attributes.Add("onkeypress", "return IPressedEnterBasic(event);");
    }
    void SubmitBtn_Click(Object sender, EventArgs e) 
    {
    	Message.Text = "Enter was pressed";
    }
    
    </script>
    <script>
    function IPressedEnterBasic(event)
    {
    	if(!event)
    		var event = window.event;
    
    	if(event.which || event.keyCode)
    	{
    		if ((event.which == 13) || (event.keyCode == 13)) 
    		{
    			var save= confirm("Do you want to save?");
    			if (save == true)
    			{
    				<% Response.Write(Page.GetPostBackEventReference(button)); %>
    				return true;
    			}
    		}
    	}
    	return false;
    }
    </script>
    
    </HEAD>
    
    <BODY>
    
    <form runat="server">
    
    <asp:textbox runat="textBox" runat="server"></asp:textbox>
    
    <asp:button id="button" runat="server" text="Button"></asp:button>
    <asp:literal id="Message" runat="server"></asp:literal>
    
    </form>
    
    </BODY>
    </HTML>
    If it fails, I will go back to my XP Box and do it in visual studio and actually test it.


  13. #13
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The function that you have provided seems to work, however, when inserting multiple textboxes that reference different javascript functions (i.e. require different post back events you can see that the function does not work:

    Code:
    <%@ Page Language="C#"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    
    <script language="C#" runat=server>
    
    void Page_Load(Object sender, EventArgs e)
    {
        TextBox1.Attributes.Add("onkeypress", "return IPressedEnterBasic(event);");
        TextBox2.Attributes.Add("onkeypress", "return IPressedEnterAdvanced(event);");
    }
    
        protected void button_Click(object sender, EventArgs e)
        {
            Message.Text = "Enter1 was pressed";
        }
    
        protected void button1_Click(object sender, EventArgs e)
        {
            Message.Text = "Enter2 was pressed";
        }
    </script>
    <script>
    function IPressedEnterBasic(event)
    {
    	if(!event)
    		var event = window.event;
    
    	if(event.which || event.keyCode)
    	{
    		if ((event.which == 13) || (event.keyCode == 13)) 
    		{
    			var save= confirm("Do you want to save?");
    			if (save == true)
    			{
    				<% Response.Write(Page.GetPostBackEventReference(button)); %>
    				return true;
    			}
    		}
    	}
    	return false;
    }
    
    function IPressedEnterAdvanced(event)
    {
    	if(!event)
    		var event = window.event;
    
    	if(event.which || event.keyCode)
    	{
    		if ((event.which == 13) || (event.keyCode == 13)) 
    		{
    			var save= confirm("Do you want to save?");
    			if (save == true)
                {
    				<% Response.Write(Page.GetPostBackEventReference(Button1)); %>
    				return true;
    			}
    		}
    	}
    	return false;
    }
    </script>
    
    </HEAD>
    
    <BODY>
    
    <form id="Form1" runat="server">
        &nbsp;<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
    
    <asp:button id="button" runat="server" text="Button" OnClick="button_Click"></asp:button>
    <asp:literal id="Message" runat="server"></asp:literal>
        &nbsp;&nbsp;
        <br />
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="Button1" runat="server" OnClick="button1_Click" Text="Button" />
        &nbsp;&nbsp;
    
    </form>
    
    </BODY>
    </HTML>
    By clickin on enter on both textboxes, message label will dispay "Enter1 was pressed". By clickin enteron the second textbox, message label should display "Enter2 was pressed".

    ANy help sorting this out would be much appreciated.
    Thanks alot Gav


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •