I have a fieldset tag that I am setting the property disabled on if a particular URL variable exist:
<fieldset class="fieldsetGeneralSettings" <cfif #url.read_only# eq 'yes'>disabled="disabled"</cfif> >
</fieldset>
All elements of the fieldset are disabled when I set that property to disabled, however I have an HTML button inside that fieldset that I want to force to be enabled. I tried to force it using the following javascript but it doesn't seem to do anything.
<button id="followup_detail_button" class="TicketButton" onclick="followupButtonDetailsClick(event);"><i class="far fa-calendar-alt"> </i> <font color="red">Follow-up Request</font></button>
<button id="followup_button" class="TicketButton" onclick="followupButtonClick(event);"><i class="far fa-calendar-alt"> </i> Follow-up Request</button>
<script>
$(document).ready(function () {
console.log("Trying to enable the button");
$("##followup_detail_button").removeAttr('disabled');
$("##followup_button").removeAttr('disabled');
})
</script>
What am I doing wrong?
Related
I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript.
How do I change the button to click?
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<!-- btn2 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function () {
$(".visibility").toggle("slow");
if ($(this).val() == "visibility")
$(this).val("visibility off");
else
$(this).val("visibility");
});
});
</script>
The html seems to be broken. Only use 1 button, never reuse an id attribute.
It is not completely evident what you want to achieve, but you probably want to add a visibility state to your button and visualize it with an embedded icon and show a matching text.
Importing the material design font, you would only need to change these texts. Your button also needs state to conveniently inform the handler what to do (this could also be derived from the current structure of the element but it would be unneccessarily complicated).
Example html
<!DOCTYPE html>
<!--
https://stackoverflow.com/questions/61189795/change-button-in-javascript-when-clicked
-->
<html>
<head>
<title>Adorning buttons with material icons</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnvisibility").on("click", function ( eve ) {
let b_isVisible = this.classList.contains("_btn-visible")
, s_buttontext
, s_text
;
if (b_isVisible) {
s_buttontext = 'visibility off';
s_text = 'visibility_off';
this.classList.remove("_btn-visible");
} else {
s_buttontext = 'visibility';
s_text = 'visibility';
this.classList.add("_btn-visible");
}
$("span", this).text(s_buttontext);
$("i", this).text(s_text);
$(this).val(s_buttontext);
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="btnvisibility" class="btn btn-primary btn-round _btn-visible">
<i class="material-icons">visibility</i>
<span>visibility</span>
</button>
</body>
</html>
Explanation
The css class _btn-visible encodes the visibility state for the button.
The textual id for the icon to visualize the visibility state is the textual content of the i element inside the button. This text is changed upon a click.
The button label is remaining text inside the button. For easier referencing it is wrapped in a span element. This text is also changed upon a click.
I think this is what you're looking for.
HTML
<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility</i>
visibility
</button>
<button class="btn btn-primary btn-round" id="btnvisibility">
<i class="material-icons">visibility_off</i>
visibility off
</button>
JS
$(document).ready(function(){
$("#btnvisibility").click(function(){
$(this).text($(this).text() == 'visibility' ? 'visibility off' :
'visibility');
});
});
I want to use this checkbox function that I found here however in my existing page I use bootstrap button that have the following form.
<p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<a class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>
What are the modifications I should make in the function or the button to turn it to enabled, after the user has clicked on the checkbox?
PS: I include the referenced function below.
<script type = "text/javascript">
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = "";
} else {
btn.disabled = "disabled";
}
}
</script>
Try sing a button like below. Wrap your <a> tag inside a <button> tag. Anchor tag does not have disabled property, but button have.
In order to disable the anchor tag, you have to clear the href manually.
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = false;
btn.children[0].href = "randomlink.com";
} else {
btn.disabled = true;
btn.children[0].href = "javascript: void(0)";
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx " onclick="change_button(this,'sub1')"/>
</p>
<button class="btn btn-light btn-xl" disabled id="sub1">
<a>Download Now</a>
</button>
Here is a runnable example based on your code. I've adapted your example with the following things:
The <a> tag must be a <button> in order to disable it. The anchor tag does not have a disabled attribute.
The button must be initially disabled (therefore the added disabled attribute).
You are passing an ID as an argument to the function. This ID must be equal to the button's ID. So, I added it as an attribute to the button.
I've removed the disabled class from the button, as it is not necessary, when there is an attribute disabled.
The button must submit a form, so you can either wrap it in a <form> or use a JavaScript click listener on the button. I've used the 2nd option in the solution below.
function change_button(checkbx,button_id) {
var btn = document.getElementById(button_id);
if (checkbx.checked == true) {
btn.disabled = "";
} else {
btn.disabled = "disabled";
}
}
function submit() {
window.location.href = 'https://www.google.com';
}
body {
background: #555 !important;
margin: 0;
padding: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<p style="color: #FFFFFF">I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx" onclick="change_button(this, 'sub1')"/>
</p>
<button disabled id="sub1" class="btn btn-light btn-xl" onclick="submit()">Download Now</button>
Just use checked to see if the checkbox is ticked or not and then add an id for your button as well so you can use the classList() JavaScript property to toggle the disable class name based on the status of the checkbox.
Also, avoid using inline scripts like onclick and use an event listener in your JavaScript itself like this:
let chkBox = document.getElementById("termsChkbx");
let btn = document.getElementById("someBtn");
chkBox.addEventListener("click", function() {
if(this.checked == true) {
btn.classList.remove("disabled");
} else {
btn.classList.add("disabled");
}
});
body {background-color: #000 !important;}
<!-- Botstrap CSS File --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><!-- Botstrap CSS File -->
<p>I have read and agree to the terms and conditions
<input type="checkbox" id="termsChkbx"/>
</p>
<a id ="someBtn" class="btn btn-light btn-xl disabled" href="randomlink.com">Download Now</a>
JSFiddle with the above code: https://jsfiddle.net/AndrewL64/k3po4zfa/1/
To stop clicking, in addition to adding the disabled class, add this to your css:
pointer-events: none;
It won't stop people from tabbing to the button and hitting space or enter, but it will stop them from clicking
I am using jquery to disable a button in materialize css. According to documentation here, the way to disable button is simply by adding a class named 'disabled'.I think by simply add class 'disabled', the button will automatically disabled, but it is not. Here is my code:
html:
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
jquery:
$('#submit-btn').off().on('click', function(){
$('#submit-btn').addClass('disabled');
});
Try this
$('#submit-btn').removeClass("waves-effect waves-light submit").addClass('disabled');
Working Demo
$(document).ready(function() {
$('#submit-btn').on('click', function() {
$(this).removeClass("waves-effect waves-light submit").addClass('disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">
What about
$('#submit-btn').prop('disabled', true).addClass('disabled');
To disable the button using javascript.
eleme.classList.add('disabled');
To enable the button using javascript.
elem.classList.remove('disabled');
E.g:
let btn = document.getElementById('submit-btn');
btn.classList.add('disabled'); //This will disable the button
to disable button you can use
$("#submit-btn").attr("disabled", "true");
Create a variable which holds the button (say submitBtn), then add an event listener (say on DOMContentLoaded), then have the function disable the button with submitBtn.disabled = true;
I have an instance where my datepickers won't work by button click, so I figure find the closest input and .click() or .focus() (for it's datepicker, since the same field is to be affected). For the sake of this demo, from the button/icon click - find the closest input and focus/click on it. If correct, the border will glow blue. http://jsfiddle.net/81tvr0op/
HTML
<table>
<tr>
<th>
<div class="input-group date">
<input type="text" />
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
Icon
</button>
</span>
</div>
</th>
</tr>
</table>
jQuery
...something like
$(".date > span > button").on('click', function (e) {
e.preventDefault();
$(this).closest("th").find("input:text").click();
});
...right?
If I understand correctly, you are trying to place the cursor into the input box when the user clicks the button.
To do that, you should use .focus() instead of .click().
Working example:
http://jsfiddle.net/81tvr0op/1/
From your jsfiddle, something like this should work.
$("button").on('click', function (e) {
e.preventDefault();
$(this).parent().siblings(0).focus();
});
Or, give your input an id and do something like:
$("button").on('click', function (e) {
e.preventDefault();
$("#dateInput").focus();
});
Here is my code --
<div id="div1">
this is div 1
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
<div id="div2">
this is div 2
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn2 -->
</form>
</div>
<div id="showtheaddedform">
//here my form will be push on click to button
</div>
<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>
// the click function in my js file are as -
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
$("#showtheaddedform").append($("#div2").html());
});
now the problem is --
On click #bun1 it's adding the content of #div1 into #showtheaddedform (i.e. the form attribute and all element inside form), like
<div id="showtheaddedform">
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
but when I'm clicking #btn2 it's adding only the element inside the form , like
<div id="showtheaddedform">
<!-- this form to be add on click #btn2 -->
</div>
[ NOTE : I've not written any kind of remove query ]
..any idea , how it's removing !!!
Both your buttons have the same id. Also there is a syntax mistake in
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
}
add
); to it
DEMO
Actually Form tag is getting append to the div on second button's click. But in the UI it will not be shown as it doesnt have any tags or text in it. Try giving some text or tag in it. It will work
EDIT
Updated Fiddle
Your second button appears to have the wrong ID.
<button type="button" id="btn1">Add the form2</button>
Change to
<button type="button" id="btn2">Add the form2</button>
Try Below code in java script tag and also change your button id to btn1 and btn2
$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div1").html());
});
$("#btn2").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div2").html());
});
});