How to pass dropdown selected item to PHP file through JavaScript - javascript

The following is the code that displays a dropdown list (database values) I need to send the selected item from dropdown list to another PHP file through JavaScript.
<?php include('db.php'); ?>
....
....
<script>
$(document).ready(function(){
$('#tag').autocomplete("autocomplete.php?",{ seleectFirst: true});
});
</script>
<body>
<select name="province" id="province">
<?php $result=mysql_query("select distinct(type) from schools");
while($row=mysql_fetch_array($result)){?>
<option value="<?php echo $row['type'];?>">
<?php }?>
</select>
<input name="tag" type="text" id="tag">
</body></html>
I have to pass the item selected in dropdown list to autocomplete.php through JavaScript.

You could probably read the value and call the other PHP link using GET parameters and have the other PHP file read the GET variable. The other method would be to do a POST. An example of the former below...
In a script tag or js file, put this function.
function loadPHP() {
var e = document.getElementById("province");
var val = e.options[e.selectedIndex].value;
location.href = "http://www.website.com/otherphp.php?sel=" + val;
}
Trigger it on the onchange event like this...
<select name="province" id="province" onchange="loadPHP()">
<?php $result=mysql_query("select distinct(type) from schools");
while($row=mysql_fetch_array($result)){?>
<option value="<?php echo $row['type'];?>">
<?php }?>
</select>

Related

how to hide original dropdown list in select2

I want to use select2 for my dropdown list. The options are from a database query. What I got is there are two dropdown lists showing. The first one is the original dropdown and the second is using select2.
The select code is:
<select name="city" id="select-city" class="form-control">
<option></option>
<?php foreach ($cities as $ct) : ?>
<option value="<?php echo $ct->id ?>"><?php echo $ct->name ?></option>
<?php endforeach; ?>
</select>
And the javascript is:
<script>
$(document).ready(function () {
$("#select-city").select2();
});
</script>
I want to hide the original dropdown. How can I do this?

php html form select option to populate text field jquery

I'm editing a wordpress plugin:
It currently has a dropdown option list for a user, and based on that user, I want to fill a text field with that users email.
selection option dropdown:
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
The customer email is stored in $Customer->Customer_Email
And Im trying to fill in the following value when a user changes the selected user:
<div class="form-field">
<label for="Order_Email"></label>
<input type='text' name="Order_Email" id="Order_Email" />
</div>
I've played around with filling the Order_Email with the following script, but it just sents the value as the customer_id. How do I change the value to the email
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#Customer_ID').on('change', function () {
var selection = $(this).val();
$('#Order_Email').val(selection);
});
});
</script>
You could just add a title attribute to the options to equal whatever the email value is:
Play around with it here: http://jsfiddle.net/7BUmG/3876/
This might not be the best solution and hacky, but it should do the trick. This will also break after the plugin is updated
<div>
<label for="Customer_ID"></label>
<select name="Customer_ID" id="Customer_ID" />
<option value='0'>None</option>
<?php foreach ($Customers as $Customer) { ?>
<option title='<?php echo $Customer->Customer_Email; ?>'value='<?php echo $Customer->Customer_ID; ?>'><?php echo $Customer->Customer_Name; ?></option>
<?php } ?>
</select>
</div>
and
$(document).ready(function(){
$('#Customer_ID').change(function() {
var email = $(this).find("option:selected").attr("title");
$('#Order_Email').val(email);
});
});

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.

Change function not firing, javascript dynamic form

I'm not sure why this is not firing. When I test the code, the forms appear, but when I select from the first form, noting happens. I am sure that for whatever reason, the .change(function) is not working.
<?php
require("scripts/dbconnect.php");
$stmt = $db->prepare('SELECT name FROM sets');
$stmt->execute();
$data = $stmt->fetchAll();
?>
<select id="first-choice">
<?php foreach ($data as $row): ?>
<option><?=$row["name"]?></option>
<?php endforeach ?>
</select>
<br />
<select id="second-choice">
<option>Please choose from above</option>
</select>
<script language=JavaScript>
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("select#first-choice option").filter(":selected").val());
});
</script>
You need to first, make sure JQuery is included on the page (it isn't in your post). And second, make sure your code is called when the DOM is ready.
$(document).ready(function(){
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("select#first-choice option").filter(":selected").val());
});
});

Form fields stability when using jquery to create the form

I am using json to fill the options of select tag, when I choose the country, system synchronously fill the combobox of cities
<label class="AddressLable">الدوله</label>
<select name="country" id="countryCB">
<option >اختر</option>
<?php $cntr=0;
while($cntr < count($countries))
{
?>
<option value="<?php echo $countries[$cntr]['countryNo']?>" <?php echo $_POST['country']==$countries[$cntr]['countryNo']?'selected':''?>> <?php echo $countries[$cntr]['countryName'];?></option>
<?php
$cntr++;
}
?>
</select>
<label class="AddressLable">المدينة</label>
<select name="city" id="cityCB">
</select>
//here is the jquery script
$("#countryCB").change(function(){
var countryNo=$(this).val();
var param={"action":"getCities",
"countryNo":countryNo
};
$.getJSON("controllers/Customer.controller.php",param,function(result){
input=$("#cityCB");
$('>option',input).remove();
$("#cityCB").append('<option> اختر</option>');
$.each(result,function(i,val){
var option = $('<option />');
option.attr("value",val.cityNo);
option.text(val.cityName);
$("#cityCB").append(option);
})
});
How can I make something like this:
<?php echo $_POST['country']==$countries[$cntr]['countryNo']?'selected':''?>
in jquery?
$("cityCB option[value='your_value']").attr("selected", true);
Run it after you append all of the options.

Categories