How to disable onclick if code have attribute disabled? - javascript

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
}

Related

How to enable checkbox when checked?

Here's my code:
HTML:
<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms & <br>Conditions</a> and <a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled" />
JavaScript
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('submit');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
};
jQuery
$( "#checkme" ).on( "click", function() {
if($( "#checkme:checked" ).length > 0) {
$('#submit').prop('disabled', false);
} else{
$('#submit').prop('disabled', true);
}
});
All not working. Please help.
Also help me add in the javascript a class for css to make the button transparent when disabled. Thanks a lot!
You need to use change not click and to add style to the disabled input you can simply use #submit[disabled]
$( "#checkme" ).on( "change", function() {
$('#submit').prop('disabled', !this.checked);
}).change(); // use this to run change event on load
#submit{
transition-duration : 0.5s;
}
#submit[disabled]{
opacity : 0.5;
transition-duration : 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkme"/>
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms & <br>Conditions</a> and <a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit"/>
To simplify your code you can use $('#submit').prop('disabled', !this.checked); this.checked will return true when checked and false when unchecked so you can use ! before it to reverse it
Note: be sure you include jquery
To add an effect to the input while disabled true/false you can add something like transition-duration : 0.5s;
Javascript Solution
I just kept it simple with regular javascript. I added an onclick function to the checkbox that enables the submit when the checkbox is checked.
Hope it helps.
function checkA(){
if(document.getElementById('checkme').checked == true){
document.getElementById('submit').disabled = "";
} else {
document.getElementById('submit').disabled = "disabled";}}
<input onclick="checkA();" type="checkbox" id="checkme">
<p class="label-text"><b>By checking this, you agree to our <a href="terms.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Terms & <br>Conditions</a> and <a href="privacy.html" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" style="color: red;">Privacy Policy</a></b></p>
<input class="formBtn" type="submit" id="submit" value="Submit" disabled="disabled">

Two Html buttons for two different functions

I have a form which has two Options, Submit and Overwrite.
It looks like this:
[ INPUT FIELD ]
[Submit] [Overwrite]
The Overwrite Button only appears when the value already is in the Database.
The HTML Code is:
<input type="text" name="target" id="target">
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button>
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button>
The JS Code is:
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
If I only have the Submit button, it works.
If I only have the Overwrite button, it works.
But if I have both, the Overwrite button wont work anymore.
Does anyone have a solution to this problem?
put retrun false in the anonymous callback function will do the trick. since you declare that the button is a submit button
if(!problem){
data = "submit=save";
jQuery('#overwrite').click(function(){
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ){
data+="&overwrite=on";
console.log( "overwrite=on" );
}
return false;
});
sendToBean(href, data);
jQuery.each(langs, function(i, lang){
sendToBean(href, data);
});
}
}
When you click the submit button the page will be refreshed and the overwrite will return to the initial format and the selected will disappear, Try to change the input type to button :
<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button>
Hope this helps.
Remove <input type=""> for Overwrite button you may use <button>
Overwrite
<input type="text" name="target" id="target">
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/>
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/>
$(document).ready(function(){
$("#btnOverwrite").unbind("click").bind("click",function(e){
e.preventDefault();
alert("overwrite called");
});
$("#btnSubmit").unbind("click").bind("click",function(e){
e.preventDefault();
alert("submit called");
})
});
Review fiddle
https://jsfiddle.net/dipakchavda2912/rwdakvyg/

How to disable submit button after click single time

I want to disable submit button once it has clicked for send.this is my submit button code
<button title="<?PHP echo getTranslatedString('LBL_SAVE_ALT'); ?>" accessKey="S" class="btn btn-primary" value="<?PHP echo getTranslatedString('LBL_SAVE_LAPTOP'); ?>" id="formSave" type="submit" name="button" onclick="return checkform();">
Save detail
and this is onclick function code
function checkform() {
var incvfr = $("#invoice").val();
var inseridf = $("#invserial").val();
if (incvfr == 1) {
if (inseridf == '') {
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
}
when i disable submit button then form not send for save just disable button how to do it.
when i use disable code after save.submit(); then form submit but save button not disable
Try one() method in jQuery, it will run once for an element and might simplify your code.
jQuery Solution:
$(function(){
$('#formSave').one('click', function() {
$(this).attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="">
JavaScript Solution:
Use setAttribute() method.
function disable(){
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="disable()">
As I can see that you re using jQuery so when you are saving after that you can use jQuery hide function to hide your button by passing button id
function checkform(){
var incvfr=$("#invoice").val();
var inseridf=$("#invserial").val();
if(incvfr== 1) {
if(inseridf==''){
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
$("#formSave").hide();
}
}
You can disable submit button using
$("#formSave").attr('disabled',true);
or
$("#formSave").prop('disabled',true);
add property disable
$("#formSave").prop('disabled',true);
if you want revert it use
$("#formSave").prop('disabled',false);

how to disable an onclick event?

<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" />

onclick not firing for submit input when attached using jquery

html:
<input id="save "type="submit" value="Create" class="btn btn-primary"/>
javascript that register onclick (IsValid is a function that validates before submiting, returns true of false)
$('#save').click(function () {
return IsValid();
});
Note that this exact same code works if I write:
<input id="save "type="submit" value="Create" class="btn btn-primary" onclick='javascript: IsValid();'/>
This is another option without modifying the markup (createForm is the form)
$('#createForm').submit(function () {
return IsValid();
});
Why $('').click is not registering my event handler?
Form looks like this:
<form method="post" id="createForm" class="well" action="/ScheduleWorkDay/Create" novalidate="novalidate">
It maybe that your id has a space or you have not used document.ready()
here is the working demo
<input id="save" type="submit" value="Create" class="btn btn-primary"/>
$(document).ready(function(){
$('#save').click(function () {
alert("invalid");
});
});
Demo
MrOBrian was right. The problem was that
<input id="save "
had an extra space in the id name. Thanks!
Your event handler isn't registering because there are no handlers on the form with the id save, but there is a save (with a space). Remove the space.
<input id="save" type="submit" value="Create" class="btn btn-primary"/>
$('#save').click(function () {
return IsValid();
});
should work without issues.
A jsFiddle showing it working

Categories

Resources