Develop Reference

Button loading state Asp.net JavaScript

I using bootstrap and i want to use that; http://getbootstrap.com/javascript/#buttons-stateful
<asp:Button ID="Button1" runat="server" Text="Send It" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off" />
<script>
$('#Button1').on('click', function () {
var $btn = $(this).button('loading')
$btn.button('reset')
})
</script>
But it doesn't work. what can i do to work this?

When an ASP.NET control is rendered, it's assigned a new ID. If you do an inspect element on your button, you'll notice it's ID is actually not Button1. Because of this, your $('#Button1') selector is not finding anything.
If you're using a version of ASP.NET that supports it, you can put clientIDMode="static" on your button to keep the ID from changing.
If not, you can get the client ID by replacing $('#Button1') with $('#<%=Button1.ClientID%>')

Make sure jquery is loaded
Make sure boostrap css is loaded
Make sure bootstrap javascript is loaded
It looks like when your button is loaded it is immediately reset. Trying have the button load in the before step in an ajax request. Then put the rest in the complete step of the ajax step. This way you can see it working.

Display a div on button click

I have a div, whose display is set to none. On button click, I need to show this div.
I have wrote a JavaScript function to do so, and it works but on click of the button the div is shown and again it hides. What is to be done additionally so that is remains.
JavaScript is as follows:
function show_popup() {
document.getElementById("Div1").style.display = 'block';
}
And div is as follows:
<div id="Div1" style="display:none">
The JavaScript function is called on button click as follows:
<asp:Button ID="Button3" runat="server" OnClientClick="javascript: show_popup()" Text="Button" />
Please help me out.

If I interpret your question correctly: the div resets to be hidden on page refresh or navigation. This is to be expected, the display value should be handled on the server side too.
As others have said, the problem is that when you click on the button, the page is posted to the server. If you do not want to do this, you should use a normal HTML button (with type="button"), instead of an ASP one.

Your Javascript is working, the Problem seems to be the Button implemented with ASP.
The Problem could be the Serversided implementation of the Button, here is the HTML implementation. Things are working there.
function show_popup() {
document.getElementById("Div1").style.display = 'block';
}
<div id="Div1" style="display:none">asdasdasdasdasdasd</div>
<input type="button" onclick="show_popup()" value="Show"></input>

How to create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?

First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>

Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}

HTML Input type image won't redirect upon click?

I have the following code, which works fine:
<input type="button" name="btnHello" value="Hello" onclick="Test();"/>
and here is the JS function:
function Test() {
window.location.href = "Page2.aspx";
}
When I click my Hello button, it redirects to Page2.aspx like expected. But when I change my button to an image button:
<input type="image" src="images/myimage.jpg" name="btnHello" onclick="Test();"/>
It no longer works. The page posts back, but its more like a refresh. I can put an alert in the JS function to see that it is getting called, but I'm not sure why the redirect doesn't work? Has anyone ever experienced this?
I know its probably something stupid, but I'm stumped.
Many thanks in advance!

You need to return false from the event handler to prevent the default action.
However, since you don't want it to postback in the first place, you might as well use an ordinary <img /> instead of an <input />.

The redirect is getting cancelled because you are doing a postback. Add return false; after the function test();
e.g
onclick="test();return false;"

Try using an img tag:
<img src="images/myimage.jpg" name="btnHello" onclick="Test();"/>

input type image does not have a onclick event. You need to use the img tag instead.
<img onclick="Test();">

Submit button displays an image based on the time of the day

Basically there is an empty box with a submit button directly underneath. The empty box might have a default picture loaded to begin with. When a user clicks the submit button, how can I display a different picture (in place of the default) based on a certain time of the day. I don't really need an answer regarding the checkTime logic, but I would appreciate some help with regards to the submit button being able to change a picture in the same spot. Thanks guys.

if you just have a simple button, you can add an onclick event to it:
Example 1:
<input type="button" onclick="changeImage()" />
and your changeImage() function will have the logic to follow
Example 2:
<input type="button" id="submitButton" value="Button"/>
Javascript -
document.getElementById("submitButton").onclick = function () {
// run the logic
}
images can be switched using the src property
javascript -
document.getElementById("theImage").src = "newImage.jpg";

Since you are talking about a "Submit" button I assume it is within a form. Is submitting the form supposed to have some other effect? If not, use type="button" rather than type="submit". Either way, here is some basic code to get you started:
<img id="thePicture" src="...">
<input type="submit" value="Go" onclick="return changePicture();">
<script>
function changePicture() {
// your logic here to set which picture to use
var newPicture = "yourpath/images/img1.jpg";
document.getElementById("thePicture").src = newPicture;
// return false to stop the form submitting, otherwise
return true;
}
</script>