Disable image link on click - javascript

I have a image that links to a page. This is a process button which can take up to 20 seconds to run.
I want to prevent the user from pushing it more than once.
How would I write a Javascript that when the button is pushed, it would follow the hyperlink, but the link for the button would disable, and the image would change?

<script>
function buttonClicked()
{
document.getElementById('buttonImage').src = 'new-image.jpg';
document.getElementById('buttonId').disabled = true;
}
</script>
<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>

From your question, it sounds like your "button" is the image that you click on...if that's true then you can use the following:
<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>
Then your javascript would be:
document.getElementById('my_link').onclick = function() {
document.getElementById('my_link').disabled = true;
document.getElementById("my_image").src='the_path_to_another_image';
};

On click, remove the href attribute from the a element.

I ended up going with the following:
$(document).ready(function() {
var isSubmitted = false;
$("#submit").click(function(e) {
if ( ! isSubmitted ) {
isSubmitted = true;
var src = $(this).attr("src").replace("gold","red");
$(this).attr("src", src);
} else {
e.preventDefault();
}
});
});

Here is a really simple one for you
in your JS
function Create(){
document.write('<INPUT disabled TYPE="button" value="Click Me!">');
}
in your HTML
<INPUT TYPE="button" value="Click Me!" onclick="Create()">
If you are ready to use jQuery, then here is another solution.
$("selectorbyclassorbyIDorbyName").click(function () {
$("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});
select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec
Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick

you can use this.
<script>
function hideme()
{
$("#buttonImage").hide();
}
</script>
<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>
if you don't want to hide image please use this..
$('#buttonImage').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
That will prevent the default behaviour of a hyperlink, which is to visit the specified href.

Let's make a jquery plugin :
$.fn.onlyoneclick=function(o){
var options=$.extend({src:"#"},o);
$(this).click(function(evt){
var $elf=$(this);
if( $elf.data("submitted") ){
evt.preventDefault();
return false;
}
$elf.attr("src", typeof(options.src) == 'function' ?
options.src($elf.attr("src"))
: options.src
).data("submitted",true);
});
}
$(".onlyoneclick").onlyoneclick({
src : function( src ){
return src.replace("gold","red");
}
})
on any button that should trigger only once :
<button ... class="onlyoneclick">tatatata... </button>

its simple...just one line of code :)
Onclick return false.

Related

Jquery - Stop Event of Other Class

This is what I want
Jquery:
$("body").on('click','.js-validate-url',function(){
var url = $(".url").val();
if(url==""){
// STOP WORKING OF .js-loader click
// I want if url is empty it should not alert
}else{
//OK
// and here it should work fine
// it should alert
}
});
$("body").on('click','.js-loader',function(){
alert();
});
HTML
<form>
<input class="url">
<button class="js-loader js-validate-url"></button>
</form>
<form>
<button class="js-loader"></button>
</form>
Why I am doing this
Upper class is different for all buttons
But loader class is same for all buttons it shows loader inside clicked button
I found
e.stopPopagation();
But that works if I use it in loader click callback But I want to stop when button is clicked and url is empty
Cannot check url=="" inside loader click call back cause it is same for all button i dont want to check on other buttons click too so checking for single button
I would recommend using classes to check for condition.
$("body").on('click','.js-loader',function(){
var _this = $(this)
if(_this.hasClass('js-loader') && _this.hasClass('js-validate-url')){
// if both classes js-loader, js-validate-url are present on button
alert()
}else{
alert("js-loader") // if only js-loader present on button
}
});
I'm not sure if I understand what you are trying to do, but I guess you can merge your events into a single one and use an external function only when it met a condition.
You could also use removeEventListener but I don't believe you need it for your problem.
var myFunction = function(){
alert('loader');
};
$("body").on('click','.js-validate-url',function(){
var url = $(".url").val();
if (url){ alert('validate: '+url); }
else myFunction();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="google.com" class="url"/>
<button class="js-validate-url js-loader">Bt1</button>
<button class="js-loader">Bt2</button>
This is what I did and is working fine as per my requirement
$("body").on('click','.js-validate-url',function(){
var url = $(".url").val();
if(url==""){
// STOP WORKING OF .js-loader click
// I want if url is empty it should not alert
}else{
$(this).removeClass("js-diable");
//OK
// and here it should work fine
// it should alert
}
});
$("body").on('click','.js-loader',function(){
if($(this).hasClass('js-scud-disabled')){
//NOTHING TO DO
}else{
alert();
}
});
HTML
<form>
<input class="url">
<button class="js-loader js-validate-url js-disable"></button>
</form>
<form>
<button class="js-loader"></button>
</form>
$("body").on('click','.js-loader',function(){
if($(this).hasClass('js-loader js-validate-url')){
alert();
} else {
if(url==""){
} else {
}
}
});

jquery javascript click function from within a function

I have an external JS file that contains the following jQuery code:
var globalNames = { next: 'input[name="next"]'};
var globalElements = { next: $e.find(globalNames.next) };
initQuiz: function() {
globalElements.next.click(function () {
if (y.forcingQuestionSolve && !j[c.index()] && (y.quizSummeryHide || !y.reviewQustion)) {
alert(WpProQuizGlobal.questionNotSolved);
return false
}
i.methode.nextQuestion()
}
);
the globalElements.next.click function is triggered by a click on a button:
<input type="button" name="next" value="Next" class="Button" ">
What I would like to do is call this p.next.click function from a Input Checkbox click.
I have added the following code:
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('next').trigger('click');
});
</script>
As you can see, I have tried to call the trigger event but its not working.
I have to note that the 2 jQuery statements are not combined in document, they are separate.
EDIT: Added Correct Variables (global*)
Hi i think you only forgot to dedicate the button which has to be triggered.
<script>
$(document).on("click", "input[class='questionInput']", function () {
alert("Thanks for checking me");
// This is the line I'm not sure off !?!?
$('[name=next]').trigger('click');
// $('.Button').trigger('click');
});
thanks everyone.. I used the following code from Calvin Nunes-
$("[name='next']").trigger('click');
Craig.

Override inline click event in jQuery

I have links in a navigation that look similar to this
<a id="navform" href="#" tabindex="-1" onclick="mojarra.ab(this,event,'action','#form','content');return false" class="active"><span>Policy</span></a>
I am checking for form changes and trying to disable the onclick event for the links when there are changes and enable them if once the user saves the form.
$(':input').on('change', function() {
formChanged = true;
});
$('nav a').on('click', function(e){
if(formChanged){
e.preventDefault();
$(this)[0].onclick = null;
}
});
I have tried preventDefault and nulling the event according to some answers I found on here, but no luck. Could someone please tell me how to fix this?
UPDATE:
Thanks to all your answers, I got some ideas and figured how to fix it:
if($('.policy-form')){
$(':input').on('change', function() {
formChanged = true;
$('nav a').each(function(){
var handler = $(this).attr('onclick');
$(this).removeAttr('onclick');
$(this).on('click',function(){
if(formChanged){
invokeDialog("warning");
formChanged = false;
$(this).attr('onclick', handler);
}
});
});
});
Plain JavaScript one-liner
Use
document.getElementById('navform').onclick = null;
This is because only the last onclick defined will run and here we override it with null.
Note that it would be way better if you would just avoid onclick in your HTML, or if you would at least modify mojarra.ab() appropriately, so that it performs any actual actions only when you desire.
Demo:
document.getElementById('one').onclick = null;
<a id="one" href="#" onclick="alert(true)">Doesn't alerts</a>
<br/>
<a id="two" href="#" onclick="alert(true)">Does alerts</a>
EDIT
Vide comment, here is an example of toggling old onclick on and off:
var button = document.getElementById('button');
var oldOnclick = button.onclick;
document.getElementById('toggle').addEventListener('click', function() {
button.onclick = button.onclick !== null ? null : oldOnclick;
})
<input id="button" type="button" onclick="alert('Test')" value="Alert"/>
<br/>
<br/>
<input id="toggle" type="button" value="Toggle above button"/>
$('nav a').on('click', function(e){
$(this).removeAttr('onclick'); // add this line to remove inline onclick
if(formChanged){
e.preventDefault();
$(this)[0].onclick = null;
}
});
You can use the .off() method:
$('nav a').off('click');
One good practive is to add an namespace to your events.
$('nav a').on('click.somenamespacehere', function(e){
});
...
$('nav a').off('click.somenamespacehere');
In this case, you can specify later which events you want to remove (with the off method)
You can't do it that way because the on('click' event and the inline one are two different events and there's no way to tell which would happen first. But, you could replace the inline handlers with your own handler like so
on('click', function(e) {
if (formChanged) {
mojarra.ab(...);
}
});
With an inline click function there are many possibilities to control the logical flow or order of executing the functions attached to the same event.
One possibility is to change the inline code so that you can define a first function and based of the result of this you may decide if execute or not the next function.
My snippet:
// assuming the inline onclick function is like:
function mojarra_ab(_this, event, _action, _form, _content) {
$('<p>Executed function: mojarra_ab</p>').appendTo('body');
}
function myNewClick() {
$('<p>Executed function: myNewClick</p>').appendTo('body');
if ($('#yesNo option:selected').val() == 'true') {
return true; // return true to execute the mojarra_ab function
}
return false; // return false if you don't need to execute the mojarra_ab function
}
$(function () {
$('nav a').attr('onclick', function(index, attr) {
return 'if (myNewClick() == true) {' + attr + '}';
});
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Choose if to run myNewClick and then mojarra_ab: <select id="yesNo">
<option value="true" selected>True</option>
<option value="false">False</option>
</select>
<nav>
<a id="navform" href="#" tabindex="-1" onclick="mojarra_ab(this,event,'action','#form','content');return false"
class="active"><span>Policy</span></a>
</nav>

JavaScript button function swap

What I am trying to do is following:
I have an input type button and I want to replace it's function on first click.
<input type="submit" class="submit-button" value="Submit" name="boom" />
So a [button] that serves for submit, I wanna show alert with some jquery plugins but lets do it here with normal javascript alert (default window).
So on first click it will be
alert('Something');
And on second click it will be default function (submit).
How can I achieve something like this?
Of course if button is clicked once, and then page reloaded, it will show same alert again on first button click.
Use one().
Attach a handler to an event for the elements. The handler is executed at most once per element.
Example:
$(".submit-button").one("click", function(e) {
// will only run on first click of element
e.preventDefault();
alert("Something");
});
Try this:
<script type="text/javascript">
var clicked = false;
function btnClick(e) {
if(clicked === false) {
alert('Something');
clicked = true;
e.preventDefault();
return true;
} else {
return false;
}
}
</script>
<input type="submit" onclick="btnClick(event)" class="submit-button" value="Submit" name="boom" />

Hiding a button in Javascript

In my latest program, there is a button that displays some input popup boxes when clicked. After these boxes go away, how do I hide the button?
You can set its visibility property to hidden.
Here is a little demonstration, where one button is used to toggle the other one:
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>
visibility="hidden"
is very useful, but it will still take up space on the page. You can also use
display="none"
because that will not only hide the object, but make it so that it doesn't take up space until it is displayed. (Also keep in mind that display's opposite is "block," not "visible")
Something like this should remove it
document.getElementById('x').style.visibility='hidden';
If you are going to do alot of this dom manipulation might be worth looking at jquery
document.getElementById('btnID').style.visibility='hidden';
//Your code to make the box goes here... call it box
box.id="foo";
//Your code to remove the box goes here
document.getElementById("foo").style.display="none";
of course if you are doing a lot of stuff like this, use jQuery
If the space on that page is not disabled then put your button inside a div.
<div id="a1">
<button>Click here</button>
</div>
Using Jquery:
<script language="javascript">
$("#a1").hide();
</script>
Using JS:
<script language="javascript">
document.getElementById("a1").style.visibility = "hidden";
document.getElementById("a1").style.display = "none";
</script>
when you press the button so it should call function that will alert message. so after alert put style visible property .
you can achieve it using
function OpenAlert(){
alert("Getting the message");
document.getElementById("getMessage").style.visibility="hidden";
}
<input type="button" id="getMessage" name="GetMessage" value="GetMessage" onclick="OpenAlert()"/>
Hope this will help . Happy to help
function popAlert(){
alert("Button will be hidden on click");
document.getElementById("getMessage").style.visibility="hidden";
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Hiding a button in Javascript after click</b>
<br><br>
<input type="button" id="getMessage" value="Hide Button OnClick" onclick="popAlert()"/>
If you are not using jQuery I would suggest using it. If you do, you would want to do something like:
$( 'button' ).on(
'click'
function ( )
{
$( this ).hide( );
}
);
<script>
$('#btn_hide').click( function () {
$('#btn_hide').hide();
});
</script>
<input type="button" id="btn_hide"/>
this will be enough
You can use this code:
btnID.hidden = true;
var start = new Date().getTime();
while ((new Date().getTime() - start) < 1000){
} //for 1 sec delay

Categories