I have a form with some input fields (text-input). Then i have a button at the bottom that says "Continue" and inside the form is a collapse-div (bootstrap 4). When the button is clicked the button moves to the bottom and two checkboxes are visible.
My goal is to make this button act like this:
First time click, the div collapses open and two checkboxes are visible
The button moves down (working at this point) and the submit button changes text to "continue" to "Submit" and it should work as a submit button (not collapse the div again)
This is the code:
<div class="collapse" id="collapseExample">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
label for checkbox 1
</label>
<input class="form-check-input" type="checkbox" value="" id="checkbox2">
<label class="form-check-label" for="checkbox2">
label for checkbox 2
</label>
</div>
</div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Continue</button>
I could either use jQuery to remove the first button and append/add a submit button but what would be the best method (use the same button or remove it and append a new submit button). Something ala this:
$('button[data-toggle="collapse"]').click(function() {
/* Remove the "continiue"-collapse button and append a new one */
});
If someone have any idea it would be nice to get som input.
Thanks!
Related
I have created a series of radio buttons using boostrap version 3.3.7. I have also added a functionality such that when I click on one of those buttons the color of the radio button has to permanently change to blue. it all works fine when I load jQuery plugin with version bootstrap as shown below
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But this will cause an error to toggle button which I have implemented and it is supposed to work as a dropdown list. If I Reverse the order in which jquery and bootstrap have been loaded then the dropdown will work all good causing an error with radio buttons. I would like to mention that radio button and toggle button are different features which I am working on. This has become a tricky problem to solve. Could I know which version of jquery would work for both the features which can be compatible with Bootstrap version 3.3.7 Please find the code below.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a href="#">
<i class="glyphicon glyphicon-dashboard"></i>
Dashboard
</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" name="MontageSwap" id="MontageSwap"
onchange="montageSwap(this.value);">
<i class="glyphicon glyphicon-duplicate"></i>
Montage
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Car</li>
<li>Bus</li>
<li>Bicycle</li>
</ul>
</li>
<style>
.btn-default {
color: #D8D8D8;
background-color: #D8D8D8;
border-color: #D8D8D8;
}
.btn-default:hover {
background-color: #5F5A66;
}
.btn-default.active {
background-color: #4A90E2;
}
</style>
<div class="w3-display-container col-md-12 col-sm-10 col-xs-8" style="position:relative;top:1px;bottom:0;">
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" autocomplete="off"
onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
</label>
</div>
</div>
</div>
<script>
$('.btn.btn-default').on("click", function () {
$(this).addClass('active');
});
</script>
How radio buttons are supposed to work
How they are actually working for me
There is nothing wrong with the compatibility of bootstrap and jquery. When you are using a radio button, there can only be one active button. And since you added blue color only to those with active class, upon clicking another button, the active class gets transferred to the newly clicked button.
The only reason why the radio button gets fixed when you switch the position of the jquery and bootstrap is because bootstrap is not working anymore and causes bugs. The best way you can achieve the behavior that you want is by using checkbox instead of radio.
But if you want to insist on using radio button, you need to make another class for your color. Here's what I did, from your css code:
.btn-default.active {
background-color: #4A90E2;
}
I changed it to:
.btn-default.color {
background-color: #4A90E2;
}
and added:
.btn-default.focus{
background-color: #4A90E2 !important;
}
to override the focus class when you click on the element.
for the script, i changed the active to color
$('.btn.btn-default').on("click", function () {
$(this).addClass('color');
});
To get rid of the small square below the bar that you created, I added this:
input[type=radio]{
margin-top:-6px;
}
You may visit the JSBin sample here
As you can see there, both the functions are working fine. :)
I have created a sideMenu and one of the item inside it has a text on left, and a toggle (checkbox) on the right. Menu item is linked to a view, which has a list of items. Toggle is like a button, which allow user to clear the list, without having to go inside the view.
Earlier I had 'menu-close' attribute added to the menu item, so every time I click the toggle, it would change the value and close the side menu.
Now the issue is, after removing the 'menu-close' I can click on the toggle and menu stays open, but the menu-item link is not working. I have tried setting ng-click and href. If I set href, the item navigates to new view even if I click on toggle.
<ion-item class="item-toggle" ng-click="openNotifications()">
<i class="icon ion-android-notifications-none"></i>
Notifications
<label class="toggle toggle-assertive">
<input type="checkbox" ng-click="alert('notification on')">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
How can make sure that if I click on toggle it changes, and when I click on item it navigates to view?
You should just be able to add $event.stopPropagation() to the outer click event, click events propagate and bubble so that is why both are firing.
try this:
<ion-item class="item-toggle" ng-click="openNotifications()">
<i class="icon ion-android-notifications-none"></i>
Notifications
<label class="toggle toggle-assertive">
<input type="checkbox" ng-click="alert('notification on');$event.stopPropagation()">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
FIXED IT:
so you need the stop prorogation, you also need to add this to the css to make the toggle item clickable:
.item-toggle{
pointer-events:initial !important;
}
here is a ionic playground to show it working!
http://play.ionic.io/app/d9920eee107d
You could place the toogle inside a normal list-item, to prevent the toogle-item behavior.
<ion-item ng-click="show('click')">
Item
<label class="toggle">
<input type="checkbox" ng-model="state" ng-change="show(state)">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
After much work I have managed to move all the information from the Customization page on a Bundled Product to the front page. I now want to hide the buttons that direct the user to the customization page. Both buttons however use the save class name.
There are two separate buttons on this page : I need to hide the first button
Button 1 which is:
<div class=“product-shop”>
<div class’Product-main-info”>
<div>
<button class="button btn-cart" type="button" onclick="Enterprise.Bundle.start();">
<span>
<span>Customize and Add to Cart</span>
</span>
</button>
</div>
</div>
Button 2 is:
<div class="add-to-cart">
<label for="qty">Qty:</label>
<input id="qty" class="input-text qty" type="text" title="Qty" value="1" maxlength="12" name="qty">
<button class="button btn-cart" onclick="productAddToCartForm.submit(this)" title="Buy Now" type="button">
<span>
<span>Buy Now</span>
</span>
</button>
</div>
I have tried hiding the button using CSS however have only been able to switch both buttons off. This the last step in a long Magento GO customization project. Any help much appreciated.
Regards
Mark
basically I have a webpage which triggers a modal containing an HTML form, this form has tabs that you can control with href values, however whenever I click on an anchor link it affects the parent page, but no the modal form.
Normally if the form is not in a modal and is implemented directly on an HTML page the href links work into moving the tabs of the form. However when I make the form into a modal from another page I have this problem.
Any solutions or javascript workarounds?
Here is the form inside the modal
<div class="tab-content ">
<div class="tab-pane active" id="panel6-1">
<div class="row-fluid">
<div class="span5"> <h4><i class="icon-user"></i> Property Details</h4>
<label>Selected Address : </label>
<input type="text" value="<?php $result = getAdressFromLatLng($_GET["lat"],$_GET["lng"]); echo $result->address; ?>" class="input-block-level" />
<label>Property Type </label>
<select>
<option id="">Residential</option>
</select>
<label>Property Subtype </label>
<select>
<option id="">Residential</option>
</select>
<label>
<button type="button" data-toggle="button" class="btn btn-mini custom-checkbox active"><i class="icon-ok"></i></button>
</label>
<br />
//here is the href that when I click on I want to show the panel6-2
Go to next tab<i class="icon-chevron-sign-right"></i>
</div>
Perhaps setting the target of the href in the modal to the name or id of the modal window? Otherwise could wrap in modal form in an iframe.
I have a form with multi checkbox which is required field that I turned into twitter bootstrap toggle buttons.
I am trying to activate a selection button with js, by adding 'active' class to it.
I am able to add the class but when saving the form I am getting an error that the field is required.
What am I missing?
Here is the form.
<div id="reminder">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_1" value="1" title="Choose at least one reminder option">Now</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_2" value="30" title="Choose at least one reminder option">30m</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_3" value="60" title="Choose at least one reminder option">1h</label>
<label class="btn btn-primary active">
<input type="checkbox" name="reminder" id="id_reminder_4" value="120"
title="Choose at least one reminder option">2h</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_5" value="1440"
title="Choose at least one reminder option">1d</label>
</div>
</div>
This is how I am adding the class:
$('#reminder label:eq(3)').addClass('active')
You're only adding the class, but you don't actually select it. Add the selected attribute and it will work:
$('#reminder label:eq(3)').addClass('active').attr('selected',true);
Here is a demo
Add class open not active to open the dropdown (if thats what you are trying to do). You have to add the class to <li class='dropdown open'> which hosts the <ul class='dropdown-menu'>
btn-primary is the css that will make your buttons blue. It looks like this is what you are using for inactive buttons because the way you have your code, all the buttons should be blue. If you are trying to make the button grey because grey will be your active button, then you can use removeClass('btn-primary'). This will turn it grey. Hope this helps.