Olá, tenho um form em ASP.NET que possui 2 botões + 1 textField. Gostaria de mudar o botão padrão do form via javascript ou jquery. Por exemplo, quando escrevo algo no textField e aperto ENTER, o primeiro botão do for…

[Mudar defaultButton] Mudar defaultButton com javascript ou jquery

Ola,

Primeiro vc vai ter que definir alguns atributos no seus controles, botoes e textbox, para manter nao alterar o id. Talvez isso nao importe muito se vc nao esta usando master pages, mas se vc estiver, o id dos controles vao mudar, por exemplo:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:TextBox ID="textBox" runat="server" ClientIDMode="Static" />
    <asp:Button ID="Button1" Text="Button1" runat="server" onclick="Button1_Click" />
    <asp:Button ID="Button2" Text="button2" runat="server" onclick="Button2_Click" />
</asp:Content>

Examinando o HTML depois da renderizacao, vc vai perceber que os IDs esta da seguinte forma, repare que o nome do Content vai ser
adicionado ao ID.

<input id="MainContent_Button1" type="submit" value="Button1" name="ctl00$MainContent$Button1">
<input id="MainContent_Button2" type="submit" value="button2" name="ctl00$MainContent$Button2">

Se vc adicionar o atributo ClientIDMode=“Static” para cada controle e examinar o DOM node novamente vc tera:

<input id="Button1" type="submit" value="Button1" name="ctl00$MainContent$Button1">
<input id="Button2" type="submit" value="button2" name="ctl00$MainContent$Button2">

Muito mais facil para fazer pequisas usando JQuery. Bom agora vamos a parte divertida!

O seu codigo javascript vai ficar assim:

<script  type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" >

        $(document).ready(function () {
            var KEY_ENTER = 13;
            $("#textBox").keypress(function (key) {
                if (key.keyCode == KEY_ENTER) {
                    $("#Button2").trigger('click');
                }
            });
        });

</script>

O codigo faz o seguinte, quando uma tecla for pressionada no textbox, vai chamar essa funcao anonima e vai testar se a tecla pressionada eh 13 (codigo para ENTER). Se for ENTER vai disparar o evento click no botao de ID = Button2 (poderia ser qualquer um que vc escolher).

Vale lembrar que para fazer isso vc vai ter que mudar o atributo AutoEventWireup na tag Page para False : AutoEventWireup=“false”.
Dessa forma, voce sera responsavel por conectar os eventos nos controles web do seu webform.

Ai vai o codigo, completo:

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="false"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <script  type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" >

        $(document).ready(function () {
            var KEY_ENTER = 13;
            $("#textBox").keypress(function (key) {
                if (key.keyCode == KEY_ENTER) {
                    $("#Button2").trigger('click');
                }
            });
        });

    </script>

    <asp:TextBox ID="textBox" runat="server" ClientIDMode="Static" />
    <asp:Button ID="Button1" Text="Button1" ClientIDMode="Static" runat="server" onclick="Button1_Click" />
    <asp:Button ID="Button2" Text="button2" ClientIDMode="Static" runat="server" onclick="Button2_Click" />

</asp:Content>

Default.aspx.cs (Code behind)

using System;

namespace WebApplication3
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Write("button 1 clicked");
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            Response.Write("button 2 clicked");
        }
    }
}

Espero ter ajudado!

//Daniel

2 Respostas

Topicos relacionados