Why is my button still posting back? How do I get my javascript / jQuery to work correctly?

I'm trying to write some javascript / jQuery code to start a timer when the user enters a character into my asp:textbox, (a character that isn't a return key or a tab key), and then stop the timer when the user exits the asp:textbox or hits the return key or tab key. below, first is a sample of my script and HTML. below that is a test sample of script and HTML that i found. in the test sample, when a user clicks the button, the timer starts, and changes color with each passing second (tick) of the timer, and there is no postBack. in my code, the timer starts but then does a post back and resets the page, even though i have set AutoPostBack to false for my button. How can I fix this so my timer will work correctly? I'm just testing step by step til i get to where I get my javascript completely written to do what I want it to do as i described above. so please feel free to help me complete this task or just the stumbling block that I'm on now.

my script / HTML
        var count = 0, chkfn = null;

        function changeColor() {
            // Call function with 1000 milliseconds gap
            chkfn = setInterval(starttimer(), 1000);
        }

        function starttimer() {
            count += 1;
            var oElem = document.getElementById('divtxt');
            oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
            document.getElementById('pcount').innerHTML = "Your Time Starts: " + count;
        }

        $(function () {
            $(".testButtonClass").click(function (e) {
                changeColor();
                var oElem = $(document.getElementById('TextBox1'));
                var oElemPara = $(document.getElementById('pcount'));
                //changeColor();
                //if (e.keyCode != 13) {
                //e.preventDefault();
                //$(".txtTestTimerValue").append("test");                      
                //oElemPara.innerHTML = "Your Time Starts: " + count;
                //$('#<%=TextBox1.ClientID%>').val("test");

                //}
                //else {
                //e.preventDefault();
                //}
            });
        });


HTML
<div class="divTest" id="divTest" style="float: left;">
       <div style="float: left">
              <div id="divtxt">
                      <p id="pcount" style="font: bold 24px verdana">
                       </p>
              </div>
      </div>
      <div style="float: left">
           <asp:TextBox ID="TextBox1" type="text" class="txtTestTimerValue" runat="server" AutoPostBack="false"
                                                Width="73px" Style="margin: 0 96px 0 0;" />
          <asp:Button ID="testButton" CssClass="testButtonClass" runat="server" AutoPostBack="false"/>
     </div>
 </div>

Open in new window


test script / HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var count = 0, chkfn = null;
        function changeColor() {
            // Call function with 1000 milliseconds gap
            chkfn = setInterval(starttimer, 1000);
        }
        function starttimer() {
            count += 1;
            var oElem = document.getElementById("divtxt");
            oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
            document.getElementById("pcount").innerHTML = "Your Time Starts: " + count;
        }
        function stoptimer() {
            clearInterval(chkfn);
            chkfn = null;
            count = 0;
            document.getElementById("pcount").innerHTML = '';
        }
    </script>
</head>
<body>
    <div id="divtxt">
        <p id="pcount" style="font: bold 24px verdana">
        </p>
    </div>
    <button onclick="changeColor();">
        Start Timer</button>
    <button onclick="stoptimer();">
        Stop Timer</button>
</body>
</html>

Open in new window

LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MrunalCommented:
Hi

Update your HTML as:
<button onclick="return changeColor();">
        Start Timer</button>
<button onclick="return stoptimer();">
        Stop Timer</button>

Open in new window


and js functions as:

var count = 0, chkfn = null;
        function changeColor() {            
            // Call function with 1000 milliseconds gap
            chkfn = setInterval(starttimer, 1000);
            return false;
        }
        function starttimer() {            
            count += 1;
            var oElem = document.getElementById("divtxt");
            oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
            document.getElementById("pcount").innerHTML = "Your Time Starts: " + count;            
        }
        function stoptimer() {
            clearInterval(chkfn);
            chkfn = null;
            count = 0;
            document.getElementById("pcount").innerHTML = '';
            return false;
        }

Open in new window

0
RobOwner (Aidellio)Commented:
The <asp:button gets rendered as a submit button.  It's not what you want, instead just use the standard <button> tag. That way it acts as a button and not a submit
0
RobOwner (Aidellio)Commented:
If you're hell bent on using it then disable the click event on the server and use your javascript to capture the click event.

<asp:Button runat="server" OnClientClick="return false;" />

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
As far as I know the <button> element will also submit

Try this as a test
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
        var count = 0, chkfn = null;

        function changeColor() {
            // Call function with 1000 milliseconds gap
            chkfn = setInterval('starttimer()', 1000);
        }

        function starttimer() {
            var color = ($('#divtxt').css('color') == 'rgb(255, 0, 0)') ? 'rgb(0, 0, 255)' : 'rgb(255, 0, 0)';
            console.log($('#divtxt').css('color'));
            $('#divtxt').css({color: color});
            $('#pcount').html("Your Time Starts: " + count++);
        }

        $(function () {
            $(".testButtonClass").click(function (e) {
                e.preventDefault();
                changeColor();
            });
        });
    </script>
</head>
<body>
<div class="divTest" id="divTest" style="float: left;">
       <div style="float: left">
              <div id="divtxt">
                      <p id="pcount" style="font: bold 24px verdana"></p>
              </div>
      </div>
      <div style="float: left">
           <input type="text" id="TextBox1" class="txtTestTimerValue"  style="margin: 0 96px 0 0 width: 73px;" />
          <button id="testButton" class="testButtonClass">Start</button>
     </div>
 </div>
</body>
</html>

Open in new window

To make the Javascript work with your ASP code then should look like this
0
reitersCommented:
$('#myButton').click(function(){
     // do stuff here
})

<button id="myButton" onclick="javascript: void(0);">

That's how I usually work with buttons.   Obviously decorate to your liking.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michael SterlingWeb Applications DeveloperAuthor Commented:
thank you
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.