Populate a PHP variable from a listbox value with AJAX - php

I retrieve the value of a select box in this way which goes to populate a input field:
<script>
$(document).ready( function ()
{
$('#dropdown_selector').change(function()
{
var option = $(this).find('option:selected').val();
$('#showoption').val(option);
});
});
</script>
<select id="dropdown_selector">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
<label>Value</label>
<input type="text" name="name" id="showoption" disabled="disabled" />
</label>
But my problem is how to retrieve that value and use it directly in a PHP variable,instead of populating the input field(with id showoption).
Something similar as:
$variable=(var selected in select box)
Thanks for your help!!!

This jQuery code is triggered when an option is selected and then stores the value of the option into variable valu. After that it sends the variable to your php document via Ajax post.
$('select').change(function(){
var valu=$( "select option:selected" ).attr('value');
$.ajax({
type:"POST",
url:"yourphpscript.php",
data: {values:valu}
});
});
http://jsfiddle.net/joey6978/peq74/ :this fiddle shows the select choosing trigger.
In your php script you should have the post method with the name values to recieve your data.
$myvariable=$_POST['values'];

Related

On Dropdown Selection, how to fill complete form fields from Database

How to fill the complete form input fields from Database based on the value selected from the Dropdown
Example: In a Application, by selecting a client name it fills the complete form input fields with the details stored in the Database.
Sample Code:
<select name="client">
<option value="">-- Select Client Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>
All the about input fields need to be filled with values on client name selection.
EDIT:
I tried with AJAX but couldn't able get the particular variable from the file... below is my code:
<script>
$(document).ready(function() {
$('#client').change(function() {
alert();
var selected = $(this).find(':selected').html();
$.post('get_details.php', {'client': selected}, function(data) {
$('#result').html(data);
});
});
});
</script>
In the get_details.php file I am storing different values in different variables, but I didn't understand how to get them to individual variable to main page.
This is a just a basic jQuery example that calls itself (the top portion of the script is active when a $_POST is made), which I have named index.php as indicated in the url of the jQuery AJAX. You can use two separate pages to do this if you want. Just separate out the PHP from the HTML/Javascript and change the url: '/index.php':
<?php
// This is where you would do any database call
if(!empty($_POST)) {
// Send back a jSON array via echo
echo json_encode(array("phone"=>'123-12313',"email"=>'test#test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
// Exit probably not required if you
// separate out your code into two pages
exit;
}
?>
<form id="tester">
<select name="client" id="client">
<option value="">-- Select Client Name -- </option>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input name="phone" type="text" value="">
<input name="email" type="text" value="">
<input name="city" type="text" value="">
<textarea name="address"></textarea>
</form>
<!-- jQuery Library required, make sure the jQuery is latest -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// On change of the dropdown do the ajax
$("#client").change(function() {
$.ajax({
// Change the link to the file you are using
url: '/index.php',
type: 'post',
// This just sends the value of the dropdown
data: { client: $(this).val() },
success: function(response) {
// Parse the jSON that is returned
// Using conditions here would probably apply
// incase nothing is returned
var Vals = JSON.parse(response);
// These are the inputs that will populate
$("input[name='phone']").val(Vals.phone);
$("input[name='email']").val(Vals.email);
$("input[name='city']").val(Vals.city);
$("textarea[name='address']").val(Vals.address);
}
});
});
});
</script>
When you made ajaxCall return data in json format like
json_encode(array("phone"=>'123-12313',"email"=>'test#test.com','city'=>'Medicine Hat','address'=>'556 19th Street NE'));
above shown
then parse it in jQuery and put the value in different selectors like
var Vals = JSON.parse(response);
// These are the inputs that will populate
$("input[name='phone']").val(Vals.phone);
above shown.

Setting input values with the values returning from PHP

I have a form and I want to set the values of the input fields on change of a form select. On change of the select ajax jquery runs and calls a PHP file with get method. But I don't know how to return the values from PHP (array or echo or any other way) and how to set them to the input values.
Using jQuery, this could be desired solution:
<form name="frm">
<input type="text" name="age" id="txtAge" />
<input type="text" name="country" id="txtCountry" />
<select name="name" id="selName">
<option value="Ceyhun Ganioglu">Ceyhun Ganioglu</option>
<option value="ABC">ABC</option>
<option value="CED">CED</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('select#selName').change(function(){
var name = $(this).val(); // selected option's value
$.getJSON("<URL_TO_PHP_SCRIPT>", { name: name }, function(data){
// on success, put returned value in textbox
// return data is in JSON (note, I am using `.getJSON` now)
$("#txtAge").val(data.age);
$("#txtCountry").val(data.country);
});
});
});
</script>
Your PHP Code could be:
<?php
echo json_encode(array('age' => 21, 'country' => 'US')); // you need to return on the basis of name, :)
?>
Read Ajax doc for jQuery $.getJSON here: http://api.jquery.com/jquery.getjson/
Other Ajax functions in jQuery: http://api.jquery.com/jquery.ajax/

POST something using editable dropdown

I made an editable dropdown menu :
<html>
<body>
<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
<select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;" onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
<option></option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<input type="text" name="displayValue" placeholder="add/select a value" id="displayValue" style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;" onfocus="this.select()">
<input type="hidden" name="idValue" id="idValue">
</div>
</body>
</html>
I want to POST the value that was added, so as to include it in drop down for the next round.
I suggest you use jQuery for easy implementation. You can wrap them in a form and do the POSTing via jQuery Ajax then store that value somewhere for future use then append it to the next as the new option item.
POST via aJax
$(function() {
$('#form').on('submit', function(e) {
// do not reload the page
e.preventDefault();
// do the posting
var newValue = $('#displayValue').val();
$.post('http://MYURL.com/post.php', {
new_field: newValue
}, function(data) {
// success callback
$('#form > select').append('<option value="'+newValue+'">'+newValue+'</option>');
})
});
})
Basically, you post newValue to http://MYURL.com/post.php and handle that new data then the success callback will handle the inserting of the new value to your select.
the code is not tested, let me know if it did not work
Learn more about jquery.post() here and more about jquery here

Passing dropdown value to session without refreshing the page

I need to pass select value to a session without refresh the page.
I think onchange event can be used.
Actually, I can put select value into text field.
HTML
Select:
<select id="dropdown1" class="select" tabindex="2" onchange="run(this)">
<option>Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
TextBox:
<input type="text" id="car" name="car" id="car" value="<?=$_POST[car]?>" disabled />
JavaScript
function run(sel) {
var i = sel.selectedIndex;
if (i != -1) {
document.getElementById("car").value = sel.options[i].text;
}
}
Question
How to set value on a variable when select value from dropdown?
$_SESSION['car'] = DROPDOWN VALUE
if you can use jQuery, this will work:
function run(sel) {
var i = sel.selectedIndex;
if (i != -1) {
document.getElementById("car").value = sel.options[i].text;
$.ajax({
type: "POST",
url: "urPHPPage.php",
data: { car: sel.options[i].text}
}).done(function( msg ) {});
}
}
and in your PHP file
if(isset($_POST["car"])){
$_SESSION['car'] = $_POST["car"]; //offcourse you will have to do some sanitization here
}
Since your session is a server-side event and your onchange event is a client-side event, you'll need to use AJAX in order to change your dropdown options without refreshing the page.
You will need to run a JavaScript function on onchange event.
In that function you need to use AJAX in order to connect to your browser/database and save the session['car']
Hope it helps.

Display Javascript variable into PHP variable

In my form action there's a url: www.url.com/?quantity=$quantity
And in the form there's a select box where customers choose the quantity.
<form method="post" name="jform" action="www.url.com/?quantity=$quantity">
<select class="font_12" id="quantity" name="quantity">
<option value="10">10 PCs</option>
<option value="25">25 PCs</option>
<option value="50">50 PCs</option>
<option value="99">99 PCs</option>
</select>
I am trying to get the value in the select box using ajax, and then display into the action form url. I did a alert and it works, I am getting the value of the select box.
But I don't know how to put this vaue into the PHP varaible $quantity?
Here's my Ajax code:
$('#quantity').on('change', function() {
var val = $(this).val();
if(val != '') {
$.get('index.php', {'quantity' : val}, function(resp) {
alert(val);
});
}
});
Actually I want it to change the php variable right away when the quantity in the select box change before submitting the form.
Any help?
Use $_GET
If your URL is ?quantity=### then just use $_GET['quantity'] in your PHP code.
To change the action attribute on the form when you change the quantity you can just put the following inside your onchange event:
$('form[name="jform"]').attr('action','http://url.com/?quantity=' + val);

Categories