I have two select dropdowns and a button. I want the button to be disabled when no second option is selected except for one option.
When I select a first option, the second field appears except for one option, with that one option there is only one select element so the button must be clickable then.
// linking values to dropdowns
var placesLists = {
'uiteten': '#uiteten',
'snackensnoepen': '#snackensnoepen',
'drankje': '#drankje',
'evenement': '#evenement',
'stappen': '#stappen',
'cultuur': '#cultuur',
'sightseeing': '#sightseeing',
'kids': '#kids',
'informatie': '#informatie',
};
$('select[name=watwiljedoen]').change(function() {
//hide all extra lists
$('.hide').hide().prop("disabled", true);
$('#disabledselect').hide();
//get current value
var value = $(this).val();
//if there is a list for this value, show it
if (value in placesLists) {
$(placesLists[value]).show().prop("disabled", false);
$(placesLists[value]).removeClass('dropdownwwjdnonactive');
$(placesLists[value]).addClass('dropdownwwjd');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
<select class="dropdownwwjd" name="watwiljedoen">
<option value="lorem" disabled selected>Wat wil je gaan doen?</option>
<option value="shoppen">Shoppen</option>
<option value="uiteten">Uit eten</option>
<option value="snackensnoepen">Snacken / snoepen</option>
<option value="drankje">Drankje doen</option>
<option value="evenement">Evenementen bezoeken</option>
<option value="stappen">Stappen</option>
<option value="cultuur">Cultuur snuiven</option>
<option value="sightseeing">Sightseeing</option>
<option value="kids">Kids</option>
<option value="informatie">Meer informatie</option>
</select>
<select id="disabledselect" class="dropdownwwjdnonactive" disabled>
<option value="sdgsdg">Verfijn je keuze</option>
</select>
<select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="ontbijt">Ontbijt</option>
<option value="lunch">Lunch</option>
<option value="diner">Diner</option>
<option value="vis">Vis</option>
<option value="vlees">Vlees</option>
<option value="broodje">Broodje</option>
<option value="patatje">Patatje</option>
<option value="tapas">Tapas</option>
<option value="hamburger">Hamburger</option>
<option value="grieks">Grieks</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="traiteur">Traiteur</option>
</select>
<select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="snelle snack">Snelle snack</option>
<option value="snoepen">Snoepen</option>
<option value="IJsje">IJsje</option>
<option value="kroketje">Kroketje</option>
<option value="brammetje">Brammetje</option>
</select>
<select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="iets fris">Iets fris</option>
<option value="thee">Thee</option>
<option value="koffie">Koffie</option>
<option value="biertje">Biertje</option>
<option value="wijntje">Wijntje</option>
<option value="whiskey">Whiskey</option>
<option value="cocktail">Cocktail</option>
<option value="slush">Slush</option>
</select>
<select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="in het stadscentrum">In het stadscentrum</option>
<option value="evenement">Evenement</option>
<option value="braderie">Braderie</option>
<option value="rondje dorp">Rondje dorp</option>
</select>
<select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="eten">Eten</option>
<option value="drinken">Drinken</option>
<option value="theater">Theater</option>
<option value="danser">Dansen</option>
<option value="muziek">Muziek</option>
</select>
<select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="kunst">Kunst</option>
<option value="stadscentrum historie">Stadscentrum historie</option>
<option value="buitenlandse restaurants">Buitenlandse restaurants</option>
<option value="cultuur">Cultuur</option>
<option value="schilderen">Schilderen</option>
<option value="kunst uitleen">Kunst uitleen</option>
<option value="uitleen">Uitleen</option>
<option value="galerie">Galerie</option>
<option value="workshops">Workshops</option>
</select>
<select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="architectuur bekijken">Architectuur bekijken</option>
<option value="de boekenberg">De Boekenberg</option>
<option value="theater de stoep">Theater de Stoep</option>
<option value="voorstraat">Voorstraat</option>
<option value="museum winkel">Museum winkel</option>
</select>
<select id="kids" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="speelgoed">Speelgoed</option>
<option value="speeltuin">Speeltuin</option>
</select>
<select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="parkeren">Parkeren</option>
<option value="naar de wc">Naar de wc</option>
<option value="plattegrond bekijken">Plattegrond bekijken</option>
<option value="koopzondagen">Koopzondagen</option>
<option value="toezicht en beveiliging">Toezicht en beveiliging</option>
</select>
<br>
<input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten">
<!-- <button type="button" name="button">Bekijk resultaten</button> -->
</form>
I tried to disable the button from the start and enable it on change, but that does not work because when shoppen is selected the code stops working.
shoppen is also the option where the button needs to be enabled all the time.
How can I fix this?
If I understood correctly, the submit button should be disabled at all times and only be active in these cases:
When "shoppen" is selected on the first dropdown
When an option different than the default one is selected for any of the other dropdowns
One thing that you can do is, when the first select value is changed, disable automatically the button, and only enable it if the value of that select is shoppen.
// hide the button by default on change
var $button = $("[type=submit]");
$button.prop("disabled", true);
// only enable it if the selected option is shoppen
if (value === "shoppen") {
$button.prop("disabled", false);
}
Also, when each of the other selects is displayed in the condition below, you mark the first option (the one that is not selectable and invalid) as selected. That way the logic will be enforced in case the user chooses and option, goes back to another, and comes back to this same one:
// move to the first disabled option to force selection
$(placesLists[value]).find("option:first-child()").prop("selected", true);
Finally, add a change event handler for all the selects that are not the first/main one and enable the button if the selected option is not null (the first one):
// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
//get current value
var value = $(this).val();
// disable the button by default
var $button = $("[type=submit]");
$button.prop("disabled", true);
// enable the button if the value is not null
if (value != null) {
$button.prop("disabled", false);
}
});
Plus disable the button by default with the disabled attribute.
Here is the code with those 3 changes:
// linking values to dropdowns
var placesLists = {
'uiteten': '#uiteten',
'snackensnoepen': '#snackensnoepen',
'drankje': '#drankje',
'evenement': '#evenement',
'stappen': '#stappen',
'cultuur': '#cultuur',
'sightseeing': '#sightseeing',
'kids': '#kids',
'informatie': '#informatie',
};
$('select[name=watwiljedoen]').change(function() {
//hide all extra lists
$('.hide').hide().prop("disabled", true);
$('#disabledselect').hide();
//get current value
var value = $(this).val();
// hide the button by default on change
var $button = $("[type=submit]");
$button.prop("disabled", true);
// only enable it if the selected option is shoppen
if (value === "shoppen") {
$button.prop("disabled", false);
}
//if there is a list for this value, show it
if (value in placesLists) {
$(placesLists[value]).show().prop("disabled", false);
$(placesLists[value]).removeClass('dropdownwwjdnonactive');
$(placesLists[value]).addClass('dropdownwwjd');
$(placesLists[value]).find("option:first-child()").prop("selected", true); // move to the first disabled option to force selection
}
});
// when a select different than the first one is changed
$('select:not([name=watwiljedoen])').change(function() {
//get current value
var value = $(this).val();
// disable the button by default
var $button = $("[type=submit]");
$button.prop("disabled", true);
// enable the button if the value is not null
if (value != null) {
$button.prop("disabled", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" action="wat-wil-je-doen" role="form" method="post">
<select class="dropdownwwjd" name="watwiljedoen">
<option value="lorem" disabled selected>Wat wil je gaan doen?</option>
<option value="shoppen">Shoppen</option>
<option value="uiteten">Uit eten</option>
<option value="snackensnoepen">Snacken / snoepen</option>
<option value="drankje">Drankje doen</option>
<option value="evenement">Evenementen bezoeken</option>
<option value="stappen">Stappen</option>
<option value="cultuur">Cultuur snuiven</option>
<option value="sightseeing">Sightseeing</option>
<option value="kids">Kids</option>
<option value="informatie">Meer informatie</option>
</select>
<select id="disabledselect" class="dropdownwwjdnonactive" disabled>
<option value="sdgsdg">Verfijn je keuze</option>
</select>
<select id="uiteten" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="ontbijt">Ontbijt</option>
<option value="lunch">Lunch</option>
<option value="diner">Diner</option>
<option value="vis">Vis</option>
<option value="vlees">Vlees</option>
<option value="broodje">Broodje</option>
<option value="patatje">Patatje</option>
<option value="tapas">Tapas</option>
<option value="hamburger">Hamburger</option>
<option value="grieks">Grieks</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="traiteur">Traiteur</option>
</select>
<select id="snackensnoepen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="snelle snack">Snelle snack</option>
<option value="snoepen">Snoepen</option>
<option value="IJsje">IJsje</option>
<option value="kroketje">Kroketje</option>
<option value="brammetje">Brammetje</option>
</select>
<select id="drankje" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="iets fris">Iets fris</option>
<option value="thee">Thee</option>
<option value="koffie">Koffie</option>
<option value="biertje">Biertje</option>
<option value="wijntje">Wijntje</option>
<option value="whiskey">Whiskey</option>
<option value="cocktail">Cocktail</option>
<option value="slush">Slush</option>
</select>
<select id="evenement" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="in het stadscentrum">In het stadscentrum</option>
<option value="evenement">Evenement</option>
<option value="braderie">Braderie</option>
<option value="rondje dorp">Rondje dorp</option>
</select>
<select id="stappen" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="eten">Eten</option>
<option value="drinken">Drinken</option>
<option value="theater">Theater</option>
<option value="danser">Dansen</option>
<option value="muziek">Muziek</option>
</select>
<select id="cultuur" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="kunst">Kunst</option>
<option value="stadscentrum historie">Stadscentrum historie</option>
<option value="buitenlandse restaurants">Buitenlandse restaurants</option>
<option value="cultuur">Cultuur</option>
<option value="schilderen">Schilderen</option>
<option value="kunst uitleen">Kunst uitleen</option>
<option value="uitleen">Uitleen</option>
<option value="galerie">Galerie</option>
<option value="workshops">Workshops</option>
</select>
<select id="sightseeing" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="architectuur bekijken">Architectuur bekijken</option>
<option value="de boekenberg">De Boekenberg</option>
<option value="theater de stoep">Theater de Stoep</option>
<option value="voorstraat">Voorstraat</option>
<option value="museum winkel">Museum winkel</option>
</select>
<select id="kids" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="speelgoed">Speelgoed</option>
<option value="speeltuin">Speeltuin</option>
</select>
<select id="informatie" class="dropdownwwjdnonactive hide" name="tag">
<option disabled selected>Verfijn je keuze</option>
<option value="parkeren">Parkeren</option>
<option value="naar de wc">Naar de wc</option>
<option value="plattegrond bekijken">Plattegrond bekijken</option>
<option value="koopzondagen">Koopzondagen</option>
<option value="toezicht en beveiliging">Toezicht en beveiliging</option>
</select>
<br>
<input type="submit" class="wwjdbutton" name="button" value="Bekijk resultaten" disabled>
<!-- <button type="button" name="button">Bekijk resultaten</button> -->
</form>
<select> tags
Changes to OP
HTML & CSS
<form> will send data to a live test server when a submit event is fired.
A response from the live test server will be posted to an <iframe>.
With the exception of select#primary and the "dummy" <select> tag, all <select> tags have .secondary, .hide, and [name=secondary]. By default, they are also [disabled].
.hide is now useful -- CSS: .hide {display: none} -- using add/removeClass() instead of hide/show() methods.
The first <option> tag of every <select> has been changed:
<option value="" selected>...</option>
Now all that's needed to reset <select> tags is:
$('select').val('');
jQuery
There are two types of <select> tags that are registered to the change event: $('#primary') and $('.secondary').
When $('#primary') is triggered, all $('.secondary') are reset:
$('.secondary').addClass('hide').prop('disabled', true).val('');
The object placesLists was unnecessary. By using the value of $('#primary'), an #ID selector can be determined dynamically:
...
var category = $(this).val();
$('#' + category).removeClass('hide').prop('disabled', false).val('');
The callback function that triggers when a change event occurs on $('.secondary') is simple:
...
if ($(this).val() === '') {
$('.send').prop('disabled', true);
} else {
$('.send').prop('disabled', false);
}
This ensures that the input[type=submit] button is [disabled] when $('.secondary') hasn't been selected yet.
Demo
<!DOCTYPE html>
<html>
<head>
<style>
form,
iframe,
hr {
width: 96%
}
select {
display: inline-block;
}
#primary {
width: 45%
}
.send {
float: right;
}
.secondary {
width: 52%;
margin: 0 0 5px 5px
}
.hide {
display: none
}
hr {
clear: both;
}
</style>
</head>
<body>
<form id="list" action="https://httpbin.org/post" method="post" target='response'>
<select id="primary" name="primary">
<option value="" selected>Wat wil je gaan doen?</option>
<option value="shop">Shoppen</option>
<option value="dining">Uit eten</option>
<option value="food">Snacken / snoepen</option>
<option value="drink">Drankje doen</option>
<option value="events">Evenementen bezoeken</option>
<option value="booking">Stappen</option>
<option value="culture">Cultuur snuiven</option>
<option value="sites">Sightseeing</option>
<option value="kids">Kids</option>
<option value="info">Meer info</option>
</select>
<select class="secondary">
<option>Verfijn je keuze</option>
</select>
<select id="dining" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="ontbijt">Ontbijt</option>
<option value="lunch">Lunch</option>
<option value="diner">Diner</option>
<option value="vis">Vis</option>
<option value="vlees">Vlees</option>
<option value="broodje">Broodje</option>
<option value="patatje">Patatje</option>
<option value="tapas">Tapas</option>
<option value="hamburger">Hamburger</option>
<option value="grieks">Grieks</option>
<option value="pizza">Pizza</option>
<option value="pasta">Pasta</option>
<option value="traiteur">Traiteur</option>
</select>
<select id="food" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="snelle snack">Snelle snack</option>
<option value="snoepen">Snoepen</option>
<option value="IJsje">IJsje</option>
<option value="kroketje">Kroketje</option>
<option value="brammetje">Brammetje</option>
</select>
<select id="drink" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="iets fris">Iets fris</option>
<option value="thee">Thee</option>
<option value="koffie">Koffie</option>
<option value="biertje">Biertje</option>
<option value="wijntje">Wijntje</option>
<option value="whiskey">Whiskey</option>
<option value="cocktail">Cocktail</option>
<option value="slush">Slush</option>
</select>
<select id="events" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="in het stadscentrum">In het stadscentrum</option>
<option value="events">Evenement</option>
<option value="braderie">Braderie</option>
<option value="rondje dorp">Rondje dorp</option>
</select>
<select id="booking" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="eten">Eten</option>
<option value="drinken">Drinken</option>
<option value="theater">Theater</option>
<option value="danser">Dansen</option>
<option value="muziek">Muziek</option>
</select>
<select id="culture" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="kunst">Kunst</option>
<option value="stadscentrum historie">Stadscentrum historie</option>
<option value="buitenlandse restaurants">Buitenlandse restaurants</option>
<option value="culture">Cultuur</option>
<option value="schilderen">Schilderen</option>
<option value="kunst uitleen">Kunst uitleen</option>
<option value="uitleen">Uitleen</option>
<option value="galerie">Galerie</option>
<option value="workshops">Workshops</option>
</select>
<select id="sites" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="architectuur bekijken">Architectuur bekijken</option>
<option value="de boekenberg">De Boekenberg</option>
<option value="theater de stoep">Theater de Stoep</option>
<option value="voorstraat">Voorstraat</option>
<option value="museum winkel">Museum winkel</option>
</select>
<select id="kids" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="speelgoed">Speelgoed</option>
<option value="speeltuin">Speeltuin</option>
</select>
<select id="info" class="hide secondary" name="secondary" disabled>
<option value="" selected>Verfijn je keuze</option>
<option value="parkeren">Parkeren</option>
<option value="naar de wc">Naar de wc</option>
<option value="plattegrond bekijken">Plattegrond bekijken</option>
<option value="koopzondagen">Koopzondagen</option>
<option value="toezicht en beveiliging">Toezicht en beveiliging</option>
</select>
<br>
<input class='send' type="submit" value="Bekijk resultaten" disabled>
<br>
<hr>
<iframe name='response'></iframe>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#primary').on('change', function() {
$('.secondary').addClass('hide').prop('disabled', true).val('');
var category = $(this).val();
if (category === 'shop') {
$('.send').prop('disabled', false);
} else if (category === '') {
$('.send').prop('disabled', true);
} else {
$('#' + category).removeClass('hide').prop('disabled', false).val('');
$('.send').prop('disabled', true);
}
});
$('.secondary').on('change', function() {
if ($(this).val() === '') {
$('.send').prop('disabled', true);
} else {
$('.send').prop('disabled', false);
}
});
</script>
</body>
</html>
Related
When I try the below jQuery, I get an error:
Unexpected Type Error (: $selReqs[i].val is not a function)
I have tried multiple variations of the below and cannot seem to get it to check if selected option has no value for each of the select fields. Any advice appreciated!
var $selReqs = $('.allMinReqs');
var reqs = [];
for(var i=0; i < $selReqs.length; i++) {
if(!$selReqs[i].val()) {
reqs.push($selReqs[i]);
}
}
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin" onchange="showMcStart();">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
The issue in your code is because you're accessing a jQuery object by index. This returns the underlying DOM Element object which has no val() method.
To achieve your goal you could use map() to create an array of all the selected values. Then you can check the length of that array to determine if anything was selected, like this:
$('button').on('click', function() {
var values = $('.allMinReqs').map((i, e) => e.value !== '' ? e.value : null).get();
console.log(values);
var somethingSelected = values.length != 0;
console.log(somethingSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Check</button>
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
I am using a jquery datepicker. I made a script in which some time-ranges are being hidden when the day is a monday (day 1). On android and windows everything is working fine, but on Safari on IOS it is not working.
$('.extra-tijdstip').hide();
$('.ochtend-tijdstip').show();
$('#locatie').change(function(){
$('.extra-tijdstip').hide();
if ($(this).val() == 'Schiedam') {
$('.travel-date-group .today').datepicker()
.on('changeDate', function(){
var datum = $(this).datepicker('getDate');
var day = datum.getDay();
if (day == 4) {
$('.extra-tijdstip').show();
$('.ochtend-tijdstip').show();
}
else if (day == 1) {
$('.ochtend-tijdstip').hide();
}
else {
$('.extra-tijdstip').hide();
$('.ochtend-tijdstip').show();
}
});
}
});
My HTML code:
<!-- Velden voor een afspraak -->
<div class="col_full nnvo travel-date-group today">
<label for="locatie">Locatie <small>*</small></label>
<select id="locatie" name="locatie" class="sm-form-control" style="height: 40px;">
<option value="">-- Kies een locatie --</option>
<option value="Schiedam">Schiedam</option>
<option value="Vlaardingen">Vlaardingen</option>
<option value="Berkel en Rodenrijs">Berkel en Rodenrijs</option>
</select>
</div>
<div class="clear"></div>
<div class="col_half travel-date-group nnvo">
<label for="datum">Datum <small>*</small></label>
<input type="text" id="datum" name="datum" class="sm-form-control tleft disabled-week today" placeholder="DD-MM-JJJJ" autocomplete="off">
</div>
<div class="col_half col_last nnvo">
<label for="tijdstip">Tijdstip <small>*</small></label>
<select id="tijdstip" name="tijdstip" class="sm-form-control" style="height: 40px;">
<option value="">-- Kies een tijd --</option>
<option value="09:30" class="ochtend-tijdstip">09:30</option>
<option value="10:00" class="ochtend-tijdstip">10:00</option>
<option value="10:30" class="ochtend-tijdstip">10:30</option>
<option value="11:00" class="ochtend-tijdstip">11:00</option>
<option value="11:30" class="ochtend-tijdstip">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00" class="extra-tijdstip">18:00</option>
<option value="18:30" class="extra-tijdstip">18:30</option>
<option value="19:00" class="extra-tijdstip">19:00</option>
<option value="19:30" class="extra-tijdstip">19:30</option>
<option value="20:00" class="extra-tijdstip">20:00</option>
<option value="20:30" class="extra-tijdstip">20:30</option>
</select>
</div>
Does anyone know what is causing IOS to not work for this?
Thank you,
Mike
I was stuck in my feature for my web application, I have 4 menu filters for filtering data, fungsi_bangunan, jenis_bangunan is perfectly working, and desa/kelurahan is good to because I'm using javascript in json for populated that data when I select kecamatan and then select desa/kelurahan is working to, but when I use kecamatan filter data does not showing, the query builder I think is correctly but I cannot find the something wrong about this my problem, so maybe you guys can help me, what the solution, I use php and codeigniter framework for my project,
here the model code:
public function filter_data($filter) {
$this->db->like('jenis_kegiatan',$filter);
$this->db->or_like('fungsi_bangunan',$filter);
$this->db->or_like('kecamatan',$filter);
$this->db->or_like('desa_kel',$filter);
$query = $this->db->get('permo_pdrt');
return $query->result();
}
and controller :
public function filterkeyword() {
$filter = $this->input->post('filter');
$data['results'] = $this->model->filter_data($filter);
$this->load->view('result_view',$data);
}
and this view filter :
<div class="row">
<form action="<?php echo base_url();?>pdrtcrud/filterkeyword" method="post">
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_kecamatan" name="filter">
<option selected="selected" disabled="disabled" value="">Pilih Kecamatan</option>
<option value="Babakan Madang">Babakan Madang</option>
<option value="Bojonggede">Bojonggede</option>
<option value="Caringin">Caringin</option>
<option value="Cariu">Cariu</option>
<option value="Ciampea">Ciampea</option>
<option value="Ciawi">Ciawi</option>
<option value="Cibinong">Cibinong</option>
<option value="Cibungbulang">Cibungbulang</option>
<option value="Cigombong">Cigombong</option>
<option value="Cigudeg">Cigudeg</option>
<option value="Cijeruk">Cijeruk</option>
<option value="Cileungsi">Cileungsi</option>
<option value="Ciomas">Ciomas</option>
<option value="Cisarua">Cisarua</option>
<option value="Ciseeng">Ciseeng</option>
<option value="Citereup">Citereup</option>
<option value="Dramaga">Dramaga</option>
<option value="Gunung Putri">Gunung Putri</option>
<option value="Gunung Sindur">Gunung Sindur</option>
<option value="Jasinga">Jasinga</option>
<option value="Jonggol">Jonggol</option>
<option value="Kemang">Kemang</option>
<option value="Klapanunggal">Klapanunggal</option>
<option value="Leuwiliang">Leuwiliang</option>
<option value="Leuwisadeng">Leuwisadeng</option>
<option value="Megamendung">Megamendung</option>
<option value="Nanggung">Nanggung</option>
<option value="Pamijahan">Pamijahan</option>
<option value="Parung">Parung</option>
<option value="Parung Panjang">Parung Panjang</option>
<option value="Ranca Bungur">Ranca Bungur</option>
<option value="Rumpin">Rumpin</option>
<option value="Sukajaya">Sukajaya</option>
<option value="Sukamakmur">Sukamakmur</option>
<option value="Sukaraja">Sukaraja</option>
<option value="Tajur halang">Tajur halang</option>
<option value="Tamansari">Tamansari</option>
<option value="Tanjungsari">Tanjungsari</option>
<option value="Tenjo">Tenjo</option>
<option value="Tenjolaya">Tenjolaya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" id="pilih_desa_kel" name="filter">
<option>Pilih Desa/Kelurahan</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Jenis Kegiatan</option>
<option value="Rumah Tinggal">Rumah Tinggal</option>
<option value="Apartemen">Apartemen</option>
<option value="Hotel">Hotel</option>
<option value="Kantor Swasta">Kantor Swasta</option>
<option value="Kantor Pemerintah">Kantor Pemerintah</option>
<option value="Gedung Badan Usaha Pemerintah">Gedung Badan Usaha Pemerintah</option>
<option value="Rumah Kantor">Rumah Kantor</option>
<option value="Bank">Bank</option>
<option value="Toko">Toko</option>
<option value="Rumah Toko">Rumah Toko</option>
<option value="Rumah Makan">Rumah Makan</option>
<option value="Restoran">Restoran</option>
<option value="Warung">Warung</option>
<option value="Kios">Kios</option>
<option value="Pasar Tradisional">Pasar Tradisional</option>
<option value="Minimarket">Minimarket</option>
<option value="SuperMarket">SuperMarket</option>
<option value="Fasilitas Rekreasi">Fasilitas Rekreasi</option>
<option value="SPBU">SPBU</option>
<option value="SPBG">SPBG</option>
<option value="Bengkel">Bengkel</option>
<option value="Showroom">Showroom</option>
<option value="Pool Kendaraan">Pool Kendaraan</option>
<option value="Gedung Parkir">Gedung Parkir</option>
<option value="Gudang">Gudang</option>
<option value="Instalasi Pengolahan">Instalasi Pengolahan</option>
<option value="Instalasi Jaringan Listrik">Instalasi Jaringan Listrik</option>
<option value="Instalasi Telekomunikasi">Instalasi Telekomunikasi</option>
<option value="Instalasi Jaringan Gas">Instalasi Jaringan Gas</option>
<option value="Sarana Pendidikan">Sarana Pendidikan</option>
<option value="Sarana Ibadah">Sarana Ibadah</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Gedung Olahraga">Gedung Olahraga</option>
<option value="Rumah Sakit">Rumah Sakit</option>
<option value="Klinik">Klinik</option>
<option value="Balai Pengobatan Lainnya">Balai Pengobatan Lainnya</option>
</select>
</div>
<div class="col-sm-2">
<select class="form-control form-inline" name="filter">
<option selected="selected" disabled="disabled" value="">Fungsi Bangunan</option>
<option value="Hunian">Hunian</option>
<option value="Usaha">Usaha</option>
<option value="Keagmaan">Keagamaan</option>
<option value="Sosial Budaya">Sosial Budaya</option>
<option value="Campuran">Campuran</option>
</select>
</div>
<div class="col-md-1">
<input class="btn btn-success" type="submit" name="btnsubmit" value="filter">
</div>
</form>
I have this html select value that I used with AngularJS in building. Anytime I print the value selected from html in php, I keep getting a different thing. Eg. I selected Computer from the select group and the value="computer", when I echo in php, I get something like this:
? string: computer ?
I can't figure what the problem is.
HTML code below
<div class="form-group" form-group-sm>
<label>Faculty/School:</label>
<select name="faculty" class="form-control" ng-model="tfaculty">
<option value="Engineering">Faculty of Engineering</option>
<option value="Medicine">Faculty of Medicine</option>
<option value="Agriculture">Faculty of Agriculture</option>
<option value="Bioscience">Faculty of Bioscience</option>
<option value="Physical Science">Faculty of Physical Science</option>
<option value="Law">Faculty of Law</option>
<option value="Mgt Tech">Faculty of Management Sci./Tech.</option>
<option value="Soc. Science">Faculty of Social Science</option>
<option value="Health Sci.">Faculty of Health Sci. and Tech.</option>
<option value="Envt Tech">Faculty of Environmental Sci./Tech.</option>
<option value="Education">Faculty of Education</option>
<option value="Arts">Faculty of Arts</option>
</select>
</div>
<!--this section shows to choose department-->
<div class="form-group" form-group-sm>
<span ng-show="tfaculty == 'Engineering'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Elect Elect Eng">Electrical and Electronics</option>
<option value="Computer Eng">Computer Engineering</option>
<option value="Chemical Eng">Chemical Engineering</option>
<option value="Civil Eng">Civil Engineering</option>
<option value="Petroleum Eng">Petroleum Engineering</option>
<option value="Mechanical Eng">Mechanical Engineering</option>
<option value="Polymer Eng">Polymer and Textile</option>
<option value="Met Mat Eng">Material and Metallurgical</option>
<option value="Agric and Bio">Agric and BioResources</option>
<option value="Mechatronics Eng">Mechatronics Engineering</option>
</select>
</span>
<span ng-show="tfaculty == 'Medicine'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Surgery">Surgery</option>
<option value="Anaesthesiology">Anaesthesiology</option>
<option value="Chemical Pathology">Chemical Pathology</option>
<option value="Haematology">Haematology</option>
<option value="Histopathology">Histopathology</option>
<option value="Medicine">Medicine</option>
<option value="pthamology">Opthamology</option>
<option value="Paediatrics">Paediatrics</option>
<option value="Radiology">Radiology</option>
<option value="Medical Microbiology">Medical Microbiology</option>
<option value="Anatomy">Anatomy</option>
<option value="Physiology">Physiology</option>
</select>
</span>
<span ng-show="tfaculty == 'Agriculture'">
<label>Department:</label>
<select name="department" class="form-control" ng-model="tdepartment">
<option value="Agric Economics">Agric Economics and Extension</option>
<option value="Crop Science">Crop Science and Horticulture</option>
<option value="Animal Science">Animal Science</option>
<option value="Forestry">Forestry and Widelife</option>
<option value="Fisheries">Fisheries and Aquaculture</option>
<option value="Food Science">Food Science and Technology</option>
<option value="Soil Science">Soil Science and Land Resources</option>
</select>
</span>
Php code below:
if (isset($_POST['search'])) { //narrowing d search by department
$department = $_POST['department'];
echo $department;}
So I have 4 selects with same class (no ID), and I want when I choose an option to disable it in the other selects,
<select name="column_type[]" class="form-control column_type">
<option value="none">Ne pas Importer</option>
<option value="mobile">Mobile</option><option value="mail">Email
</option><option value="lname">Nom</option>
</select>
....
So plz if someone has any idea I will be very appreciative.
From what I have understood as your question,when you select a option in a select tags it disables all the other select tags:
JS:
function onOptionChange(elem){
var selects=document.getElementsByClassName("form-control column_type");
for(var i=0;i<n;i++)
if(selects[i]!=elem)
selects[i].options[elem.selectedIndex].disabled=true;
}
HTML:
<select name="column_type[]" class="form-control column_type" onChange="return onOptionChange(this)">
<option value="none">Ne pas Importer</option>
<option value="mobile">Mobile</option><option value="mail">Email</option>
<option value="lname">Nom</option>
</select>
If that's not what you want, I'll edit the answer
Try using jQuery prop() to disable:
$(function() {
var column_type = $('.column_type');
column_type.on('change', function() {
var cur = $(this);
$.each(column_type, function(_, dd) {
dd = $(dd);
if (cur != dd) {
dd.find('option').eq(cur.prop('selectedIndex')).prop('disabled', true);
}
})
}).eq(0).trigger('change');// fire event on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="column_type[]" class="form-control column_type">
<option value="none">Ne pas Importer</option>
<option value="mobile">Mobile</option>
<option value="mail">Email
</option>
<option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
<option value="none">Ne pas Importer</option>
<option value="mobile">Mobile</option>
<option value="mail">Email
</option>
<option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
<option value="none">Ne pas Importer</option>
<option value="mobile">Mobile</option>
<option value="mail">Email
</option>
<option value="lname">Nom</option>
</select>
<select name="column_type[]" class="form-control column_type">
<option value="none">Ne pas Importer</option>
<option value="mobile">Mobile</option>
<option value="mail">Email
</option>
<option value="lname">Nom</option>
</select>