how to disable an onclick event? - javascript

<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<table id="question">
<tr>
<td colspan="2">
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
</td>
</tr>
</table>
</form>
In the code above I am able to replace an image with another image when the if statement is met. But my problem is that when the image is replaced, it does not disable the on click event. My question is that when the image is replaced, how do I disable the onclick event onclick="return plusbutton();?

You disable from within the plusbutton function itself. First, pass the element into the function, like so:
<a onclick="return plusbutton(this);">
Then disable it in the function:
function plusbutton(element) {
element.onclick = '';
/* then do whatever plusbutton did before */
}
But since you are using jQuery, it's better to use handlers. So give the link an id but not an onclick, like this:
<a id="plusbutton" href="#">
And use jQuery.one() to bind a click handler that happens just once:
$(document).ready(function() {
$('#plusbutton').one('click', function(ev) {
plusbutton();
return false;
});
});

event.preventDefault();
Will prevent the element from proceeding its normal function.

try this code:
$('#addQuestionBtn').bind("click",function(){
$('#addQuestionBtn').unbind("click");
insertQuestion(document.form);
});
And your html:
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" />

Related

How to add a loading gif when submitting a form

None of the current questions asked about this topic seem to help me, I am fairly new to this and I need some help. Currently I have a form, and on submit (currently do not have any validation) it shows a hidden div using this function.
function showDiv() {
document.getElementById('showme').style.display = "block";
}
I would like to add a loading gif, that shows for around 2 seconds after clicking the button and then carries on to show the hidden div.
My form is as shown -
<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">
The button to log in is here
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
function showDiv() {
document.getElementById('Login').style.display = "none";
document.getElementById('loadingGif').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
document.getElementById('showme').style.display = "block";
},2000);
}
<div id="showme" style="display:none;">You are signed in now.</div>
<div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
<form action="#" method="POST" id="hello" onsubmit="return false;">
<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">
</form>
The issue is that you have return false in your code that executes when you submit the form, effectively cancelling the submit, so your function doesn't get called.
You should not use inline HTML event attributes in the first place and do all your JavaScript separately. Here's why.
Additionally, if you aren't actually capturing data and sending it anywhere, then you shouldn't have a form, a submit button or deal with submit events, you just need a regular button and its click event.
Also, don't name your form submit as this will prevent you from programmatically calling the submit() method on it.
Here's what that should be:
// Get references to the DOM elements you'll need:
var button = document.getElementById('Login');
var special = document.getElementById("special");
var pleaseWait = document.querySelector(".hidden");
// Set up your event handlers in JavaScript, not with HTML attributes
button.addEventListener("click", function(evt){
// Show the message by removing the class that hides it:
pleaseWait.classList.remove("hidden");
// Wait 2 seconds and then run a function that re-hides the message and
// submits the form.
setTimeout(function(){
pleaseWait.classList.add("hidden");
special.classList.remove("hidden");
}, 2000);
});
.hidden {
display:none;
}
.img {
width:50%;
position:absolute;
}
<form action="#" method="POST" id="myForm">
<input class="btn_green_white_innerfade btn_medium"
type="button" name="Login" id="Login" value="Sign in"
width="104" height="25" border="0" tabindex="5">
<img class="hidden img" src="https://www.cluecon.com/theme/img/pleasewait.gif">
<div class="hidden" id="special">Here I am</div>
</form>

Table Anchor Click Get Parent Class Value

Here is my html code:
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow();">Contact Now</a>
</td>
my javascript function is as follow's:
function contactnow()
{
var id=$(this).parent('.user_id').val();
alert(id);
}
I need to get the value of hidden field on click on this anchor, these anchor's are multiple on same page as looping data from database.
Pass reference in onclick attribute.
<a class="contactnow" href="#" onclick="contactnow(this);">Contact Now</a>
use this
function contactnow(e)
{
var id=$(e).parent().find('.user_id').val();
//or
var id=$(e).siblings('.user_id').val();
alert(id);
}
However instead of using javascript in html attributes you can separate your javascript entirely which is lot more cleaner and you don't have to repeat onclick everytime for it to work in multiple elements. Remove onclick attribute
Html
<a class="contactnow" href="#">Contact Now</a>
JS
$('.contactnow').click(function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
// if you are using dynamically added element use
$(document).on('click','.contactnow', function(){
var id=$(this).parent().find('.user_id').val();
//or
var id=$(this).siblings('.user_id').val();
alert(id);
});
Remove the inline event handler and use:
$('a.contactnow').click(function() {
console.log($(this).prev('input').val())
})
jsFiddle example
As I commented above, $(this) isn't what you think it is since you pass nothing to your function. The you need the .prev() element, not the .parent().
If you want to continue to use the inline event handler you need to pass the this keyword.
Change:
onclick="contactnow();"
to:
onclick="contactnow(this, event);"
function contactnow(ele, e)
{
var id=$(ele).siblings('.user_id').val();
alert(id);
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="hidden" name="user_id" class="user_id" value="18">
<a class="contactnow" href="#" onclick="contactnow(this, event);">Contact Now</a></td>
</tr>
</tbody>
</table>
I see that you tag jquery, here is an simple example of it.
$('button').on('click', function () {
var answer = $(this).prev().val();
alert(answer)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" value="4">
<button>click me</button>

better options for writing this jquery

I have a html file like the following one,
<i class=‘icon-calendar icon-large' data-placement='top' data-toggle='popover' type='button'>
<div class='head hide'>Calendar</div>
<div class='content hide'>
<form action="#" data-remote="true" id="calendar_form" method="post">
<div style="...">
<input type="hidden" />
<input type="hidden" />
</div>
<table border='0px'>
<tbody>
<tr>
<td colspan='2'>
<button class='btn btn-default btn-block' id='submit' type='submit'>Convert</button>
</td>
</tbody>
</table>
</form>
</div>
</i>
<li class="..." id="calendar_example"><label class=" label" for="...">...</label>
<input class="..." id="calendar_example_1" name="[calendar_example][0][calendar_example_1][0]" type="text" />
I'm trying to use Jquery to write the function as when click button where id is submit, i can pass value from the popover to the field with id calendar_example_1, my code, the working one to find the field, is
$(function(){
$('body').on('click','#submit', function(){
var calendar_name = $(this).parent().parent().parent().parent().parent().parent().siblings().find('#calendar_example_1').attr('name');
return false;
});
});
by using .parent() multiple times, i don't think this is a good way to write this code. As i'm new to jquery, i can't find any better solution yet that works the way i want. Anyone can give me some suggestion?
EDIT:
the outside form is nested.
you can just do this instead:
var calendar_name = $(this).closest("i.icon-calendar").siblings("li#calendar_example").find('#calendar_example_1').attr('name');
You can use
$('#submit').click(function(){
var calendar_name = $('#calendar_example_1').attr('name');
});

why do these two lines of jquery knock off the event handler for another jquery element

I have a jquery event handler for an element w/ID = submitButton. The code works fine -- but if I click on another button w/ID = yeahTotallyButton then the jquery event handler for the submitButton stops working. No errors show in the console -- but the handler for #submitButton stops firing. The debugger does not stop at breakpoints for submitButton once I have clicked the yeahTotallyButton.
In debugging so far, I have noticed that by commenting out two lines in the event handler for the yeahTotallyButton (indicated in the code below) then the submit button works even after I click the yeahTotallyButton. So basically something in these two lines of code is breaking the submitButton handler. Why is this? How can I fix this? I need to do the things that these two lines of code do in my final website.
<body>
<div id='header'>
</div>
<div id='captchaPanel'>
<div id='top'>
<div id='fillerTop'>
</div>
<div id='captcha'>
<img id='captchaText' src='cryptographp.inc.php'> </img>
</div>
</div>
<div id='bottom'>
<div id='left'>
<p id='answerprompt'>Answer: </p>
<input id="answerBox" type="text" name="firstname">
</div>
<div id='right'>
<table id='buttonTable'>
<tr>
<td><img id='recycleButton' src="images/buttons_recycle.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_audio.png" ></td>
</tr>
<tr>
<td><img src="images/buttons_question.png" ></td>
</tr>
</table>
<div id='logo'>
<img src="images/smallLogo.png">
</div>
</div>
<div id='introButtons'>
<button id='yeahTotallyButton' type="submit" class="button">Yeah, totally. I am cool person.</button>
<button id='imARobotButton' type="submit" class="button">No, I can't come. I'm a robot.</button>
</div>
</div>
</div>
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Submit"/>
</div>
</body>
Here is the script:
$(document).ready(function () {
$("#submitButton").click(function(event) {
$.ajax({
url: 'getRejection.php',
success: function(data) { alert(data) }
});
$('#captchaPanel').animate({ opacity: 1}, 200);
$("#captchaText").attr('src', 'cryptographp.inc.php');
alert(event.target.id);
});
$("#imARobotButton").click(function(){
alert("thanks for being honest");
location.reload();
});
$("#yeahTotallyButton").click(function(){
$("#introButtons").css('visibility','hidden');
//when these two lines are commented out,
//then the submit button works even after
// I click the yeahTotallyButton
//$("#captchaPanel").css('visibility','visible');
// $("#bottom").css('visibility','visible');
$("#top").css('visibility','visible');
$("#left").css('visibility','visible');
$("#right").css('visibility','visible');
$("#captchaPanel").fadeIn("fast");
$("#captchaText").attr('src', 'cryptographp.inc.php');
$("#top").attr('border-radius', '4px');
});
$("#recycleButton").click(function(){
$("#captchaText").attr('src', 'cryptographp.inc.php');
});
});
My guess is that you somehow end up having more than one element with id set to submitButton, and the button you're checking the click on is not the first in this list. For example, in this scenario...
<div id='submitDiv'>
<input id='submitButton' type="submit" class="button" value="Alert Submit" />
<input id='submitButton' type="submit" class="button" value="Alertless Submit" />
</div>
$('#submitButton').click(function() { alert(42); });
... while clicking the first button shows that alert, clicking on the second does nothing.
You can easily patch it by adjusting the selector:
$('[id=submitButton]').click(function() { ... });
Fiddle. But obviously, that'll only mask the real problem: in no circumstances you'd have more than one element with a specific ID in DOM.
The handlers for the yeahTotallyButton were making the captchaPanel element bigger, so that it hung over the submit button -- even though the submitButton was visible. So when you clicked on the submitButton jQuery was not getting the event somehow. Carefully resizing the catpchaPanel solved the problem.

How to disable onclick if code have attribute disabled?

How to create something like this:
If this code have attribute disabled="disabled", my onclick is also disable
<a type="submit" disabled="disabled" id="my-form" onclick="javascript:yourFunctionName();" name="continue" data-target="#dialog" href=""
class="btn primary btn-primary" title="End">End</a>
try this code, it will search for the tag and if disabled="disabled" found it will remove the onclick attribute
$(document).ready(function(){
$("a").each(function(){
if($(this).attr("disabled") == "disabled") {
$(this).attr("onclick","");
}
});
})
Its better to add a class named disabled to the <a> tag like below:
<a type="submit" id="my-form" onclick="javascript:yourFunctionName(this);" name="continue" data-target="#dialog" href=""
class="btn primary btn-primary disabled" title="End">End</a>
Then you can do like this in your yourFunctionName() :
function yourFunctionName(id) {
event.preventDefault();
if(id.className.indexOf('disabled'))
{
alert('Sorry, link is disabled');
return false;
}
//Function Code goes here
}

Categories

Resources