CODEWITHSUNDEEP
javascripthtmlasp.net
tonyelimpus
tonyelimpus

Reputation: 13

Passing html control id to javascript from aspx file

I'm amazed I haven't found an answer to this yet. I'm using a standard html button (as opposed to an asp:Button) in an ASPX file. When calling a javascript function from the onclick attribute, if the javascript call contains a variable, it fails. For example, onclick="func1()" will run perfectly, however, onclick="func2(this.id)", doesn't. I understand that this.id shouldn't work in an asp:Button, but should it fail in a standard html button?

EDIT:

HTML:

<button id="Hour" type="button" class="butshape" onclick="return middlePress(this.id)" disabled></button>

Javascript:

function middlePress(clicked_id){
    document.getElementById("lengthtext").innerHTML=clicked_id;
    clearEnd();
    switch(clicked_id){
        case "Day":
            document.getElementById("11").innerHTML=Date();
            document.getElementById("12").innerHTML="Previous 24";
            document.getElementById("12").disabled=false;
            break;
        case "Week":
            document.getElementById("11").innerHTML=Date();
            document.getElementById("12").innerHTML="Previous 7 Days";
            document.getElementById("12").disabled=false;
            break;
        case "Month":
            document.getElementById("11").innerHTML=Date();
            document.getElementById("12").innerHTML="Previous 30 Days";
            document.getElementById("12").disabled=false;
            break;
    }
}

Upvotes: 0

Views: 925

Answers (3)

NewToJS
NewToJS

Reputation: 2772

UPDATED

Now that you have uploaded something for us to work with I have your source code working.

I have also change the ID of the button to match in your switch case. The button id in your source code didn't match anything so to make sure it all worked I changed it. 

function middlePress(clicked_id){
    document.getElementById("lengthtext").innerHTML=clicked_id;
    switch(clicked_id){
        case "Day":
            document.getElementById("11").innerHTML=Date();
            document.getElementById("12").innerHTML="Previous 24";
            document.getElementById("12").disabled=false;
            break;
        case "Week":
            document.getElementById("11").innerHTML=Date();
            document.getElementById("12").innerHTML="Previous 7 Days";
            document.getElementById("12").disabled=false;
            break;
        case "Month":
            document.getElementById("11").innerHTML=Date();
            document.getElementById("12").innerHTML="Previous 30 Days";
            document.getElementById("12").disabled=false;
            break;
    }
}  
<button id="Day" type="button" class="butshape" onclick="return middlePress(this.id)" >Click me</button>
<div id="lengthtext"></div>
<div id="11"></div>
<button id="12" disabled>Button 12</button>

I hope this helps. Happy Coding!

Upvotes: 1

Arunprasanth K V
Arunprasanth K V

Reputation: 21961

In you code the button is disabled Then the click event will not work

Try following

It should be work

html

<input type="button" id="Hour"  class="butshape" onclick=" middlePress(this.id)" value="button">

javascript

function  middlePress(id)
{
alert(id);
}

You can check here here is working example in fiddle DEMO

Upvotes: 0

Yerko Palma
Yerko Palma

Reputation: 12339

You can also use an asp:button and add your Js function to that element, like said in the documentation. Check that link, here is the code.

<%@ Page Language="VB" %>
<script runat="server">
    Sub Button1_Click(ByVal sender As Object, _
        ByVal e As System.EventArgs)
        Label1.Text = "Server click handler called."
    End Sub
</script>

<body>
  <form id="form1" runat="server">
    <asp:Button ID="Button1" Runat="server" 
      OnClick="Button1_Click" 
      OnClientClick="return confirm('Ready to submit.');" 
      Text="Test Client Click" />
    <br />
    <asp:Label ID="Label1" Runat="server" text="" />
  </form>
</body>
</html>

Upvotes: 1

Related Questions