I have a disabled drop down that I only want enabled after it has been clicked. I have tried several methods, the following being the latest incarnation that doesn't work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});
<div>
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</div>
$(function() {
$('div > div').on('click', function(event) {
$(this).hide().prev('select:disabled').removeAttr('disabled').focus();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="myForm">
<div style="display:inline-block; position:relative;">
<select name="test" id="testing" disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
</form>
</body>
</html>
This will detect the click on it by using CSS to add a layer over the select, but it still is not the best since it still requires more action from the user to open up the options. So it is basically a double click.
var elem = document.querySelector('span.cover');
function listener () {
elem.classList.remove('active');
elem.removeEventListener('mousedown', listener)
var sel = elem.querySelector('select');
sel.removeAttribute('disabled');
sel.focus();
}
elem.addEventListener('mousedown', listener)
span.cover {
position:relative;
}
span.active.cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<span class="cover active">
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
If you want to do it with jQuery
$(document).on('click','span.active', function(){
$(this).removeClass('active').find('select').removeAttr('disabled');
})
span.cover {
position:relative;
}
span.active.cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cover active">
<select name="test" id='testing' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
<span class="cover active">
<select name="test" id='testing2' disabled>
<option name="first" value='first'>first</option>
<option name="second" value="second">second</option>
</select>
</span>
Related
I have a simple date range search form with a "advanced options" dropdown using bootstrap. My problem is that when the user presses the submit button while the advanced dropdown is shown it has different behaviour across different browsers.
In IE the dropdown closes and form will get submitted. In Chrome, the dropdown closes but I have to click the submit button a second time to get the form to submit.
If I intercept the button click event and submit manually then I can get away with one click in Chrome, but then the form submits twice in IE.
Is there any way to get a consistent behaviour across both browsers?
https://jsfiddle.net/joeykruger75/bv8dshu8/
$('#date-range-box').daterangepicker({
"startDate": "07/14/2017",
"endDate": "07/20/2017"
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
});
$('#search-form').submit(function(ev) {
ev.preventDefault();
showMsg('submitted');
});
function showMsg(msg) {
var options = {
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
year: "numeric",
month: "2-digit",
useGrouping: "false"
};
var dateS = new Date().toLocaleString('en-GB', options);
toastr.options.positionClass = "toast-bottom-right";
toastr.info(msg + ' - ' + dateS, {
"positionClass": "toast-bottom-right",
});
}
body {
padding-top: 50px;
}
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 768px) {
#adv-search {
width: 400px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 400px;
}
}
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<form name="myform" id="search-form" class="form-horizontal" role="form">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search for snippets" id="date-range-box" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Advanced <span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="form-group">
<label for="filter">Location</label>
<select class="form-control">
<option value="0" selected>All Locations</option>
<option value="1">Location #1</option>
<option value="2">Location #2</option>
<option value="3">Location #3</option>
<option value="4">Location #4</option>
</select>
</div>
<div class="form-group">
<label for="filter">Product</label>
<select class="form-control">
<option value="0" selected>All Products</option>
<option value="1">Product #1</option>
<option value="2">Product #2</option>
<option value="3">Product #3</option>
<option value="4">Product #4</option>
<option value="4">Product #5</option>
</select>
</div>
<div class="form-group">
<label for="contain">Customer Ref</label>
<input class="form-control" type="text" />
</div>
</div>
</div>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Try the return false option instead ev.preventDefault()
https://subinsb.com/jquery-return-false-vs-preventdefault/
right now I am having a problem. I have created a calculater by myself. Check it out here: https://radlvoo.de/typ/mtb-fully/ (Last element in the sidebar).
If you select some values and click on the button, the overlay shows up but wrong.. the overlay is going over all the sidebar content. But I just want to have to overlay over the last element, the calculator. How can I do this?
This is my form code so far:
<form class="filterform" id="sidebarRahmenhoehenrechner">
<div class="form-group"><label class="control-label">FAHRRADTYP</label>
<select id="fahrradtypHöhenrechner" class="form-control" name="typ">
<option value="">Bitte wählen…</option>
<option value="trekkingrad">TREKKINGRAD</option>
<option value="cityrad">CITYRAD</option>
<option value="mountainbike hardtail">MOUNTAINBIKE HARDTAIL</option>
<option value="mointainbike fully">MOUNTAINBIKE FULLY</option>
<option value="crossrad">CROSSRAD</option>
<option value="rennrad">RENNRAD</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">GESCHLECHT</label>
<select id="geschlechtHöhenrechner" class="form-control" name="geschlecht">
<option value="">Bitte wählen…</option>
<option value="damen">DAMEN</option>
<option value="herren">HERREN</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">FAHRSTYLE</label>
<input name="fahrstyle" type="radio" value="sportlich" /> Sportlich orientiert
<input name="fahrstyle" type="radio" value="touren" /> Touren orientiert
<div class="clearfix"></div>
</div>
<div class="form-group"><label class="control-label">SCHRITTHÖHE</label>
<input id="schritthöheInput" min="0" name="schritthöhe" type="number" />
<div class="clearfix"></div>
</div>
<div class="form-group form-group-block" style="margin-top: 20px;"><button id="rahmenhöhenRechnerButton" onclick="rahmenhöhenRechnerMain();" type="button">Rahmenhöhe berechnen</button></div>
<div class="clearfix"></div>
<div id="rahmenhöhenRechnerOverlay" style="position: absolute; display: none; z-index: 500; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.75); overflow: auto;"><div onclick="disableOverlay();" id="closeButtonOverlay">✖</div><div><p id="rahmenhöheAnzeigen"></p></div></div>
<div></div>
</div>
</form>
And this is the overlay code doing:
function disableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "none";
}
function enableOverlay(){
document.getElementById("rahmenhöhenRechnerOverlay").style.display = "block";
}
Kind regards
The class hidden should be toggling based on if the checkbox is checked. One of the drop-down menus should be hidden and the other be displayed.
maybe my ternary operator isn't set up properly.
Thanks in advance.
function toggleButton() {
var toggler = $("input[name='toggler']").prop('checked');
var awardOptions = $('#awardOptions');
var yearOptions = $('#yearOptions');
var awardShow = awardOptions.removeClass('hidden');
var yearShow = yearOptions.removeClass('hidden');
var awardHide = awardOptions.addClass('hidden');
var yearHide = yearOptions.addClass('hidden');
console.log(toggler);
return (toggler) ? (awardShow,yearHide) : (awardHide, yearShow);
}
$('#toggler').on('click', function(){
toggleButton();
});
.hidden {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>
This is the function I'm using to trigger the toggleButton function.
$('#toggler').on('click', function(){
toggleButton();
});
You can use var awardShow = awardOptions.toggleClass('hidden'); instead of using addClass or removeClass.
$('#toggler').on('click', function(){
$('#awardOptions, #yearOptions').toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleWrapper">
<input type="checkbox" class="dn" name="toggler" id="toggler" checked/>
<label for="toggler" class="toggle">
<span class="toggle__handler"></span>
</label>
</div>
<div class="inputBox" id="filter">
<div class="dropdown hidden" id="yearOptions">
<select id="hof-year">
<option value="0">Choose a Year</option>
<option value="2016">2016</option>
</select>
</div>
<div class="dropdown" id="awardOptions">
<select id="hof-accomp">
<option value="0">Choose an Award</option>
</select>
</div>
</div>
Problem:
when the user click on multiple check boxes the text value from the option tags copied multiple times in the item list.
Let There are two option list .
list 1 and list 2
from list 1 and list 2 i need the text value only once from the option tags.
Please see My fiddle for better understanding.
<p>list 1</p>
<select >
<option id="item" value="amna">Volvo</option>
<option id="item" value="sara">Saab</option>
<option id="item" value="jhon">Opel</option>
<option id="item" value="khubab">Audi</option>
<p>list 2</p>
<select >
<option id="item" value="volvo">Volvo</option>
<option id="item" value="saab">Saab</option>
<option id="item" value="opel">Opel</option>
<option id="item" value="audi">Audi</option>
</select>
My Fiddle
Thanks in advance and do not cast vote down to my question as i am new here.Please edit my question if you think it is ambiguous.
Fiddle Example will be appreciated.
First of all change all id's to classes you cannot use multiple id's with same name.
Every time you are appending an extra li from your select tag which is wrong.
Here is your required answer,
function addToList( values, optionText,optionText2 ) {
var list = $( "#grocery-list ul" );
list.empty();
values.each(function(){
list.append( "<li>" + $(this).next().html() + " <a class='delete_li'> (x)</a> </li>" );
});
list.append( "<li>" + optionText + " <a class='delete_li'>(x)</a> </li>" );
list.append( "<li>" + optionText2 + " <a class='delete_li'>(x)</a> </li>" );
};
$('body').on('click', '.delete_li', function() {
$(this).closest('li').remove();
});
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
$( "input:checked" ).effect( "transfer", {
to: "#grocery-list ul",
complete: function() {
var optionText = $('.first_select :selected').val();
var optionText2 = $('.second_select :selected').val();
console.log(optionText)
addToList( $( "input:checked" ), optionText,optionText2 );
}
});
});
fieldset {
width: 300px;
}
input {
padding: 0.5em;
}
#grocery-list {
border: 1px solid black;
float: right;
width: 300px;
padding: 0 1em 0em 1em;
}
#grocery-list h3 {
margin-top: 0.3em;
}
.ui-effects-transfer {
border: 1px dotted black;
}
<style href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"></style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="grocery-list">
<h3>Item List</h3>
<ul>
<li class="empty">Empty</li>
</ul>
</div>
<form>
<fieldset>
<legend>Add Item</legend>
<label for="item">Item:</label><br>
<input class="item" type="checkbox" name="vehicle" value="bike"><label>I have a bike</label>
<br>
<input class="item" type="checkbox" name="vehicle" value="cycle" ><label>I have a bicycle </label>
<br>
<input class="item" type="checkbox" name="vehicle" value="aeroplane" ><label>I have a aeroplane </label>
<br>
<input class="item" type="checkbox" name="vehicle" value="Car"><label>I have a car</label><br>
<select class="first_select">
<option class="item" value="volvo">Volvo</option>
<option class="item" value="saab">Saab</option>
<option class="item" value="opel">Opel</option>
<option class="item" value="audi">Audi</option>
</select><br>
<select class="second_select">
<option class="item" value="volvo">Volvo</option>
<option class="item" value="saab">Saab</option>
<option class="item" value="opel">Opel</option>
<option class="item" value="audi">Audi</option>
</select><br>
<button>Add</button>
</fieldset>
</form>
Pls run this code and check,
Here is the Fiddle
Your problem was to add the car name inside of the each loop which added it once per selected checkbox.
Check this fiddle:
$("button").button();
function addToList(values, optionText) {
var list = $("#grocery-list ul");
list.empty();
values.each(function() {
list.append("<li>" + $(this).next().html() + "</li>");
});
list.append("<li>" + optionText + "</li>");
};
$("form").on("submit", function(event) {
event.preventDefault();
$("input:checked").effect("transfer", {
to: "#grocery-list ul",
complete: function() {
var optionText = $('select :selected').val();
addToList($("input:checked"), optionText);
}
});
});
fieldset {
width: 300px;
}
input {
padding: 0.5em;
}
#grocery-list {
border: 1px solid black;
float: right;
width: 300px;
padding: 0 1em 0em 1em;
}
#grocery-list h3 {
margin-top: 0.3em;
}
.ui-effects-transfer {
border: 1px dotted black;
}
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="grocery-list">
<h3>Item List</h3>
<ul>
<li class="empty">Empty</li>
</ul>
</div>
<form>
<fieldset>
<legend>Add Item</legend>
<label for="item">Item:</label>
<br>
<input id="item" type="checkbox" name="vehicle" value="bike">
<label>I have a bike</label>
<br>
<input id="item" type="checkbox" name="vehicle" value="cycle">
<label>I have a bicycle</label>
<br>
<input id="item" type="checkbox" name="vehicle" value="aeroplane">
<label>I have a aeroplane</label>
<br>
<input id="item" type="checkbox" name="vehicle" value="Car">
<label>I have a car</label>
<br>
<select>
<option id="item" value="volvo">Volvo</option>
<option id="item" value="saab">Saab</option>
<option id="item" value="opel">Opel</option>
<option id="item" value="audi">Audi</option>
</select>
<br>
<button>Add</button>
</fieldset>
</form>
I'm tired to search google for this so I decided to ask professionals here. Is it possible and How to create an effect of drop down DIV like here http://137pillarshouse.com/accommodation - the BOOK NOW block with pure javascript without jQuery or any libraries.
THanks
well they didn't obfuscate javascript code, you can learn from their code.
1. http://137pillarshouse.com/js/script.js
// show/hide booking form
$('#bookingpanel #booknow').click(function(){
$('#quickbookingform').slideToggle(750,'easeOutQuart');
$('#bookingpanel').toggleClass('open');
$(this).html($(this).html() == 'Book <em>Now</em>' ? 'Close' : 'Book <em>Now</em>');
return false;
});
// Quick Booking Form
$('#StartDateString').datepicker({dateFormat:'dd/mm/yy',firstDay:1,minDate:1,maxDate:'+18m'});
2.
<div id="bookingpanel" class="">
<form action="https://www.luxuryroomreservations.com/en-GB/IBE/115/Landing/Index" method="post" id="quickbookingform" class="booking" style="display: none; ">
<fieldset>
<label for="StartDateString">Arrival Date</label>
<input class="text hasDatepicker" id="StartDateString" name="CurrentBooking.CurrentUserSearch.StartDateString" type="text" value="">
<label for="NoOfNights">Nights</label>
<select id="CurrentBooking_CurrentUserSearch_NoOfNights" name="CurrentBooking.CurrentUserSearch.NoOfNights">
<option selected="selected" value="1">1</option>
.....
</select>
<div class="left">
<label for="NoOfAdults">Adults</label>
<select id="NoOfAdults" name="CurrentBooking.CurrentUserSearch.NoOfAdults">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
</select>
</div><!-- /.left -->
<div class="right">
<label for="NoOfChildren">Children</label>
<select id="NoOfChildren" name="CurrentBooking.CurrentUserSearch.NoOfChildren">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div><!-- /.right -->
<input id="CurrentBooking_CurrentUserSearch_AccountId" name="CurrentBooking.CurrentUserSearch.AccountId" type="hidden" value="">
<input id="CurrentBooking_CurrentUserSearch_SpecialRateCode" name="CurrentBooking.CurrentUserSearch.SpecialRateCode" type="hidden" value="">
<input id="CurrentBooking_CurrentUserSearch_IataCode" name="CurrentBooking.CurrentUserSearch.IataCode" type="hidden" value="">
<input id="CurrentBooking_CurrentUserSearch_HotelCode" name="CurrentBooking.CurrentUserSearch.HotelCode" type="hidden" value="HUCNXPH">
<p><input type="submit" value="Check Availability" id="booking_submit"></p>
</fieldset>
</form>Book <em>Now</em>
</div>
3. and a bit of CSS
Mobile
#media only screen and (min-width: 768px)
#bookingpanel {
top: -10px;
right: 60px;
}
desktop
#bookingpanel {
position: absolute;
top: -10px;
right: 20px;
z-index: 100;
width: 15em;
-moz-transition-duration: .25s;
-webkit-transition-duration: .25s;
-o-transition-duration: .25s;
-ms-transition-duration: .25s;
transition-duration: .25s;
}
the rest is up to you... style it a bit and you'll get there I'm sure :)