I have the following code.
$("#duration").on("click", function() {
$('#duration .select-selected').addClass('select-arrow-active');
$('#duration .select-items').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4 custom-select" id="duration">
<p class="label-title">How much time do you have?</p>
<label for="duration">
<select name="duration" class="passes-buscador-select">
<option value="">NOT SURE </option>
<option value="less-than-1-week"> Less than 1 week </option>
<option value="1-week-to-2-weeks"> 1 week to 2 weeks </option>
<option value="more-than-2-weeks"> More than 2 weeks </option>
<option value="daytrips"> Day trips </option>
</select>
</label>
<div class="select-selected">NOT SURE </div>
<div class="select-items select-hide">
<div> Less than 1 week </div>
<div> 1 week to 2 weeks </div>
<div> More than 2 weeks </div>
<div> Day trips </div>
</div>
</div>
When the user clicks the element the class is not added, after checking it with the inspector I noticed the element blinks which means is being targeted properly more so when I execute.
$('#duration .select-selected').addClass('select-arrow-active');
On the console the class gets added, so I have no idea what could be happening. Am I missing something?
Edit:
I created a snipet with a CSS class editing the element's color, showing that the class is being added. Look:
$("#duration").on("click", function() {
$('#duration .select-selected').addClass('select-arrow-active');
$('#duration .select-items').toggle();
});
#duration .select-selected {
color: blue;
}
#duration .select-selected.select-arrow-active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-md-4 custom-select" id="duration">
<p class="label-title">How much time do you have?</p>
<label for="duration">
<select name="duration" class="passes-buscador-select">
<option value="">NOT SURE </option>
<option value="less-than-1-week"> Less than 1 week </option>
<option value="1-week-to-2-weeks"> 1 week to 2 weeks </option>
<option value="more-than-2-weeks"> More than 2 weeks </option>
<option value="daytrips"> Day trips </option>
</select>
</label>
<div class="select-selected">NOT SURE </div>
<div class="select-items select-hide">
<div> Less than 1 week </div>
<div> 1 week to 2 weeks </div>
<div> More than 2 weeks </div>
<div> Day trips </div>
</div>
</div>
Related
Value showing in span but I need to get value in the input field.
There will also be Product 3, 4, and so on.
The input field name, price, id, class is being populated dynamically from a database so they are the same for different Items.
If one product exists then it's fine however with multiple products and their options the price for the first ID only changes. As an example, if I change the select from Product 2 then the price of Product 1 changes only. How can I get it to stick to its own Product and change the price for that one only?
$(".readers").change(function() {
var productParent = $(this).parent().parent();
var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
productParent.find(".readers option:selected").each(function() {
newPrice += +$(this).attr('data-price')
});
productParent.find(".price").html("£" + newPrice.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><span data-name="product_name">Addon Product</span></p>
<p data-name="product_desc"> Addon product descriptions</p>
<hr class="line">
<div>
<div class="form-group">
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
</div>
<span class="price pull-left" itemprop="price" id="price" data-price="5.99">£5.99</span>
<hr/>
</div>
<div>
<p><span data-name="product_name">2nd Product</span></p>
<p data-name="product_desc">2nd Addon product description</p>
<hr class="line">
<div>
<div class="form-group">
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
</div>
<span class="price pull-left" itemprop="price" id="price" data-price="5.99">£5.99</span>
<hr/>
</div>
</div>
i'm using image-picker.js
How to make the image as default?
<!-- / select number of pet-->
<div class="select-pets text-center">
<p>Select Your Pet</p>
<div>
<select multiple="multiple" class="image-picker show-labels show-html">
<option data-img-src="assets/img/pets/cat1.png" data-img-class="first" data-img-alt="Ricky" value="1" class="stretched-link "> Ricky </option>
</select>
</div>
</div>
<!--/ select number of pet -->
https://rvera.github.io/image-picker/
before tick
after tick
I am making a calculator for our company but we are running into a problem.
We are dealing with certain widths. I have that under control.
For example, a width of 100 must be rounded to 98.4 by a certain formula, that has all been achieved!
Now that 98.4 must be used after choosing an option.
For example, that 98.4 must be divided by 12.3 when option
<option id = "222"> 20 cm, hooks overlap 2 </option>
is chosen. And so on with all options.
This is what we have got, please help.
If you need to see for real;
http://calculator.verfuurden.com/
<button class="open-button" onclick="openForm()">Strokencalculator</button>
<div class="form-popup" id="myForm">
<div class="calc-container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-sm-12 col-md-12">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<strong class="logo">
<img src="/img/logo_enkel_lisoflex_logo.jpg" width="270" height="auto">
</strong>
<div class="form-group">
<label for="breedte" class="text-info">Width in cm</label><br>
<input type="text" name="breedte" id="firstNumber" class="form-control">
</div>
<div class="form-group">
<label for="breedte" class="text-info">the exacte width will be;</label><br>
<label class="form-control" id="result"></label>
</div>
<div class="form-group">
<label for="strookmaat" class="text-info">Required strip size and overlap:</label><br>
<select class="form-control select2">
<option id="102">10cm, hooks overlap 0</option>
<option id="212">20cm, hooks overlap 1</option>
<option id="222">20cm, hooks overlap 2</option>
<hr>
<option id="313">30cm, hooks overlap 1</option>
<option id="333">30cm, hooks overlap 3</option>
<hr>
<option id="414">40cm, hooks overlap 1</option>
<option id="424">40cm, hooks overlap 2</option>
<option id="434">40cm, hooks overlap 3</option>
<option id="444">40cm, hooks overlap 4</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" onClick="divideBy()" Value="Calculate" /><br><br>
<label for="aantal" class="text-info">Needed number of strips;</label> <strong><span id="result2"></span></strong>
</div>
</form>
<button type="button" class="btn cancel" onclick="closeForm()">Close calculator</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function divideBy() {
var num1 = document.getElementById("firstNumber").value;
document.getElementById("result").innerHTML = Math.round(Math.floor(num1 / 4.1) * 4.1 * 10) / 10;
}
</script>
I need your help please.
I'm creating that component that regroups multiple selects and inputs from which I get the values to concatenate them in a string in a preview zone. This string is updated each time a change occurs in those inputs/selects.
It worked fine when I was working on one element, experimenting, styling it and stuff. Now I have to replicate it into possibly an infinite amount, so the script must work accordingly. The problem is that I'm useless when it comes to targeted selectorsn "this", "closest" and stuff. And I'm sure my logic is flawed when it comes to getting the values as you will see in the code I written.
I will share the JSFiddle, it will be easier to understand I think. If not, I will edit this post and share it directly.
Maybe I should declare a variable containing the targeting like [ var route = $(this).parent().closest() ] and use it all the other variables too ?
https://jsfiddle.net/HiD3f/8Lnowqvp/65/
<div class="container" id="settings-fr">
<div class="group">
<select class="day">
<option value="1">Monday</option>
<option value="2">Mon</option>
<option value="3"> </option>
</select>
</div>
<div class="group small-group">
<input type="text" class="separator1">
</div>
<div class="group">
<select class="date">
<option value="1">October 29</option>
<option value="2">Oct 29</option>
<option value="3">10 29</option>
<option value="1">29 October</option>
<option value="2">29 Oct</option>
<option value="3">29 10</option>
</select>
</div>
<div class="group small-group">
<input type="text" class="separator2">
</div>
<div class="group">
<select class="year">
<option value="1">2018</option>
<option value="2">18</option>
<option value="3"> </option>
</select>
</div>
<div class="preview"> preview </div>
</div>
<div class="container" id="settings-us">
<div class="group">
<select class="day">
<option value="1">Monday</option>
<option value="2">Mon</option>
<option value="3"> </option>
</select>
</div>
<div class="group small-group">
<input type="text" class="separator1">
</div>
<div class="group">
<select class="date">
<option value="1">October 29</option>
<option value="2">Oct 29</option>
<option value="3">10 29</option>
<option value="1">29 October</option>
<option value="2">29 Oct</option>
<option value="3">29 10</option>
</select>
</div>
<div class="group small-group">
<input type="text" class="separator2">
</div>
<div class="group">
<select class="year">
<option value="1">2018</option>
<option value="2">18</option>
<option value="3"> </option>
</select>
</div>
<div class="preview"> preview </div>
</div>
and the script :
$('select, input').change(function() {
let day = $(".day option:selected").text();
let sep1 = $(".separator1").val();
let date = $(".date option:selected").text();
let sep2 = $(".separator2").val();
let year = $(".year option:selected").text();
let preview = day + sep1 + date + sep2 + year;
let parent = $(".container");
$(this).parent('.group').closest(".preview").empty().append(preview);
});
Please help me, I'm stuck. Thank you.
Change your logic to find children based off of the section they are in.
$('select, input').change(function() {
//find the container the changed element belongs to
let $container = $(this).closest('.container');
let day = $container.find('.day option:selected').text();
let sept = $container.find('.separator1').val();
//...
});
Change your line
$(this).parent('.group').closest(".preview").empty().append(preview);
to
$(this).parents()
.filter(function() {
return (this.getAttribute('class') === 'container');
}).find('.preview').text(preview);
My Form:
<form name="test" action="" method="post">
Day And Time Available:<br/>
<input type="checkbox" name="day[]" id="day1" value="monday" onclick="show();"/>Monday<br/>
<input type="checkbox" name="day[]" id="day2" value="Tuesday" onclick="show();"/>Tuesday<br/>
<input type="checkbox" name="day[]" id="day3" value="Wednesday" onclick="show();"/>Wednesday<br/>
<input type="checkbox" name="day[]" id="day4" value="Thursday" onclick="show();"/>Thursday<br/>
</form>
<p style="visibility:hidden" id="timing">Here I am maintain the form</p>
<input type="submit" name="submit" onclick="return valid();"/>
</form>
If user have have selected Monday, tuesday I want output like this:
Monday
From Time
<select name="Fromtime" id="Fromtime">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
To Time
<select name="Totime" id="Totime">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
Tuesday:
From Time
<select name="Fromtime" id="Fromtime">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
To Time
<select name="Totime" id="Totime">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
How do I solve this in jQuery. Based on user Selection I want to show the day and timing form.
Likewise if the user selects Monday, Tuesday and Wednesday how do I show the day and timing form
My JavaScript:
<script type="text/javascript">
function show()
{
var flag = 0;
for (var i = 1; i< 7; i++)
{
if(document.getElementById("day"+i).checked)
{
document.getElementById('Fromtime').style.visibility='visible';
document.getElementById('Totime').style.visibility='visible';
}
}
return true;
}
</script>
As #Jai mentions, there are a couple of issues with your HTML. First, you cannot have multiple elements with the same ID, e.g: your 'Fromtime' and 'Totime' select boxes.
All the data you wish to submit needs to be wrapped in <form> tags. It looks like you've got one too many closing tags here which will cause problems.
That being said, you can achieve the show/hide effect with something like the following (I've stayed away from jQuery for something this simple):
function show(element) {
var day = element.value; // gets the value of checkbox, e.g: 'monday'
var timeElement = document.querySelector('.times-' + day); // finds correct times- element for day
if (element.checked) {
timeElement.style.display = 'block';
} else {
timeElement.style.display = 'none';
}
}
.hidden {
display: none;
}
input[type=submit] {
margin-top: 10px;
}
<form name="test" action="" method="post">
<fieldset>
<legend>Day And Time Available:</legend>
<input type="checkbox" class="day" value="monday" onclick="show(this);"/>Monday<br/>
<input type="checkbox" class="day" value="tuesday" onclick="show(this);"/>Tuesday<br/>
</fieldset>
<div class="times-monday hidden">
<p>Monday</p>
<label for="FromtimeMonday">From Time</label>
<select name="FromtimeMonday" id="FromtimeMonday">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
<label for="TotimeMonday">To Time</label>
<select name="TotimeMonday" id="TotimeMonday">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
</div>
<div class="times-tuesday hidden">
<p>Tuesday</p>
<label for="FromtimeTueday">From Time</label>
<select name="FromtimeTueday" id="FromtimeTueday">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
<label for="TotimeTueday">To Time</label>
<select name="TotimeTueday" id="TotimeTueday">
<option value="6Am">6Am</option>
<option value="7Am">7Am</option>
<option value="8Am">8Am</option>
</select>
</div>
<input type="submit" name="submit" text="submit" />
</form>