I have spend the last day trying to auto click this button to no avail. The source for the button is this.
<button type="button" class="btn btn-success ng-binding" ng-click="save()" ng-disabled="saveButton.disabled">Save</button>
The button only pops up after a couple of button clicks so I have been looping my scripts just in case.
My first solution (which returns a whole bunch of errors with reloading):
$(function(){
document.getElementsByClassName("save()")[0].click();
});
And my second one (which does nothing):
$(function(){
document.getElementsByClassName("btn btn-success ng-binding")[0].click();
});
I will keep trying different stuff while hopefully waiting for an answer and will update if I find something that works.
Your first solution doesn't work because save() is not a class name of your button, so getElementsByClassName() will return an empty array whose first element is of course undefined, so it doesn't have a click() function.
Your second solution works perfectly fine. I added a click listener to the button and then your solution. As you can see, the event is fired and the alert in the event listener is displayed.
document.getElementsByClassName("btn btn-success ng-binding")[0].onclick = function() {
alert('Button clicked!');
};
document.getElementsByClassName("btn btn-success ng-binding")[0].click();
<button type="button" class="btn btn-success ng-binding" ng-click="save()" ng-disabled="saveButton.disabled">Save</button>
Related
I am working on MCV core with the Dapper project. On one of my pages, I have a Grid that contains records and ACTION,
No Name Address Mobile UPDATE VIEW
1 XYZ XYZ 123 UPDATE VIEW
2 XYZ XYZ 456 UPDATE VIEW
When I click on the UPDATE Link from a specific row I am opening my new PAGE
updareUserRecord.cshtml IN NEW TAB.
When I click on UPDATE BUTTON after updating the record in updareUserRecord.cshtml, record gets updated. On the SAME page, I have CLOSE BUTTON. I want to close the updareUserRecord.cshtml. Only.
Using Jquery and Javascript I have tried but some times below code work sometimes not. Can Anyone give me the perfect solution?
Like no matter, I want to close the PAGE.
This is the code I have tried.
#*<button type="button" class="btn btn-primary" id="btnClose" onclick="javascript:window.open('','_self').close();">Close</button>*#
<button type="button" class="btn btn-primary" id="btnClose" onclick="window.top.close();">Close</button>
<button type="button" class="btn btn-primary" id="btnClose" onclick="window.close();">Close</button>
You can add simply click function using jQuery
$('#btnClose').click(function () {
window.close(); //through writing this statement working also in browser
console
});
I think helps this solution Thank you :)
First of all I have checked many similar questions on here and other resources, but I'm still unable to find the solution I require.
I have a button that links to a specific page within my application and I also have a confirm() box that asks if the user wants to continue, if they click ok then the next page should be loaded, if they click cancel the new page should not load, as if the button was never clicked at all.
Below is my HTML for the button:
<a href="http://localhost:9000/index">
<button onclick="myFunction()" type="button" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>
And now my JS for the confirm box:
<script>
function myFunction() {
if (confirm("Are you sure you wish to cancel this configuration?")) {
return true;
} else {
return false;
}
}
</script>
The issue right now is that your button is triggering the function, however your link is the one that's redirecting.
That in mind, wrapping a <button> with an <a> is invalid:
Content model: Transparent, but there must be no interactive content descendant.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
Some alternatives:
Use a <form> instead of an <a>
<form action="https://stackoverflow.com">
<button type="submit" onclick="return confirm('Are you sure?')" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
</a>
Remove the <a> entirely
function btnCancel() {
if (!confirm("Are you sure?")) return false;
location.href = "https://stackoverflow.com";
}
<button type="button" onclick="btnCancel()" class="btn btn-outline-primary btn-lrg" style="font-size:20px;">CANCEL</button>
Remove the <button> entirely
Cancel
At first all element is hided, but when btn is clicked, I espect it show these:
Unfortunately, every time I click the button its show in a millisecond only then hide again.
This is the code
HTML:
<div id="datetimepicker"></div>
<div id="datetimepicker2"></div>
<input id="saveEdit" type="submit" name="updateDetail" class="btn btn-primary btn-lg btn-block" value="Save"></input>
<input id="cancelEdit" type="reset" name="cancelEdit" class="btn btn-default btn-lg btn-block" value="Cancel"></input>
<input id="editYear" type="submit" name="editYear" class="btn btn-primary btn-lg btn-block" value="Edit"></input>
Javascript:
$('div#datetimepicker').hide();
$('div#datetimepicker2').hide();
$('input#cancelEdit').hide();
$('input#saveEdit').hide();
$(function() {
$("#editYear").click(function() {
$('div#datetimepicker').show();
$('div#datetimepicker2').show();
$('input#cancelEdit').show();
$('input#saveEdit').show();
$('input#editYear').hide();
});
});
It is possible that the calendars will auto-close when they detect a click outside.
Although you show them, they capture the "click outside" and close after that.
You can try 2 things:
Add a timeout when you show the calendars, so it occurs after the default "hide".
Add the calendars in another wrapper div, and try to manipulate the parent instead. And, you should check the calendar configuration to see if it hides automatically
.
$("#editYear").click(function() {
$('input#cancelEdit').show();
$('input#saveEdit').show();
$('input#editYear').hide();
setTimeout(function() {
$('div#datetimepicker').show();
$('div#datetimepicker2').show();
}, 250);
});
Did you use a plugin for this?
If you did it's likely a bit of HTML is out of place or double datepickers isn't a supported feature of that plugin and the datepickers are detecting a click outside of their container.
First check the documentation from the right markup if there's no example of the implementation you are using then you will need to modify the method that closes the datepickers.
put some logs into the datepickers hide method to see what needs modifying. It would help you havea jsfiddle with your issue and know what plugin is being used.
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
Please refer to following section of a Form code. When I click 'SAVE 1' button, nothing happens. On clicking 'SAVE 2' button, alert is displayed. Not sure why 'display(') is not getting invoked on clicking 'SAVE 1' button.
<script type="text/javascript" >
function display()
{
alert("Hello there");
}
</script>
<button id="myFormSubmit1" type="button" class="btn btn-default" onClick='display();'>SAVE 1</button>
<button id="myFormSubmit1" type="button" class="btn btn-default" onClick='alert("Hello there")'>SAVE 2</button>
Do your button elements have actually the same id?
You need to make the id unique I guess.
<button id="myFormSubmit1" type="button" class="btn btn-default" onclick='display();'>SAVE 1</button>
<button id="myFormSubmit2" type="button" class="btn btn-default" onclick='alert("Hello there")'>SAVE 2</button>
Change the button id,it looks same it may not work
yes change your button id . if u want to use same id means use jquery like this
$(document).ready(function(){
$(".btn").click(function()
{
alert("you get particular button attribute")
});
});
Where did you put your js code? I am sure if you put it in the right place, it should work.
button ids should not be same.
move your script to the bottom of the body and I believe it should work.
as everyone else suggested, the button id's have to be different but only if you try to access the buttons,
your issue lies somewhere else. the button id's have nothing to do with your issue
the problem is that you have put your script in the wrong place.
put it in the <head> section and it will work.
here is an example: FIDDLE
*note on the top left panel i chose to appent the scripts in <head> section.