I want to disable this button after the onclick function, so either change the z-index, or disable the button, any ideas?
<button id ="a" type="button"
onclick="window.open('https://www.google.ca')"
>
Thanks.
You need to add this.disabled=true after opening the window.
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
Code above needs 'disabled' instead of 'disable.' Try this:
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
The approach is that you should create a script contain function that does two jobs:
make that button disable using selectById() and adding attribute disabled
then window.open()
i would take a look at jquery
https://api.jquery.com/click/
$( "#a" ).click(function() {
// do your stuff opening a page etc
$( "#a" ).prop("disabled",true);
});
edit:// take Rohit Saxena's approach
this is my first time posting, so forgive a noob if I don't get the format correct. I needed to be able to easily turn a button on and off to 'guide' the user to perform actions in the correct order, and this post helped me in that journey, although I only used part of the answer. I made two functions 'enableClick()' and 'disableClick()', where the parameter is the id of the button, eg: 'enableClick("betButton")' Here is the code:
function disableClick (elementId) {
const x = document.getElementById(elementId);
x.disabled = true;
}
I'm learning js, so everything I'm doing is vanilla at this point on purpose, but it's still fairly simple - obviously, with the enableClick function, the value of x.disabled would be 'false'. These functions can be added inside a function called by a click, after the initial click functionality is complete, so that the button can't be clicked again until the opposite function is called.. love this stuff!
Related
I want to have a pair of radio buttons sitting over an HTML table so that whenever the rb is clicked it will cause the table to rebuild (rebuild the page) by submitting a different URL variable. Is there a way to do this without having to build a form and click a submit button? I'm pretty new to this stuff so please keep any answers basic and/or show samples of code. Thanks!
Html is a Markup Language it will not do the logic for you. that way javascript is there .
<input id="gotogoogle" type="radio" name="name" value="google" checked>
<script>
var radiob = document.getElementById("gotogoogle");
radiob.addEventListener("change", function() {
if(radiob.value == "google")
{
document.location = "http:\\www.gooogle.com"
}
});
</script>
Yes there is, you can use Javascript event binding to help you achieve this. This will get you started. This adds an event binding so when you "change" or click the radio buttons, it can fire an event off.
From here you'd need to research how to rebuild the table data in JS if you don't already know.
$("input[#name='nameofinput']").change(function(){
// Do something interesting here
});
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
i want to use a button as a link to another page. i have looked around and read some solutions but none worked. i dont want to use action in my form tag because i might want to have couple of buttons as links in that form tag.
here is what i have tried last:(didnt work)
<button onclick="location.href='../ClientSide/Registration/registration.aspx'">register</button>
what am i doing wrong? or is there a better/other way?
i really would like to use only html if possible, if not then to use: javascript or asp.net( i dont know jquery or php)
You cannot do this directly using only HTML.
You have two options:
Option 1 Post the data to a single script on the server that decides what to do based on which button is clicked.
<form action="/some-url.aspx" method="post">
<button name="button_action" value="register">register</button>
<button name="button_action" value="another">another</button>
</form>
Then your script at /some-url.aspx would decide what to do next based on the value of button_action.
Option 2 Use JavaScript to change the form's action attribute based on which button is clicked.
<form id="form-with-buttons" action="/some-url" method="post">
<button id="register-button" data-url="/some-url.aspx">register</button>
<button id="another-button" data-url="/another-url.aspx">another</button>
</form>
<script>
$("#register-button, #another-button").click(function(e) {
e.preventDefault();
var form = $("#form-with-buttons");
form.prop("action", $(this).data("url"));
form.submit();
});
</script>
Option 1 is more accessible but requires some messiness on the server side. Option 2 is fairly clean but requires JavaScript and a little messiness to work. It really depends on where you want the extra logic and how you feel about the accessibility of your form.
use jQuery on you page and this code
$(function(){
$("button").on("click",function(e){
e.preventDefault();
location.href='../ClientSide/Registration/registration.aspx';
})
});
e.preventDefault() makes form NOT SUBMITING
Use the formaction="url" tag on the <input> or <button>, as per: https://css-tricks.com/separate-form-submit-buttons-go-different-urls/
A simple answer would be wrapping the button inside anchor
<a href='../ClientSide/Registration/registration.aspx'>
<button>Click Here</button>
</a>
I have added a small onclick event to a button in my html form and its not working.This is the one I added,which is a basic one
function myFunction()
{
alert("Hello World!");
}
and in html
<button onclick="myFunction" class="btn btn-1 btn-1c">Credit Card</button>
But this is not working,please check the fidddle http://jsfiddle.net/RzT68/8/ .Another pop up is coming if the field are not filled,but I cant figure out,how to remove it during clicking on a button.
Demo http://jsfiddle.net/f8Fd3/
Here is the demo with your code :)
#DownVoter, care to explain please?
OP As m59 said to be bit more evanglistic instead of putting the inline click
Please read this Why is using onClick() in HTML a bad practice?
another demo with lil diff code: http://jsfiddle.net/6wwe2/
OP rest this should fit your need! :))
code
<button onclick="javascript:myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
Try this, as per my understanding your question
<button onclick="myFunction();" class="btn btn-1 btn-1c">
Demo
When using onclick, you have to format the function like this:
<button onclick="myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
With parentheses after your function name.
In your JSFiddle, you select no wrap (head) in the dropdown on the left. When onLoad is selected (by default), your functions are defined within a local scope.
See working example: http://jsfiddle.net/f7W94/
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
Also, you should format the onclick event as a function call, e.g. myFunction() not myFunction.
By writing myFunction you are not executing the function, instead returning the function definition. To execute the function you append the () so it should be;
onclick='myFunction()'
This is confusing at first but makes sense as you start delving into call backs. For instance, when you supply a callback function to something;
success: mySuccessFunction,
error: myErrorFunction
etc you don't put the () because otherwise the functions would execute as the code is ready. Instead you supply the function definition so that the code can execute that function when it wants.
If you're using jQuery:
$('.btn-1c').click(myFunction);
is the simplest implementation. Given the code you've provided, I can't really help you much further, but there are better ways.
HTML
<button class="btn btn-1 btn-1c">Credit Card</button>
jQuery
$(function() {
$("button").click(function(){
alert("Hello World!");
return false;
});
)};
working jsfiddle: http://jsfiddle.net/farondomenic/B4k4T/
I am new to perl/html. This is from a perl file. This button is in there right now:
<button id = "button1" name = "submitButton" type="submit">
<span class="right">Submit</span>
</button>
I don't see any piece of code where submitButton or button1 is given any logic so I don't understand why this jumps to the next page. Can someone explain?
EDIT: This seems to be the only javascript in the whole file...
<script type="text/javascript">
% $m->comp('../js/share.js');
</script>
I looked at the file, and it doesn't seem to do any redirecting or anything.
Often event handlers are hooked up at run-time using JavaScript. If there is an included script, look in the code for "button1" and see which function is hooking it up.
Also since this is a SUBMIT button, if it is wrapped in a form, no code needs to hook this up. It will post to whatever is defined in the form's ACTION property.
Maybe there is some JS/Jquery or another js-framework included to the page?
Since this is a submit button, it does the logic defined by the Form that surrounds it.