How can I change/update the text and font icon of a button on click event properly?
$(".btn-warning").click(function() {
$(this).toggle(function() {
$('.btn-warning').text("Remove Filter <i class='fa fa-filter'></i>");
}, function() {
$('.btn-warning').text("Apply Filter <i class='fa fa-remove'></i>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
Here You go.
$(".btn-warning").click(function() {
var $btn = $(this);
if ($btn.hasClass('x-on')) {
$btn.removeClass('x-on').html("Apply Filter <i class='fa fa-filter'></i>");
} else {
$btn.addClass('x-on').html("Remove Filter <i class='fa fa-remove'></i>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
toggle doesn't work how this code would like it to. It doesn't mean do this or do something else - When you toggle you cause JQuery to fade-out/in the element and the function call is performed when the animation completes.
So you click and fade out the element, but now there's nothing to click on to bring it back and your changes will not be seen.
To change the code on click we can simply set a variable on the function itself (this.clicked) and toggle the html of the element based on whether it's the first or second click. This will be determined by checking if this.checked is true or false.
$(".btn-warning").click(function() {
if (this.clicked == undefined) this.clicked = false;
this.clicked = !this.clicked;
(this.clicked) ?
$('.btn-warning').html("Remove Filter <i class='fa fa-filter'></i>") :
$('.btn-warning').html("Apply Filter <i class='fa fa-remove'></i>");
});
$(".btn-warning").click(function() {
let btn = $(".btn-warning");
if (this.clicked == undefined) this.clicked = false;
this.clicked = !this.clicked;
(this.clicked) ?
btn.html("Remove Filter <i class='fa fa-filter'></i>") :
btn.html("Apply Filter <i class='fa fa-remove'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
(1) The JQuery toggle() method will toggle the button visibility, you don't need this one.
(2) If you need to change the html of an element, do not use the text() method, instead use the html() method. The text() method will not recognize the html markup as you want.
One approach you can use is detecting if the <i> tag inside the button has some class (Read about hasClass()), and then act based on this condition:
$(".btn-warning").click(function()
{
if ($(this).find("i").hasClass("fa-filter"))
$(this).html("Remove Filter <i class='fa fa-remove'></i>");
else
$(this).html("Apply Filter <i class='fa fa-filter'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">
Apply Filter <i class="fa fa-filter"></i>
</button>
Try this. I think this will more-or-less get you started.
https://jsfiddle.net/3bq9fuwz/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
$(".btn-warning").click(function() {
$(this).html('It is a new name bro');
$(this).find($(".fa")).removeClass('fa-filter').addClass('fa-remove');
});
Related
I want to ask for help from you guys, I have tried coding my javascript so that it doesn't display the results from the input but the results I get are actually messy, so I attach my code with the original version that I haven't edited and it's still tidy, but the input is still displayed in address bar in the web browser.
Next is my code version before revision: (JavaScript)
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
/*==================================================================
[ Simple slide100 ]*/
$('.simpleslide100').each(function(){
var delay = 7000;
var speed = 1000;
var itemSlide = $(this).find('.simpleslide100-item');
var nowSlide = 0;
$(itemSlide).hide();
$(itemSlide[nowSlide]).show();
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
setInterval(function(){
$(itemSlide).fadeOut(speed);
$(itemSlide[nowSlide]).fadeIn(speed);
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
},delay);
});
})(jQuery);
please help me also to place it in the coding that I have made, apologize that I am still a beginner and I'm confused how to do it anymore, all the help will be appreciated :)
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AN Newsletter | Subscribe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="flex-w flex-str size1 overlay1">
<div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
<div class="wrappic1">
<a href="../main/index.html">
<img src="images/icons/logo.png" alt="IMG">
</a>
</div>
<div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">
<h3 class="l1-txt1 p-b-34 respon3">
Post Box
</h3>
<p class="m2-txt1 p-b-46">
Follow me for update now!
</p>
<form class="contact100-form validate-form m-t-10 m-b-10" action="../success/success.html">
<div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex#abc.xyz">
<input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">
<button class="flex-c-m ab-t-r size2 hov1 respon5">
<i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
</button>
<div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
<span>Subcribe Now:</span>
</div>
</div>
</form>
</div>
<div class="flex-w flex-m">
<span class="m2-txt2 p-r-40">
Follow me
</span>
<a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
P.S:
please don't block me, I'm still new and I still have to learn this platform and I still have to work on my project, so I think this platform will be very useful for me to complete my project, thank you
If you are referring to browser address bar with result of your input email address that looks like this:
/success/success.html?email=xxxx
This is because you haven't specified the method of your form so form uses PHP GET, and this is normal to pass the values on other page.
If you do not want to display this data, you should specify your form submit method like this:
<form class="contact100-form validate-form m-t-10 m-b-10"
action="../success/success.html" method="POST">
Keep in mind you have to fetch data on other side as POST also.
Read more about this here.
Replace GET method with POST method.
I have made this Todo project wherein one can add todos, delete them and line-through the ones that have been completed but I am facing problem in adding a new todo to the list i.e it every time on the addition of a new todo leaves an alternative space blank, unable to find the bug.
Following is the js file:
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click","span",function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13)
{
var todosText=$(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")
}
});
$(".fa-pencil-square").click(function(){
$("input[type='text']").fadeToggle();
});
html file:
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<script type="text/javascript" src="assests/js/lib/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="assests/css/todos.css">
<link href="https://fonts.googleapis.com/css?family=Gayathri|Open+Sans:600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assests/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Gayathri:700&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<h1 >TO-DO LIST <i class="fa fa-pencil-square" aria-hidden="true"></i></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Check the theme</li>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Go to the store</li>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Select dress </li>
</ul>
</div>
<script type="text/javascript" src="assests/js/todos.js"></script>
</body>
</html>
You didn't close the li tag in function that adds new todos:
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")
should be
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "</li>")
I'm having a very confusing problem using classList.toggle and Font Awesome icons. I want my hamburger menu to change to an X when clicked and I'm attempting to use a JavaScript function to accomplish this. I just can't get it to work right. The weird thing is, when I set the X as the default icon, and then change the icon class to the hamburger menu upon click, it works perfectly fine. Here is my working code, changing the X to a hamburger:
function myFunction(x) {
x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-times"></i>
</div>
That works fine. But when I try to reverse the order, changing a hamburger to an X, it doesn't work. Here's that code:
function myFunction(x) {
x.classList.toggle("fa-times");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
I've got to be missing something. What is it?!
When you do toggle("fa-times"), it doesn't remove the fa-bars class, it just adds or removes the fa-times class. And when the icon has class="fa fa-bars fa-times", the fa-bars class has priority, so you see the hamburger.
You need to goggle both classes to make it work reliably. This will work no matter which class you set initially.
function myFunction(x) {
x.classList.toggle("fa-times");
x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
You need to remove the old bars two , you can toggle the two classes and that's will work perfect at any order
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
<script>
function myFunction(x) {
x.classList.toggle("fa-times");
x.classList.toggle("fa-bars");
console.log(x.classList)
}
</script>
</body>
I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I have a delete button that is generated inside of a div. When clicked I want it to delete the itself and the div and everything inside of it.
$('#geography-save').click(function () {
$('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
$('.remove-save').on('click', function () {
alert('test');
$(this).parent('div').remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>
<div class="selected-criteria"></div>
Just use jQuery's on() method like this:
$('body').on('click', '.remove-save', function () { ... });
You should bind the event to a parent which already exists if the content is generated dynamically inside the DOM structure!
$('#geography-save').click(function () {
$('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
$('body').on('click', '.remove-save', function () {
alert('test');
$(this).parent('div').remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>
<div class="selected-criteria"></div>
As your button is dynamically generated, you can access it only based on a static element - so you can use this:
$('body').on('click','.remove-save', function () {
See demo below:
$('#geography-save').click(function() {
$('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function() {
$('body').on('click', '.remove-save', function() {
$(this).parent('div').remove();
});
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>
<div class="selected-criteria"></div>