JS a div is not showing after page refresh - javascript

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>

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?

Show Div with jquery depending on list (php)

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();
}
});

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

Jquery clear/reset form that i fill

ex I have 2 form input and 1 select form, when I select A 1 of the form hide and auto reset/clear.
basiclly i've done hide logic, but i can't reset it.
here's my code :
var employedTypeOption = $('#employedType-option');
employedTypeOption.on('change', function() {
if (employedTypeOption.val() == 1) {
$('#hourly-rate, #parttime-panel').show();
$('#basic-salary').hide();
} else if (employedTypeOption.val() == 0){
$('#basic-salary').show();
$('#hourly-rate, #parttime-panel').hide();
}
});
any idea ?
You can find all the text fields and textareas inside your form and reset their values. Like the following.
var employedTypeOption = $('#employedType-option');
employedTypeOption.on('change', function() {
if (employedTypeOption.val() == 1) {
$('#hourly-rate, #parttime-panel').show();
$('#basic-salary').hide();
$('#yourFormID').find('input[type="text"], textarea').val("");
} else if (employedTypeOption.val() == 0){
$('#basic-salary').show();
$('#hourly-rate, #parttime-panel').hide();
$('#yourFormID').find('input[type="text"], textarea').val("");
}
});

Enabling a button when 2 select tag has been selected

I am doing a verification button. I have a button that is initially in disabled state. And i have three elements as the button enabler. 1 is input tag, 1 is select tag and another 1 is select tag. When those 3 is filled and selected, the button should be enabled and back to disabled again when one or all of the elements is back to blank.
This is what ive done so far and it doesnt work. Please help me
$(window).load(function(){
$("#devicemask").on('keyup blur', function(){
$('#set-sr-property').prop('enabled', this.value.trim().length);
});
$('#flightselect').change(function() {
var op =$(this).val();
if(op ! = '') {
$('#set-sr-property').prop('disabled',false);
} else {
$('#set-sr-property').prop('disabled', true);
}
});
$('#crewselect').change(function() {
var op =$(this).val();
if(op ! = '') {
$('#set-sr-property').prop('disabled',false);
} else {
$('#set-sr-property').prop('disabled', true);
}
});
});
You need to check each value between each event. Basically will be look like this.
var input = $('#devicemask');
var select1 = $('#flightselect');
var select2 = $('#crewselect');
var button = $('#set-sr-property');
input.on('keyup blur', function(){
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
select1.change(function() {
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
select2.change(function() {
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
You sure can simplifize it. Sample fiddle https://jsfiddle.net/phv5yty8
Anyways, I tried to wrap it inside $.load() but doesn't work. I don't know why. So $.ready() may fit on this.

Categories

Resources