We Keep Coding

HTML5 Javascript function not getting called on button click

I have an html page, thats intended to take user's email and password. I defined "login()" method in one of js file but the function doesn't get executed after button click.
HTML file:
http://pastie.org/10276940

Ok,
first, you should be careful about quotes and double quotes... there is already a mistake in your onclick code.
Then, I would not use onclick. I would do it by adding an eventListener (click) on the button, like this :
document.getElementById('myButton').addEventListener('click',function(){
//do something
});
Here is an example on this way to do it.
There are several other ways to do this, like you did with onClick, but here is just the way I would do the job.
http://jsfiddle.net/tz4bnu0m/4/
Problem is also that when you call login in your onclick event, function is just not defined (yet), here is a way to do it with your onclick event, just add function definition before you call it in onclick event :
http://jsfiddle.net/tz4bnu0m/5/
Hope it helps!
(since it is not an input type submit, you don't have to handle default action, click will not submit the form by default)

The problem is on the button.
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById("inputEmail").value,
document.getElementById("inputPassword").value)">Sign in</button>
You are mixing double quotes. Change it by single quotes an it works
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById('inputEmail').value,
document.getElementById('inputPassword').value)">Sign in</button>
This works but...
I don't recommend to you to make this events in HTML directly. You can separate this code and make it more reusable:
<button id="myID"></button>
<script>
document.getElementById("myID").onclick = function() {
// good stuff
};
//other way:
document.getElementById("myID").addEventListener('click', function() {
// good stuff
});
</script>
Good luck

Add more button not working on my admin panel

This code is working but by clicking on the button then the page reload automatically.So, the new div is not appeared.
I can't find out what is the problem. Can you help me please.
<script src="jquery.min.js"></script>
<script>
function newJacky()
{
var new1= "<p>one more added</p>";
$(".apn").append(new1);
}
</script>
<button onclick="newJacky()">Add New</button>
<div id="apn" class="apn"></div>

This code is working but by clicking on the button then the page reload automatically (...)
From the above, I suspect that the <button> is placed inside a <form> element. That would explain why your page is reloaded after clicking the button.
An example using your code with button placed inside form. This would not happen if the button is placed outside the form - example
Solutions:
You can add a type=button attribute to the button (type=submit is by default if the attribute is not specified):
<button type="button" onclick="newJacky()">Add New</button>
DEMO 1
type attribute of <Button> element. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
Reference
Prevent default form submission using event.preventDefault() (add "my-btn" class to the button):
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".my-btn").click(function(event){
event.preventDefault();
var new1= "<p>one more added</p>";
$("#apn").append(new1);
});
});
</script>
<button class="my-btn">Add New</button>
<div id="apn" class="apn"></div>
DEMO 2

What you are getting from the page using jquery is not specified as an elements class or div. Like below:
$("apn").append(new1);
This should either be $(".apn").append(new1); where you are getting an element with class apn, or $("#apn").append(new1); where you are getting an element with div apn.
try that

If you are using jquery, I'd recommend using the on click functionality it provides:
<script src="jquery.min.js"></script>
<script>
$(function() {
$('.addNewBtn').click(function() {
var new1 = '<p>one more added</p>';
$('#apn').append(new1);
});
});
</script>
<button class="addNewBtn">Add New</button>
<div id="apn" class="apn"></div>
Just make sure to add the class to the button.
Fiddle

jQuery click on action link not doing anything?

I have a button which when i click it i would like it to click a hidden action link.
The click on the action link is not doing anything. but if i click the action link my self it works, just not when i make jquery click it?
function myClickFunction() {
$('#CloseLink').click();
//$(document).on("CloseLink", "click", function())
}
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()"/>
<div style="visibility:hidden">
#Html.ActionLink("Close", "APClientIndex", "Home", null, new { id="CloseLink", #class = "btn btn-primary niceButton" })
</div>
Plain html:
<input id="btnClose" type="button" value=" Close " onclick="myClickFunction()">
<div style="visibility:hidden">
<a class="btn btn-primary niceButton" href="/Home/APClientIndex" id="CloseLink">Close</a>
</div>

If what you want is to simulate the user clicking an anchor tag, I don't think that is possible with javascript
What you can do is read the anchor tag's href attribute and change the window location manually:
function myClickFunction() {
var href = $('#CloseLink').attr("href");
window.location.href = href;
}

If I understand what you are trying to do is to fire the click action by javascript?
With $('#CloseLink').click(); you are not firing the click event, you are binding an action to the click, but you don't have any function inside like $('#CloseLink').click(function(){...});
So if you want to fire the click event you need to do $('#CloseLink').trigger('click');

$('#CloseLink')[0].click()
Is what i used as suggested by tewathia in the comments section.
The jQuery click method fires the onclick event of that element. In order to simulate a click on an anchor a tag, you need to run the click method of the DOM element itself.

YUI3 button click event is acting like a submit type instead of a button type

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.

I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html

The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();

jQueryMobile add click event to a button instead of changing page

<p>VERIFY</p>
I am using the above code which is a jQM button with the onClick() set. The onclick is called and doSomething() is executed but after that, jQM shows the "error loading page" message.
How can I supress the error? In this case I want the jQM button but don't want it to change page.
Thanks

Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault(); and e.stopImmediatePropagation(); should stop jQuery mobile from performing the default action on the <a/>.
$("#verify").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
//Do important stuff....
});
Update
The better way to use your existing markup would be to simply add rel="external" to your <a/> And your onclick should behave correctly.
<p>
VERIFY
</p>
This will work since jQuery Mobile will treat the link as a normal <a/> tag and return false will simply stop the default action.

I think your problem is that you have multiple actions on your button and are using a anchor tag. When clicking the button you're invoking the page to transition to index.html and a onClick event.
<a
href="index.html" <-- go to index.html
data-role="button"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
onclick="doSomething(); return false"> <-- Click event
VERIFY
</a>
Might try (might need to remove/add some other attributes)
<input
type="button"
name="verify"
id="verify"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
value="VERIFY" />
and now add a click event
$('#verify').click(function() {
alert('Button has been clicked');
});
Live Example: http://jsfiddle.net/vRr82/2/

I think you should be append data-ajax="false" inside anchor tag..
because in jQuery mobile the page transition is done by AJAX, and for page transition
it must be false..

Use Jquery live Function. That is prety much useful for me