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/
Related
Could someone help me in understanding the difference between function calls made in React and Normal HTML/JS?
Normal HTML/Javascript : <button onclick="myFunction()">Click me</button>
React : <button onclick={this.myFunction}>Click me</button>
In both cases, the DOM will get loaded/rendered so to avoid the function call being made during load/render we are passing reference in React, but why the function is being called directly in HTML?
Thanks in Advance.
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!
I was wondering how I could get a button <button class="btn btn-primary btn-lg btn-withdraw">Text!</button> automatically clicked when a page is loaded. I've seen other posts about people attempting to do the same thing I am, but I do not understand what to do. Any help would be appreciated. Thanks,
Aiden
Sources- Auto-click button element on page load using jQuery
So, you'll have to put an id attribute to your button.
<button id="myButton" class="btn btn-primary btn-lg btn-withdraw">Text!</button>
Then, at the end of your html, you have to use Javascript inside a script tag to "click" on it as following.
<script>
document.getElementById('myButton').click()
</script>
It seems like you have to learn Javascript, search for tutorials on internet.
You can use the jQuery method .click()
Because you want the button to be clicked once the page is loaded, you want to make sure the DOM element itself has actually loaded before executing your code.
You can read more here:
What is the DOM ready event?
The below code waits for the page to fully load before executing 'click' on the button.
Non-jQuery solution. It doesn't make sense to add jQuery to your page if you will only use it once.
window.onload = function () {
document.querySelector('.btn.btn-primary.btn-lg.btn-withdraw').click();
}
Alternatively, you can add an ID to the button as suggested by Sorikairo and subsequently trigger the click:
//Add ID to button
<button id="myButton" class="btn btn-primary btn-lg btn-withdraw">Text!</button>
//Click on load.
window.onload = function () {
document.getElementById('myButton').click()
}
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 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.