We Keep Coding

jQuery change the value of a variable on dropdown select from database

I am working on a project where I am stuck at a point right now. I need to change the value of a DIV live on select of the dropdown using jQuery.
Example:
I want this:-
<select name="">
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
When I will select option 1 the value will be displayed in place of 0 in DIV live. The problem is that as this select value fetches data from the database I am not understanding how to do it.
Example:
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
<?php } ?>
</select>
jQuery that I used currently:-
$(document).ready(function(){
$("#pln").click(function(){
$("#chpln").text("Plan: <?php echo $ac_fetch['adclk_clicks']; ?> secs");
});
});
This jquery is changing the value currently but I am getting only the first value of the database i.e., 10. When I choose different option it still displays the first value from the database i.e., 10 while it should actually display the second value that is 20. Please help me. FIDDLE will be appreciated.

click is a wrong event for selection box
you can utilize change event for your result.
$(document).ready(function(){
$("#pln").change(function(){
$("#chpln").text("Plan: "+$(this).val()+" secs");
});
});

For Dropdown, click(function() is not applicable. Use change(function().
I gave you 2 way. Use any one.
I) Method - 1 (Using Ajax)
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>">
<?php echo $ac_fetch['adclk_clicks']; ?> clicks
</option>
<?php } ?>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
var selectBoxClicks = $('.select-box').val();
$.ajax({url:"AjaxShowClickValue.php?selectBoxClicks="+selectBoxClicks,cache:false,success:function(result){
$('#chpln').html(result);
}});
});
</script>
Create a new page, namely AjaxShowClickValue.php.
AjaxShowClickValue.php (Make Sure, if you changing page name here. Then, change in <script></script> tag too. Both are related.)
<?
echo "Clicks: ".$_GET['selectBoxClicks']." clicks";
?>
II) Method - 2
<select name="" class='select-box'>
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
$("#chpln").text("Clicks: "+$(this).val()+" clicks");
});
</script>

use jQuery Ajax for making request to the php file..
and use on .change() rather than .click() for changing the dropdown value..
the code will be placed in JS file which make ajax call to the php file on your server..
The php file will takes some params (if any) and perform select query to the databases and return result in response.. in php use json_encode(data) for that..
These examples may also help:
http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
You will find many other examples - Just Google It and understand the key concept!
Hope this helps.

Javascript local storage not working with drop menu populated from mysql

I wont to keep the selected item of my menu after reload or in a different page with the samedrop menu.
This code works perfectly but i need to populate mi dropdownmenu with mysql.
document.getElementById("plist").onchange = function() {
localStorage.setItem('plist', document.getElementById("plist").value);
}
if (localStorage.getItem('plist')) {
document.getElementById("plist").options[localStorage.getItem('plist')].selected = true;
}
<select name="produttore" id="plist">
<option value="0">Audi</option>
<option value="1">BMW</option>
<option value="2">Alfa Romeo</option>
<option value="3">Aborth</option>
</select>
If i populate the menu with that code the local storage doesn't seem to work.
document.getElementById("plist").onchange = function() {
localStorage.setItem('plist', document.getElementById("plist").value);
}
if (localStorage.getItem('plist')) {
document.getElementById("plist").options[localStorage.getItem('plist')].selected = true;
}
<select name="produttore" id="plist">
<option value=" ">Seleziona produttore</option>
<?php
foreach($results as $produttore) {
?>
<option value="<?php echo $produttore["category_id"]; ?>"><?php echo $produttore["name"]; ?></option>
<?php
}
?>
</select>
KEEP CALM AND don't kill me I'm a noob

As miraco suggested the problem was the value.
I changed my code and using "selectedIndex" and not "value" it work.

Loading Textarea with Javascript on click event

I am working on a project which requires status update. I would like to add onlcick even on select box to show textarea only if the users selected the status as pending.
echo "
<select onchange=\"window.location=this.value\" name=\"status\">
<option value=\"".$res1['ProjStatus']."\">".$res1['ProjStatus']."</option>
<option value=\"completed\">Completed</option>
<option value=\"ongoing\">Ongoing</option>
<option value=\"Project.php?pending=pending\">Pending</option>
</select>
";
Question: I would like to show the textarea only if the user change the project status to pending.
The above code work but this refresh the whole page

I think you want something like this. Forgive me for not testing that it works as is. Hopefully you can extrapolate.
HTML
<style> #textArea { display: none } </style>
<!-- select onchange calls javascript function to check if Pending was selected -->
<select onchange="toggleText(this.value)">
<option value="<?php echo $res1['ProjStatus'] ?>"><?php echo $res1['ProjStatus'] ?></option>
<option value="completed">Completed</option>
<option value="ongoing">Ongoing</option>
<option value="Pending">Pending</option>
</select>
<textarea id='textArea' />
JavaScript
function toggleText(value) {
// if the new value of the select element is Pending, show it
if("Pending" === value){
document.getElementById('textArea').style.display = "block";
// the return values just lets you know the result if you ever need it
return true;
}
document.getElementById('textArea').style.display = "none";
return false;
}

Remember select list option for onchange

Here is my code;
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="">Select Something</option>
<option value="<?php echo site_url(); ?>">Home</option>
<option value="<?php echo site_url(); ?>publications">Publications</option>
<option value="<?php echo site_url(); ?>contact_us">Contact Us</option>
</select>
When an option is selected, that page will immediately load. However, the drop-down list does not "remember" that that option was selected. The drop-down list will just default back to Select Something. How can I get the list to display what was selected instead?
Before I began using Frameworks I might have tried something like this;
<option value="<?php echo site_url(); ?>contact_us" <?php if($value == "contact_us") {echo "selected"; } ?> >Contact Us</option>
And I would have created a $value using $_REQUEST['value'] or something. But I am using the CodeIgniter framework so I don't think I can do that anymore.

This may help you:
<?php if($value == $_SERVER["REQUEST_URI"]) {echo "selected"; } ?>
I suggest from your code that you have some php $value-es equal to every option value. So, you can compare it with web page URI
More about $_SERVER global

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.