I am trying to change the class of a button when another button is clicked. I am able to change css on the page but have been unable to change btn-primary to btn-default.
Button:
<button type="button" class="btn btn-primary btn-circle" id="circle-1">1</button>
View:
events: {
"click #activate-step-2" : "newParent"
},
newParent: function(event) {
$('#step-1').css({'display':'none'});
$('#step-2').css({'display':'initial'});
}
I have tryed:
$(event.target).find('button').toggleClass('btn-primary btn-default')
But it didnt work,
so i'm not sure what else to try ?
$("#circle-1").removeClass("btn-primary").addClass("btn-default");
Related
i am using a javscript to enable a button based on the changes in the form field in django python using bootstrap.below is the script
$("#employee_name, #employee_name2").on("keyup",function() {
$(".btn-action").prop("disabled",false);
if( ($("#employee_name").val()) == ($("#employee_name2").val())) {
$(".btn-action").prop("disabled",true);
}
});
also the below code in html to initially disable button
<button type="submit" class="btn btn-primary mt-3 btn-action" disabled>Save</button>
but the button stays disabled even after changing values in the field.any help would be appreciated
you need to add the below script
$(document).ready(function(){
$("#employee_name,#employee_name2").on("keyup",function(){
$(".btn-action2").prop("disabled",false);
if(($("#employee_name").val())==($("#employee_name2").val())){
$(".btn-action2").prop("disabled",true);
}
});
});
and below in the html
button type="submit" class="btn btn-success mt-3 btn-action2" disabled>Save</button>
In my case, My button1 is active by default so my form1 is shown by default too and I want to switch the two forms by clicking the button1 and button2. How can we accomplish that using jQuery.
<button type="button" class="btn btn-light activate-form active-btn">
button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form">
button 2 = show form2
</button>
<form id="normal-user-form" class="custom-register">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
<script>
$(function() {
$(".activate-form").click(function() {
$(".activate-form").removeClass("active-btn");
$(this).addClass("active-btn");
});
});
</script>
Use a .is-active (with the appropriate CSS) for both your buttons and forms
Cache your forms in a variable
Use the data-* attribute (i.e: data-target in the example below) to store the desired selector you want to target on click
jQuery(($) => {
const $actForms = $(".custom-register");
const $actFormsBtns = $(".activate-form");
$actFormsBtns.on("click", function() {
$actFormsBtns.add($actForms).removeClass("is-active");
$(this).add($(this.dataset.target)).addClass("is-active");
});
});
.activate-form.is-active { background: #0bf; }
.custom-register { display: none; }
.custom-register.is-active { display: block; }
<button type="button" data-target="#normal-user-form" class="btn btn-light activate-form is-active" >form1</button>
<button type="button" data-target="#business-user-form" class="btn btn-light activate-form" data-target="">form2</button>
<form id="normal-user-form" class="custom-register is-active">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
If I understand what you mean correctly, you're looking for something like this:
$(function() {
$(".activate-form").click(function() {
$(".activate-form").removeClass("active-btn");
var formId = $(this).addClass("active-btn").data('target');
$("form").removeClass("active-btn");
$(formId).addClass("active-btn");
});
});
.active-btn {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light activate-form active-btn" data-target="#normal-user-form">
button 1 = show form1
</button>
<button type="button" class="btn btn-light activate-form" data-target="#business-user-form">
button 2 = show form2
</button>
<form id="normal-user-form" class="custom-register active-btn">form1</form>
<form id="business-user-form" class="custom-register">form2</form>
You can try to add data-target attribute inside the <button> tag to refer the form id.
I have an MVC application where I use more views, partial views.
In one partial view I have two buttons:
<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="javascript:test()">#Resources.Common.ShowInvoice</button>
<button type="submit" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</button>
I need to put some logic in javascript when I click these buttons, but it seems the onclick event is not raised, it does nothing when I click the buttons.
The buttons are in a partial view, in the "parent" view I have added the code:
$("#btnSilviPrioInvoiceGenerate").on("click", function (e) {
e.preventDefault();
console.log("asas");
//var companyId = $('input[name=IssuerCompanyId]:checked').val();
var action_url = '#Url.Action("GenerateInvoiceDamage", "TimberMonitor", new { Area = "", id = #ViewBag.Id })';
window.location = action_url;
this.disabled = true;
});
I have tried to add this code inside the
$(document).ready(function () {
I have tried to add to add outside the
$(document).ready(function () {
from the "parent" view.
If I try to use the method that it is defined in the onclick event from the button,
function test()
{
console.log("test");
}
I get the error that test is not defined. If I put the javascript code in the partial view it is working with
$("#btnSilviPrioInvoiceShow").on("click", function (e) {
, but all the javascript code is in the "parent" view, so I thought it would be better to add there the javascript code.
Can you advise?
Make your button like following:
<input type="button" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test()">#Resources.Common.ShowInvoice</input>
<input type="button" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</input>
As you can see, this example works correctly, remove javascript: label
$("#btnSilviPrioInvoiceGenerate").on("click", function(e) {
e.preventDefault();
console.log("btnSilviPrioInvoiceGenerate clicked");
});
function test() {
console.log("it is test function");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="btnSilviPrioInvoiceShow" class="btn btn-success" onclick="test()">#Resources.Common.ShowInvoice</button>
<button type="submit" id="btnSilviPrioInvoiceGenerate" class="btn btn-success btnSilviPrioInvoiceGenerate">#Resources.Common.Generate</button>
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;
My events are not binding to dynamically created elements until that element has been clicked. So, the page loads, I can click the button and nothing happens, the second time I click the button it works.
Example code:
$(function() {
$("#resultsTable").on("click", ".confirm", function(){
$(this).confirm({
text: "Are you sure you want to delete this entry?",
title: "Confirmation Required",
confirm: function(button) {
//do nothing
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes I am",
cancelButton: "No",
confirmButtonClass: "btn-danger",
cancelButtonClass: "btn-default",
});
});
});
This is using jquery.confirm here: https://myclabs.github.io/jquery.confirm/
If I just do:
$("#resultsTable").on("click", ".confirm", function(){
alert("Did Stuff");
});
The alert pops up. What do I need to do for the first piece of code to get it to work on the first click?
Edit: Here is my template that I create the elements with:
<script id="buttonsTemplate" type="text/x-jquery-tmpl">
<div class="col-md-6">
<button type="button" id="enterInPTPButton" class="btn btn-primary" style="border-radius: 0; margin-left:10px; border-color:#3C5B75;">Entered In PTP</button>
<button type="button" id="deleteEntryButton" class="btn btn-warning confirm" style="border-radius: 0; margin-left:10px;">Delete Entry</button>
<button type="button" id="offboardedButtons" class="btn btn-info" style="border-radius: 0; margin-left:10px; border-color:#3A7B8E;">Offboarded</button>
</div>
</script>
What do I need to do to attach the plugin to the deleteEntryButton each time I use the template?