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>
Related
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.
I have a simple HTML button in my webpage having its HTML shown below:
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<input type="button" value="Finish" class="finish">
</div>
When I applied the onclick="checkValidity();" on my button it was not working but when I tried it with the container div of the input button it starts working.
I am unable to understand why it was not working while I called this function in button? Can anyone have any idea on it.
Interesting thing is that is working in another webpage on the input button too... !
First of all, checkValidity is a keyword. Stop using it. Change it to CheckIfValid or something like that.
Simple example in the jsfiddle. Check here
chck = function (obj)
{
alert('hi: ' + obj.id);
return true;
}
checkValidity is an event for input objects and returns true if the input has valid data. So, there is no scope for js event here.
It works on div because DIV is not an input element.
Let me know if you have any issues.
You have to surround that input tag inside a form tag.
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<form>
<input type="button" value="Finish" class="finish">
</form>
</div>
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
}
I have a page on which a list of properties is displayed (i.e houses). This list is made up using CSS. So I've built a second CSS class, which makes the properties/houses align properly in 2 columns. Until now I did this by pressing a button, posting back, and outputting different html (basicly the same, but with other Css class references).
Now I found this question on SO and I implemented a basic scenario. A div with the class "yellow" is written to the html page, and a button changes this class to "red". This happens, but the div immediately changes back to class "yellow".
I'm a very very beginner in JS but not a beginning programmer. This would be a great addition to my site, but I can't find a proper answer. I apologize if this question is redundant.
<script type="text/javascript">
function changeView() {
document.getElementById("box").className = " red";
}
Grtz, thanks in advance, Christophe,
By default a button element is of type 'submit' - which will cause your browser to post back to the server.
Try changing the type to button instead.
<input type="button" ....
More info on the difference here... Difference between <input type='button' /> and <input type='submit' />
If your button causes a postback (possibly a server control with an asp: tag), the javascript changes you made will be lost as by default an asp button submits a page to the server as a result of which your page reloads.
If all you need to change the class of a div make it a simple html button like
<input type="button" onclick="changeView()" value="Change" />
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>