We Keep Coding

Drop-down quantity menu in a shopping cart

UPDATE: In case anyone is reading this please ignore the fragment when I talk about the "dynamic max quantity" as it doesn't make any sense. I am actually not adding new quantity but updating it with a new number chosen from the drop-down menu, so instead of $i <= $dynamic_max it should be $i = 50, therefore this code: $static_max = 50;
$dynamic_max = $static_max - $value['item_quantity']; is obsolete. It is not directly relevant to the problem I had and solution given but it makes the code clearer.
END OF THE UPDATE
On the page where a product is listed you chose the quantity using a drop-down menu.
You click "Add to basket" and the product is sent to the next page (basket.php) where you are again given an option to change the quantity using a drop-down menu.
My problem is that when you click the drop-down menu you see the currently chosen amount at the very top of the list of numbers and then the range of numbers by which you can update the quantity.
The range of numbers by which you update the quantity is dynamic, meaning that it depends on the quantity chosen at the first step. The overall available quantity is 50, so when you chose 40, on the next page (basket.php) you will see the range between 0 and 10 only (where 0 is used as "remove") with the currently chosen number on top of the list.
I do not want the currently chosen quantity of product be shown on top of the drop-down menu, I just want the range of available numbers by which you update the quantity.
Can I do it in PHP or do I need to manipulate the DOM with JavaScript?
I'm posting here my code without other parts of the table in which added products are displayed (name of the product, the total etc.), it's only <select> tags.
What I have for now is two blocks of <option> tags, one is for the currently chosen quantity and the other is rendered with a for loop to display the range of possible numbers by which you amend the quantity.
I have been trying to use only one block of <option> tags and an ' if ' statement but have run several times into infinite loops, so for now the below is the only "working" version.
<select>
<?php
// Quantity added to the basket:
if (isset($value['item_quantity'])) {
?>
<option value="<?php echo $value['item_quantity']; ?>"><?php echo $value['item_quantity']; ?></option>
<?php
}
?>
<?php
// Quantity option minus what has been already added to the basket:
$static_max = 50;
$dynamic_max = $static_max - $value['item_quantity'];
for ($i = 0; $i <= $dynamic_max; $i++) {
?>
<option value="<?php echo $i; ?>"><?php echo $i ;?></option>

You can simply hide that option from select box when ever the select-box gets open and again when it is close show the default value .
Demo Code :
<select>
<!--hidden first option -->
<option value="10" selected="selected" hidden>10</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Using jquery :
$(document).ready(function() {
//getting first optino
var first = $('#myselect').find('option').first();
//when activated
$('#myselect').on('focus', function(e) {
first.hide(); //hide the first option
}).on('blur', function(e) {
//if value select is equal show the first option
if ($(this).val() == first.val()) {
//showing the same
first.show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myselect">
<option value="10" selected="selected">10</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

Thanks for your help, Swati, much appreciated. No JavaScript necessary, though, just plain HTML. All I had to do was what you had done: add the global attribute "hidden" to the "option" tag:
<option value="<?php echo $value['item_quantity']; ?>" hidden><?php echo $value['item_quantity']; ?>

Unable to return value of dropdown value in PHP

I am trying to retrieve a dropdown value, but the value isn't being returned in PHP. It returns as empty. I have other dropdowns in the form, but the only difference between them and this one is that there is a function associated to it. Which the javascript actually returns.
Thanks for your help. Code for the dropdown is below.
function validateDays() {
var e = document.getElementById("age_category");
var age_category = e.options[e.selectedIndex].text;
if (age_category == "Sub-Junior") {
console.log("Success");
} else {
console.log("Not Sub-Junior");
}
}
<?php
if(isset($_POST['submit'])){
echo $age_category = $_POST['age_category']
}
?>
<form action="my_page.php" method="POST">
<div class="form-group">
<!-- AGE CATEGORY -->
<select class="form-control" name="age_category" id="age_category" onchange="validateDays();" required>
<option value="">Age Category</option>
<option value="Sub-Junior">Sub-Junior</option>
<option value="Junior">Junior</option>
<option value="Open">Open</option>
<option value="Master 1">Master 1</option>
<option value="Master 2">Master 2</option>
<option value="Master 3">Master 3</option>
<option value="Master 4">Master 4</option>
</select>
</div>
</form>

You trying get submit value:
$_POST['submit']
and You need age_category:
$_POST['age_category']

You are trying to check isset function on $_POST['submit'] but "submit" reference doesn't exists anywhere in your form.
First create a button or something else and name it "submit" and then submit your form.
Currently you are not submitting your form in your code

Problem solved. When I was checking to see if it was empty. I was actually assigning it to be empty.
So it looked like this
if($age_category = "")
instead of
if($age_category == "")

Put value from javascript combo box

I want to get the value from a combo box in javascript.
This is the combo box code:
<select name="no_kk" style="width: 68%;" class="select2" id="no_kk" onchange="get_Nokk(this.value);" >
<option value="">-- Pilih Nomor KK --</option>
<?php
$kk = get_no_kk();
foreach ($kk as $key => $value) {?>
<option value="<?php echo $value->no_kk;?>"><?php echo $value->no_kk;?></option>
<?php
}
?>
</option>
</select>
I want to put the value I choose in this code here:
<div class="right">
TAMBAH
</div>

Here you have a problem. Is better for you to leave the href empty and then replace it using JS. I let you an example:
function calculateURL(option){
return a + option;
}
(function() {
console.log(document.querySelector(".button-submit-blue").href)
document.querySelector("#mySelect").addEventListener("change", function(evt){
var option = document.querySelector("#mySelect").value;
document.querySelector(".button-submit-blue").href = calculateURL(option);
alert("The value selected is: "+document.querySelector("#mySelect").value);
alert("The new link is: " + document.querySelector(".button-submit-blue").href)
}, false);
})();
<script>
var a = "http://www."; //this represents values grab from PHP
</script>
<select id="mySelect">
<option value="">--</option>
<option value="google.com">google</option>
<option value="yahoo.com">yahoo</option>
</select>
<div class="right">
TAMBAH
</div>
This is easy. First of all you need to set a listener for the change event on your select. This is set using addEventListener function. This function has several arguments, the first is the event you want to listen, change, the second is the callback, which will be executed everytime the event change is fired. Finally, you only have to take the selected option and recalculate your url.

Select box automatically redirects when clicked

I made,options in select box clickable. However for the very first option I din't put any link. But just when I click on the select box it redirects to somewhere and says page not found.
But if you click on the arrow and hold for a while then the dropdown appears.Now when u click any of the option it works. But I wonder why at first it doesn't shows the dropdown and just redirect.
here's the js fiddle: http://jsfiddle.net/58cqc812/
HTML
<select id="myselect">
<option>Go To ...</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/">Home</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▾</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</option>
<option>Branches ▾
<?php #Core::getHook('block-branches'); ?></option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</option>
</select>
JS
<script>
//$('#myselect').on('change', function() {
//location.href=$(this).data('url');
//});
document.getElementById("myselect").onclick = function(d){
window.location = this.value;
};
</script>
You can refer to the live site. You need to resize the browser to the smallest, then only this menu appears.It's meant for mobile version.
http://ymm.valse.com.my/

change on click event to change event .... it will fire when click the select box .
document.getElementById("myselect").onchange = function(d){
window.location = this.value;
};
i don't exactly know how on change work with JavaScript bcz i prefer jQuery

Using jQuery
$("#myselect").change(function(){
if($(this).val()!==""){
window.location = $(this).val();
}
});

Enable field when selecting from drop-down box

My contact form page, for user edit details, has two drop-down fields, ‘country’ and ‘city’.
I would like when a user is edit his details that the ‘city’ field will be disabled until something is selected in the ‘country’ drop-down menu.
<form name="item" action="<?php echo base_url(true) ?>" method="post">
<label><?php _e('Country', 'my_theme'); ?></label>
<?php ItemForm::country_select(get_countries(),user()) ; ?>
<label><?php _e('City', 'my_theme'); ?></label>
<?php ItemForm::cities_select(get_cities(),user()) ; ?>
<button class="itemFormButton" type="submit"></button>
</form>
I’ve tried ‘onchange’ in javascript, probably with wrong syntax…
How can I create this?
Thx.

This might help you http://jsfiddle.net/GZ269/. This uses jquery.
Country:<br />
<select id="drop1">
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
</select>
<br />
City:<br />
<select id="drop2" disabled >
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
</select>
Javascript function:
$("#drop1").change(function(){
var country = $(this).val();
if(!country){
$("#drop2").attr("disabled", true);
return false;
}
$("#drop2").attr("disabled", false);
});​

You should do this with Javascript's onchange event, and when this event is fired, you have two options:
Query the cities for the country selected with ajax.
This is good if you support (almost) all the countries in the world.
Here you must develop a PHP script to be queried when this event is fired.
Have a great array with the cities for all the countries supported.
Too bulky if need you to cover many countries.
Less flexible, if you need to add more cities for any country.