Develop Reference

How to create button event occurs without page load?

I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.

it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>

If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".

Button click event not working while working with div container

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>

How to disable a submit button after one click?

I have this form inside a div and the submit button inside another div.
<div class="container1">
<form name="reg-form" id="signup" action="" method="post">
<div class="sep"></div>
<div class="inputs">
<input type = "submit" id="submit" name="submitkey" value="GENERATE KEY" />
</div>
</form>
</div>
How would I disable the submit button after one click? I tried every javascript code I find but it doesn't work on me. I dont know if it is because the form is inside a div and the submit button is inside another div. Thank you.

document.getElementById('signup').onsubmit = function() {
document.getElementById('submit').disabled = true;
};
Demo
The code should be put under the script, or wrapped inside a DOMContentLoaded/window.onload handler. Make sure your HTML does not have duplicated IDs.
Also, if the button must stay disabled after a page refresh/form submission, you will need cookies or a server-side session. None of these methods are foolproof though, and this is outside of the scope of the question I believe.

If you have jquery you can use this code:
$('#signup').submit(function(){
$('#submit').attr('disabled', 'disabled');
});

form element not working in megnific popup

i have small-image class when i click on it megnefic popup open. in my megnific popup there is big image of clicked image and one button with other-form-opener class when i click on button other-form-div class with form comes up with my custom popup in this part when i click on form element they dont work as default.
<div class="megnific_opener"><img class="small-image" ></div>
<div class="megnific_popup_div">
<img class="big-image">
more-info
</div>
<div class="other-form-div">
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
i give stucture of my html and i already cheked that there is not a z-index problem.
so please help me thank you.
here is my demo in jsfiddle : http://jsfiddle.net/QHh7W/

Please use Magnific popup callbacks and move your custom html inside Magnific popup when opened and move it inside body when closed. You can check below working demo.
jsFiddle demo

Although i cannot get this working as per your that is opening both popups one above another in same window.
but in case you need it like this : open second after clicking from one.
http://jsfiddle.net/yDvvQ/5/
I have added different instance of megnific for both divs.
It is working for both popups, content and form both.
You can later amend it to add more popups or return to first from second.
Please review once and comment.
Regards

Show Interactive Html elements on top of an anchor tag

I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.

Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>

Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}

Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve