conditional change of quantity text box using jquery? - javascript

I have a problem, I have been working on some jquery to set the quantity text box to display 25 or more. It checks if the wording personalisation has an empty string, if it doesnt them apply the 25 quantity as its obviously a kit product and personalised.
The crucial part for kit products is:
if (parseInt($("#kitProduct #Quantity").val()) < 25) {
$("#kitProduct #Quantity").attr("value", "25");
It knows its a kit product because i have a div.id wrapped around the page called Kit Product.
My problem is that i need to override this kit product code for certain products. I thought the best way to do this as aquick fix would be to check for the contents of a div, eg:
<div class="ProductNameText">Exclusive Handmade Box</div>
If Exclusive Handmade Box is found then allow the user to enter a quantity of 1 or more into the text box.
I have tried the following code:
quantity = $('div.ProductNameText').text().match(/Exclusive Handmade Box/g).length;
if(quantity)
{
$("#kitProduct #Quantity").attr("value", quantity);
$("#kitProduct #Quantity").keypress(function(){
var quantity = parseInt($.trim($(this).val()));
if( quantity < 1) {
$(this).val('1');
} else {
$(this).val(quantity);
}
But this will only ever force 1. I am really lost now, ive explained as best as i can and below is a cut down example of the page within a jsfiddle.
Really hope you can help?
More infomation:
For the most part Kit products are defined in an xml package which is applyed to a kit product in the admin section. However i have a few products which are still products but dont require 25 to be put into the quantity.
At the moment the jquery checks for a text area box because if the user adds a personalisation into that it means they are wanting a kit product therefore min quantity is 25.
But i have a product i want to check based on its div contents that i want to have as 1 or more...
so i should be able to enter 1-25 into the box without my current code saying oppps you entered less than 24 so im going to change it back to the min kit product quantity..
if you try the jsfiddle you can see that it wont let you put in a value of say 3? thats the problem.
http://jsfiddle.net/FB5MQ/3/

You should just have a variable minimum in the "crucial part for kit products" code:
var minValue = 25;
if ($('div.ProductNameText').text().match(/Exclusive Handmade Box/)) {
minValue = 1;
}
if (parseInt($("#kitProduct #Quantity").val(), 10) < minValue) {
$("#kitProduct #Quantity").prop("value", minValue);
// rest of code...

Related

Adding Material-UI Select with generated number range

I am trying to create a select with material-ui that give a range of number from 0 - 20,000,000 in 25,000 increments. I was able to achieve this with a for loop
for (let price = 0; price <= 20000000; price = price + 25000) {
priceOptions.push({ id: price, title: `$${price.toLocaleString()}` });
}
I feel like this is not the best way to go about it as it takes a 2-3 seconds when you click on the dropdown for to display the options.
If anyone has an idea of how to speed this up it would be greatly appreciated.
As NearHuscarl mentioned in the comments:
You can integrate Select component with some virtualized library
like react-virtualized. Personally, I'd use the Autocomplete
component and tell the user to filter it out.

How to make a dynamic form from db w/o framework?

I'm on a project using php for the back-end part, and without any framework.
I have a database, my main table, the car table, is linked to other tables (color, weight, max speed, price).
I have a form that allows me to give back to my user his "perfect" car according to all these criteria.
I would like that, when the user selects his car color, let's say blue, in the weight field below, with the options ["car < 2t"; "2t < car < 2.5t"; "car > 2.5t"], if none of the blue cars in my database weighs more than 2.5t, this choice is not displayed.
I'm not sure how to do this without a framework... Does anyone have any clues to give me?
You can do this via SQL directly:
SELECT
weight.id,
weight.value
FROM
weight
JOIN color
ON color.car_id = weight.car_id
AND color.name = "blue" # <-- Join only blue cars
WHERE
weight.value > 2500 # <-- only show above 2500
Working example.
This should help you to get to your desired solution. If you need further help please create a fiddle containing your db-structure and some example content.

How I can make a checkbox filter?

I need to find a solution for my script, because I gives me duplicated results.
There is something that I made:
https://jsfiddle.net/4m3twsjd/1/
function myFunction() {
if(a % 2 == 0){
document.getElementById('h1').innerHTML += M
}
else {
document.getElementById('h1').innerHTML = document.getElementById('h1').innerHTML.replace(M, '')
}
a++
}
How to make it to not show the same element when clicked two or three checkboxes ?
Thanks you in advance all for this. I need some simply code, because I'm not a coder.
I need to have something that there are 4 brand and 5 power ranges. And If I click on checkbox with 1 brand it shows me all devices that belong to this brand. Also If I checked 1 power range it shows me all devices with that power range. And I works like this right now.
The problem is that if I checked 1 brand and 1 power range it shows me all deviced that belong to this brand and all devices with that power - so the devices are sometimes duplicated. How to fix it?
Also how can I make it posible to show each device with name, photo, description and link (when some checkbox checked)?

Showing different combinations of form fields based on dropdown selection

I'm creating a web form to allow societies to inquire about packages offered at a golf club. There are 7 different packages offered, each with a different combination of activities.
I want to set the form up so that when a package is selected from a drop down menu, the appropriate combination of fields are shown, as seen below. When the user has selected a package they then fill out the number of people attending each activity, a preferred time for each and their menu choices for each. This is the only part of the form that changes, details such as name, society name, email, further comments, etc. will always be shown.
I have attempted to put each field (i.e. morning coffee, lunch, etc.) into it's own table with an id tag eg. <table id="summerSaver">. These tables contained the appropriate input boxes (time, number of people, menu choice, etc.) I then gave a css rule to make sure they were all hidden to start with eg. #summerSaver{display:none;}. I then used javascript to change the css rule depending on what should be shown:
<script type='text/javascript'>
window.onload=function(){
var select = document.getElementById("pack");
select.onchange=function(){
//Summer Saver
if(select.value=="summerSaver"){
document.getElementById("morningcoffee").style.display="inline";
document.getElementById("bacon").style.display="inline";
document.getElementById("diet").style.display="inline";
}else{
document.getElementById("morningcoffee").style.display="none";
document.getElementById("bacon").style.display="none";
document.getElementById("diet").style.display="none";
}
//The Full Round
if(select.value=="fullRound"){
document.getElementById("morningcoffee").style.display="inline";
document.getElementById("lunch").style.display="inline";
document.getElementById("dinner").style.display="inline";
document.getElementById("dessert").style.display="inline";
document.getElementById("diet").style.display="inline";
}else{
document.getElementById("morningcoffee").style.display="none";
document.getElementById("lunch").style.display="none";
document.getElementById("dinner").style.display="none";
document.getElementById("dessert").style.display="none";
document.getElementById("diet").style.display="none";
}
//The Early Starter
if(select.value=="earlyStarter"){
document.getElementById("morningcoffee").style.display="inline";
document.getElementById("lunch").style.display="inline";
document.getElementById("breakfast").style.display="inline";
document.getElementById("diet").style.display="inline";
}else{
document.getElementById("morningcoffee").style.display="none";
document.getElementById("lunch").style.display="none";
document.getElementById("breakfast").style.display="none";
document.getElementById("diet").style.display="none";
}
//The Light Lunch
if(select.value=="lightLunch"){
document.getElementById("morningcoffee").style.display="inline";
document.getElementById("lunch").style.display="inline";
document.getElementById("diet").style.display="inline";
}else{
document.getElementById("morningcoffee").style.display="none";
document.getElementById("lunch").style.display="none";
document.getElementById("diet").style.display="none";
}
//The Eighteen Holer
if(select.value=="eighteenHoler"){
document.getElementById("dinner").style.display="inline";
document.getElementById("dessert").style.display="inline";
document.getElementById("diet").style.display="inline";
}else{
document.getElementById("dinner").style.display="none";
document.getElementById("dessert").style.display="none";
document.getElementById("diet").style.display="none";
}
//The Good Value Day
if(select.value=="valueDay"){
document.getElementById("dinner").style.display="inline";
document.getElementById("diet").style.display="inline";
}else{
document.getElementById("dinner").style.display="none";
document.getElementById("diet").style.display="none";
}
//The Easy Round
if(select.value=="easyRound"){
document.getElementById("morningcoffee").style.display="inline";
}else{
document.getElementById("morningcoffee").style.display="none";
}
}
}
</script>
The problem I am having is that the correct tables aren't being shown. For example, Summer Saver shows only Bacon Sandwiches and The Full Round shows nothing at all. Upon further inspection the page only shows one table for each package, or none at all.
I'm a bit of a newbie when it comes to Javascript and JQuery so any assistance would be much appreciated.
I haven't looked too close at your code but this could be easily accomplished with jQuery:
http://jsfiddle.net/TSDb6/1/
This is the JS I used:
$(function(){
var $table = $('#table');
$('#package').on('change', function(){
$table.find('tr').show().filter('.filter:not(.package_'+this.value+')').hide()
}).trigger('change');
});
All rows have classes that define when they should be shown. This reduces the necessary js and makes it easier to change or add new packages.
Whenever the dropdown value changes it shows all table rows and hides the ones that should be filtered according to packages (.filtered) that don't have the corresponding package_x class.

jquery manipulation post page load

I'm currently using a script on an ecommerce website that shows or hide a free shipping stamp based on a number(price). Initially the stamp shows for all products and i hide it where necessary. My problem is, the script reads from the 'regular price' and will display the stamp accordingly, but i have products with promotions that hides the regular price and displays the promo price then bringing the actual price of the product under the appropriate limit and i can't figure out a way to hide the free shipping stamp on those particular items.
I'm using the following to remove the tag if the price goes under 99, but with my hackish promotion price display, i cant figure out how to read that post load promo price display to apply the function as needed. I've tried replicating this script and applying it to the promo price div to no avail. Any suggestions as to how i can read a divs numerical contents post load and hide the stamp? I'm beginner to intermediate when it comes to jquery so help in layman's terms would be helpful.
$('#results-table .redprice, #pp-wrap #big-price span').each(function(){
var $this = jQuery(this);
var number=$this.html();
number=number.substring(1);
number=parseFloat(number);
if(number > 50){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over50');}
if(number > 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('over99');}
if(number < 99){$this.parents('div.grid3wrapper, div.list3wrapper, #pp-wrap').addClass('under99').removeClass('freeshipping');}
});
Thank you.
A good idea would be to use html attribute for the real price.
something like
<span realP=12>16</span>
and then getting the number would be easier:
var number = $(this).attr("realP");
goog luck

Categories