I'm setting up a registration form and using JQuery to change a button type after pressing 'next'.
This currently works but I would like the button to revert in the case 'back' is pressed.
My code is below.
$(function () {
$('#next').on('click', function () {
$('.reg-page-1').animate({'left': '-105%'});
$('.reg-page-2').animate({'left': '0px'});
$('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');
});
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('btn-submit-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
});
And the block of HTML in question is below.
<div class="btn-toolbar" style="width:100%;">
<div class="btn-back-1" style="width:49%;float:left;">
<button id="back" type="button" class="btn btn-default btn-lg btn-block" aria-expanded="false">Back </button>
</div>
<div class="btn-next-1" style="width:49%;float:right;">
<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>
</div>
</div>
UPDATE
I've updated the JS to the below
$(function () {
$('#next').on('click', function () {
$('.reg-page-1').animate({'left': '-105%'});
$('.reg-page-2').animate({'left': '0px'});
$('.btn-next-1').html('<button type="submit" class="btn btn-submit-1 btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Submit!</button>');
});
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
});
However, I am now finding myself in a strange issue.
The button indeed works, it changes the state of my application.
But once "back" is clicked and the button switches back to "next". the "next" button does not seem to function or switch again to a "submit" button.
In other words, it seems these functions are only capable of working once each.
Everything seems to be ok, but you dont have any selector with 'btn-submit-1', with the corrections your code for back button must be like this:
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
You should change the second selector to be the same as the first one.
Because with the .html() you are changing the content of the container div of the nex, but that div is still there.
If you use:
$('#back').on('click', function () {
$('.reg-page-1').animate({'left': '10%'});
$('.reg-page-2').animate({'left': '115%'});
$('.btn-next-1').html('<button id="next" type="button" class="btn btn-primary btn-lg btn-block" aria-expanded="false">Next </button>');
});
it will return to the original state.
Related
I have problem as below:
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
$("#active-all").click(function(){
$('.btn').toggleClass('active');
});
I have added active class to button whenever I click active-all button. I found this active class still exist to every tab that I have those HTML button. So that I want refresh that div every time I clicked tab.
I try with jQuery load() and reload() but this seems not solving my problem.
UDATE
I have added active class to button when I clicked active-all button. I found this active class still exist even I go forward or backward to another page. So that I want to find a way refresh that div every time I go forward or backward to another page.
Need something like this?
$(".btn").click(function(){
if (this.id === 'active-all') {
$(".btn", $(this).parent()).toggleClass('active');
}
});
.active {
background-color: #4CAF50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
<div id="secondTab">
<div class="btn-choice">
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn" id="btn-a">A</button>
<button type="button" class="btn" id="btn-a">B</button>
<button type="button" class="btn" id="btn-a">C</button>
<button type="button" class="btn btn-default" id="btn-a">D</button>
</div>
</div>
For a javascript project, I need to be able to interact with three bootstrap buttons.
The code for the buttons goes as follows:
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I am not allowed to modify this line, so simply adding an id to the button is out of the question.
That being said, how can I add an click listener to these buttons and interact with them?
Thank you for your time.
You can use querySelector, see example below:
var button1 = document.querySelector('[data-id="0"]')
var button2 = document.querySelector('[data-id="1"]')
var button3 = document.querySelector('[data-id="2"]')
button1.addEventListener("click", () => {
console.log("button1");
});
button2.addEventListener("click", () => {
console.log("button2");
});
button3.addEventListener("click", () => {
console.log("button3");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
They already seem to have ids that you can query for using querySelector along with attribute selectors.
document.querySelector("a[data-id='0']").addEventListener("click", () => {
console.log("You clicked data id 0");
});
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
Try to use the classname:
var elements = document.getElementsByClassName("btn");
var myFunction = function() {
console.log("Button with data-id", this.getAttribute("data-id"), "clicked");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a> <a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
Simply use data-id as selector.
see example
let elem = document.querySelector('[data-id="0"]');
console.log(elem)
elem.click();
<a data-id="0" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="1" class="btn btn-light btn-block btn-add" href="#">Buy</a>
<a data-id="2" class="btn btn-light btn-block btn-add" href="#">Buy</a>
I have this code :
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
I would like select all buttons from div #filters except the only one with #sort, using jQuery's selector.
Currently I have tried to achieve this by following code.
$('#filters').not('#sort').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button:not("#sort")', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
Can you help me ?
Any help in this would be greatly appreciated.
Use .not() in your selector and find buttons as $('#filters > button') by using Child Selector (“parent > child”)
Your question and code is bit confusing but It says that you want to apply the active class on button when it clicked and removed from other buttons.
The following click event will work on all the buttons except #sort.
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
Use $("#filters *").not("#sort") selector.
Please check below snippet for more understanding.
$("#filters button").on("click",function(){
$("#filters *").not("#sort").removeClass('active');
$(this).not("#sort").addClass('active');
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
You could use a css :not selector like this:
$("#filters button:not('#sort')")
I have a list of options the user can choose, and when the user clicks a button for the option, there is a jquery implementation that removes the button and appends a tag at the top of the page, the user has the option to remove this tag by clicking the 'X' on the tag and it will then be removed, and the button is place (append) back to where it came from. Everything is working except on page load, the buttons are all spaced apart appropriately, but if the user clicks the button and then decides to remove the tag from their selections, when the button is appended back to its original div, it touches the other buttons:
And if the user decides they don't want option any more, and remove it, the button is appended back to the original div, like this:
There is no margins or padding on the original images CSS, so I can't figure out what's causing this.
The HTML for the buttons is as follows:
<div id="skills-selection">
<h4>Skills:</h4>
<div id="skill-row">
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 1</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 2</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 3</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 4</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 5</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 6</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 7</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 8</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 11</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 12</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 13</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 14</button>
</div>
</div><!--skills selection-->
The jquery is as follows :
$(document).on('click', '.skilltag', function() {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>   x   </span></span>");
$(this).remove(); });
$(document).on('click', '.remove-skilltag', function() {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button>"); });
and the CSS that is style the buttons is:
.skilltag {
width: 80px;
line-height: .5;
height: 20px;
text-align: center;
display: inline-block; }
Does anyone know why this is happening?
White space is your issue, items horizontally aligned with display:inline-block take into account whitespace/linebreaks between elements.
Your markup starts like:
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button>
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
but after appending your markup won't have the linebreak like so:
<button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 9</button><button type="button" class="btn btn-primary skilltag" data-toggle="button" aria-pressed="false" autocomplete="off">Skill 10</button>
You can either start your markup without the whitespace/linebreaks
or swap to floats to override display:inline-block
.skilltag {
float:left;
margin:2px;
...
}
Or change your append code to include whitespace
Because the buttons elements are inline-block when you're appending them there's no white space, whereas in your HTML there is white space.
If you add a space after the append tag it should resolve the issue. However it might be preferable to alter the CSS to space the buttons.
$(document).on('click', '.skilltag', function () {
var txt = $(this).text();
$(".chosen-tags").append("<span class='tag label label-info choice-tag'>" + txt + "<span class='remove-skilltag' data-role='remove'>   x   </span></span>");
$(this).remove();
});
$(document).on('click', '.remove-skilltag', function () {
var txt = $(this).parent().clone().children().remove().end().text();
$(this).parent().remove();
$("#skill-row").append("<button type='button' class='btn btn-primary skilltag' data-toggle='button' aria-pressed='false' autocomplete='off'>" + txt + "</button> ");
});
Jsfiddle with it working: http://jsfiddle.net/juy2wknd/1/
There is break after each button in your html tag so which is why you see some space between the buttons. But when the button is appended back to its place there is not any brake between it and the last button before it so it will leave no space. Another thing is you did'nt give them some margin in your css.
I need to get the value of the value attribute of the button element and write this value into another modal.
I have a loop in my PHP which writes the following HTML:
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>
When I click on a button it shows a modal with two buttons, one to continue and one to cancel. I want store the value of the value attribute of the first button in the href attribute of the "continue" button in the second modal.
My modal:
<div class="modal-body">
<div class="text-center">
<div class="i-circle danger"><i class="fa fa-times"></i></div>
<h4>Are you sure?!</h4>
<p>If yes click on Continue!</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="IWANTGETIDHERE">
<button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
</a>
</div>
</div>
</div>
Here is a demo of my modal.
Using jQuery:
$(document).ready(function() {
$('.btn').click(function() {
alert($(this).attr("value"));
});
});
Instead of alert, use:
$('.modal-footer a').attr("href", $(this).attr("value"));
See the JSFiddle
Using Pure Javascript
document.getElementById('btn').onclick = function() {
document.getElementById('link').setAttribute('href', this.value);
}
See the JSFiddle
button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href = document.getElementById("buttonID").value
}
If you are looking for no dependancies.
You may try this, add a data-customId attribute and remove the value from all of your buttons:
<button data-customId="1" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>
Also, add an id to your modal div like:
<div id='confirmAction' class="modal-body">
<!-- Markup -->
</div>
Then register a handler for bootstrap show event:
$('#confirmAction').on('show.bs.modal', function (e) {
$id = $(e.relatedTarget).attr('data-customId'); // Get the customId
$(this).find('a:first').attr('href', $id);
});