Show Div with jquery depending on list (php) - javascript

I have read how to show/hide a div with jquery when there is a dropdown selection, built with "select" and options.
However, I am trying to figure out how to do this when I have the following code for a dropdown selection.
<?php echo $this->lists['catid']; ?>
This list displays a dropdown of options and I want for a specific option to show/hide a div.
The following code could work for a select with a specific id,"purpose", for example, but in my situation how I am supposed to use it?
$('#catid').on('change', function() {
if ( this.value == '37');
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
})
This is the html of the output of the php code
Thank you

Try code should work for you
$(document).ready(function(event) {
$('#catid').on('change', function() {
let selected = $('#catid').val();
if (selected == 37) {
$("#business").show();
} else {
$("#business").hide();
}
});
});
#business {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select id="catid">
<option value="38">option 38(hide)</option>
<option value="37">option 37(show)</option>
<option value="39">option 39(hide)</option>
</select>
<div id="business">
Division Visible!
</div>

You can loop through each option and check the value. If the value is 37, then show that option (or any other div that you want to show):
$('#catid').on('change', function() {
$('#catid option').each(function() {
if ($(this).val() === '37') {
$(this).show()
} else {
$(this).hide()
}
})
})
NOTE: You can replace $(this) with the element/div that you want to show/hide if you want to show/hide something else.
Working JSFiddle here.

$('#purpose').on('change', function() {
if (this.value == '37')
{
$("#business").css('display','');
}
else
{
$("#business").css('display','none');
}
});
You also use this ans
$('#purpose').on('change', function() {
if (this.value == '37')
{
$("#business").show();
}
else
{
$("#business").hide();
}
});

Related

dropdown showing out of order

I added a class that hides the 2nd and 3rd dropdown unless there's a click or change in the 1st selection.
Actual Behavior
Upon selecting "regular" from the dropdown doesnt execute $(".dropdown").removeClass("no-display");
It only does when I select the 2nd option "project based". When I click project based the 2nd dropdown to show is the mother hub which is supposed to be rider category first. What can i fix and add to my script in order for my 2nd dropdown to remove $(".dropdown").removeClass("no-display"); with the regular option?
Script
$('#rider_type').on('change', function(){
if (this.value == 'PROJECT_BASED') {
$('#rider_category').attr("disabled", "disabled");
$('#hub')[0].selectedIndex = 0;
hub.map(function() {
if(this.text == 'ONDEMAND'){
this.setAttribute("hidden", "hidden");
}
});
$('#hub-selection').css('display', 'block');
}
else {
$('#hub-selection').css('display', 'block');
$('#rider_category').removeAttr("disabled");
$('#hub')[0].selectedIndex = 0;
hub.map(function(item,index) {
if(this.text == 'ONDEMAND'){
this.removeAttribute("hidden");
}
});
}
$('#rider_category')[0].selectedIndex = 0;
category.map(function() {
if(this.text == 'ONDEMAND'){
this.setAttribute('hidden', 'hidden');
}
});
});
$('#hub').on('change', function(){
$(".dropdown").removeClass("no-display");
if (this.options[this.selectedIndex].text == 'ONDEMAND') {
$('#rider_category').attr("disabled", "disabled");
$('#rider_category').val("ONDEMAND");
category.map(function(index) {
if(this.text == 'ONDEMAND'){
this.removeAttribute("hidden");
$('#rider_category')[0].selectedIndex = index;
}
});
riderType.map(function() {
if(this.text == 'PROJECT_BASED'){
this.setAttribute('hidden', 'hidden');
}
});
} else {
riderType.map(function() {
if(this.text == 'PROJECT_BASED'){
this.removeAttribute('hidden');
}
});
const rider_type = $("#rider_type").children("option:selected").val();
// disable category dropdown and make 'SCHEDULED' category option default
// $('#rider_category').attr("style", "pointer-events: none;");
if (rider_type !== 'PROJECT_BASED') {
$('#rider_category').attr("disabled", false);
} else {
}
var categoryDropdown = document.getElementById("rider_category");
var option = document.createElement("option");
option.text = "SCHEDULED";
option.value = "SCHEDULED";
if ($("#rider_category option:contains('SCHEDULED')").length < 0) {
categoryDropdown.add(option, categoryDropdown[1]);
}
$('#rider_category').val("SCHEDULED");
}
});
$('#rider_category').on('change', function(){
if (this.options[this.selectedIndex].text == 'ONDEMAND') {
hub.map(function(index) {
if(this.text == 'ONDEMAND'){
$('#hub')[0].selectedIndex = index;
}
});
}
if (this.options[this.selectedIndex].text === 'SAME DAY PICKUP') {
$('#hub-selection').css('display', 'none');
$('#rider_type')[0].selectedIndex = 1;
} else {
$('#hub-selection').css('display', 'block');
}
$(".dropdown").removeClass("no-display");
});
Actual Dropdown
I think problem is with your this. Its hard to help you without any html js and css example. But it looks like you should use jQuery selector like $(this) and call value with val() functio: $(this).val(). Same for others but inside .map() you define this.text. What should it do? Or whitch value should it call? It is from $('#rider_type').on('change', function(){}? Then use $(this).text(). If from map. then use for example:
hub.map(function(val, index) {
if(val.text == 'ONDEMAND'){
this.setAttribute("hidden", "hidden");
}
});
What is hub? Array? Object?
Could you precise your question? With better example code? In JsFiddle?

How to make a function with multi-condition if-function work?

I have a form which consists of some elements such as a select-input and a checkbox.
The submit-button is disabled and I want to enable the button only if two conditions are fulfilled. An initial version works well, but only if clicking on the checkbox is the last step. But it should be a function that reacts on both, clicks/changes in the select and the checkbox.
The following code is working but with the problem explained above.
$('#toscheck').click(function() {
if ($(this).is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
The following solution doesn't work:
$('document').ready(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
But how can I solve this? What I have found on SO wasn't really helpful.
Again: it should work as following; if the checkbox is selected AND the selected option has a value, the button would be enabled.
Thanks in advance.
First, store you element in variables:
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
Then, create your validation function with the stored variables. Note that I replace attr and removeAttr with .prop, it is better:
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
Then, bind the events:
$toscheck.add($ctry).on( 'change', checkThings );
Note that I used change on both elements since it does work with inputs and checkboxes.
Final code :
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
$toscheck.add($ctry).on( 'change', checkThings );
$(document).ready(function() {
$('#toscheck,#ctry').change(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
});
use this code
.change function detects change and then on call check whether your AND condition is met or not
and add #toscheck in quotes i.e. '#toscheck'
$('#toscheck,#xyz,#abc').change()
for detecting change for multiple elements

JS a div is not showing after page refresh

In registration form I have a 2 radio button, when one button is selected a dropdown list appears. But after register fails, the selected radio button remains but the dropdown list is not shown anymore, I want the dropdown list to be shown after register fail. There should be a solution with local storage but I dont know exactly how to write it.
here is the code, what I should add to make it happen?
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
});
});
So I found the solution finally, I tried and made it :
<script>
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
localStorage.removeItem("last");
});
});
function fix(){
var check = localStorage.getItem("last");
console.log(check);
if (check === 'a') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
else{
$('#cityClient').show();
$('#cityLawyer').hide();
}
}
function save(){
// rdAttorney is a id of the selected radio
if (document.getElementById('rdAttorney').checked) {
localStorage.setItem('last', 'a');
}
else{
localStorage.setItem('last', 'b');
}
}
window.onload = fix();
</script>

Hide and show particular form items on checked and unchecked selectbox?

I am using the below given code to hide and show particular form items, but this doesn't work kindly let me know what I am missing in my code?
HTML:
<input id="id_code_col" type="checkbox" name="code_col"></input>
SCRIPT:
$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if ($(this).val() == '1') {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
});
N.B: I can not add or remove anything from html. What ever I have to do is to do it with script. Kindly help!
do like this:
if(this.checked)
{
// checked
}
else
{
// unchecked
}
for your case:
$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if (this.checked) {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
});
selectBox.change(function () {
if ($(this).is(':checked')) {
$('#id_FullColumn').show();
$('#id_FirstColumn').hide();
$('#id_SecondColumn').hide();
}
else {
$('#id_FullColumn').hide();
$('#id_FirstColumn').show();
$('#id_SecondColumn').show();
}
});
You can use .is() along with :checked selector to check whether your checkbox is checked or not, so try to use:
if ($(this).is(':checked')) {
or pure javascript using:
if(this.checked)
instead of:
if ($(this).val() == '1') {
Change this
if ($(this).val() == '1') {
to this
if (this.checked) {
Because you don't have to check for the value to 1, as your checkbox doesn't have any value set to 1.
So you have to check for the state of that checkbox with checked method.
$(document).ready(function () {
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
if (this.checked) {
alert("checked");
}
else {
alert("unchecked");
}
});
});
$(function(){
$('#id_code_col').change(function(){
if($(this.checked)){
alert('checked');
}else{
alert('unchecked');
}
});
});

How can I change the class of an element with jQuery>

I have a JavaScript function that looks like this:
function UpdateFilterView() {
if (_extraFilterExists) {
if ($('#F_ShowF').val() == 1) {
$('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
$('#extraFilterDropDownButton').css("display", "block");
if ($('#divCategoryFilter').css("display") == 'none') {
$('#divCategoryFilter').show('slow');
}
return;
} else {
if ($('#divCategoryFilter').css("display") == 'block') {
$('#divCategoryFilter').hide('slow');
}
$('#extraFilterDropDownButton').css("display", "block");
$('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
return;
}
} else {
if ($('#divCategoryFilter').css("display") != 'none') {
$('#divCategoryFilter').hide('fast');
}
$('#extraFilterDropDownButton').css("display", "none");
}
}
This will be triggered by the following code (from within the $(document).ready(function () {}):
$('#extraFilterDropDownButton').click(function() {
if ($('#F_ShowF').val() == 1) {
$('#F_ShowF').val(0);
} else {
$('#F_ShowF').val(1);
}
UpdateFilterView();
});
The HTML for this is easy:
<div id="divCategoryFilter">...</div>
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>
I have two problems with this:
When the panel is hidden and we press the div button (extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.
When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?
The correct class will be set on the button when hovering it, this is set with the following code:
$("#extraFilterDropDownButton").hover(function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up_hover');
} else {
$(this).attr('class', 'showhideExtra_down_hover');
}
},
function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up');
} else {
$(this).attr('class', 'showhideExtra_down');
}
});
To set a class completely, instead of adding one or removing one, use this:
$(this).attr("class","newclass");
Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.
Use jQuery's
$(this).addClass('showhideExtra_up_hover');
and
$(this).addClass('showhideExtra_down_hover');
<script>
$(document).ready(function(){
$('button').attr('class','btn btn-primary');
}); </script>
I like to write a small plugin to make things cleaner:
$.fn.setClass = function(classes) {
this.attr('class', classes);
return this;
};
That way you can simply do
$('button').setClass('btn btn-primary');

Categories

Resources