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.
Related
In my Project, I have a <button id="first" class="first" and I have a button with the same name and id on next page.
I want to trigger it when button on first page is clicked. Any thoughts how to do that?
I tried storing the button class on windows.LocalStorage and get the data on next page to be clicked but it's not working when opened in new tab.
thanks in Advance! hope you can help me.
You can't have two buttons with the same id or any two DOM elements in the same documents with the same id. So the solution to your issue, is to have different ids for each button. And do something as follows:
<button id="button1" #click="clickButton2()">Button 1</button>
<button id="button2" #click="doSomething()">Button 2</button>
While I would still recommend both #click to call doSomething, if for some reason you want to delegate clicking to the second button, your code for clickButton2() would be:
function clickButton2() {
document.getElementById('button2').click();
}
I have multiple buttons that should each run the same bit of javascript. The only difference I want is which file to load from the button being clicked.
<button type="button" name="fileA.csv" id="load_data" class="btn btn-info">Load File A</button>
<button type="button" name="fileB.csv" id="load_data" class="btn btn-info">Load File B</button>
These 2 buttons should load the same bit of javascript code, but I want to use the buttons name attribute to choose which file
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"files/" + ATTRIBUTE_NAME,
dataType:"text",
success:function(data)
.... other code ....
where ATTRIBUTE_NAME is where I want the name attribute from the button press. Is there any way to do this?
EDIT
When I do $(this).attr(‘name’), it only does it for the first button
I don't know if it's exactly what you're looking for but you can put the entire code for the files in a function and use onclick attribute to execute it.
You could try looking into this:https://www.w3schools.com/tags/att_button_name.asp
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.
My buttons (it's inside a for loop) get a name from the database using .getName()
I'm trying to disable a button in javascript based on that name. But I can't seem to find the right way. Any help please?
HTML
<button class="btn btn-success btn-sm startDocker" id="start-<%=environment.getName()%>" name="<%=environment.getName()%>">Start</button>
This code is wrong.Now I wanted to disable the button with a the container.containerName
$('start-' + container.containerName).prop('disabled', true);
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>