I want to set selected value of a select input to a php variable. When I select a value from select box, then want to put that value in php variable and use echo select option value, but I can't get this value in select box inside php code. My Code is given below.
<body>
<select>
<?php
$test='<label id="output"></label>';
echo "<option>".$test."</option>";
?>
</select>
<select id="sel">
<option>--select--</option>
<option>amr</option>
<option>tomar</option>
</select>
</body>
<script type="text/javascript">
$(document).ready(function(){
$( "#sel" ).change(function() {
var ww = $( "#sel" ).val();
//alert(ww);
$( "#output" ).text(ww);
});
});
</script>
Use AJAX
$.ajax({
type: "POST",
url: "some.php",
data: { ww: ww}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
And in some.php using POST you can set $ww = $_POST['ww'];
Reference
http://api.jquery.com/jquery.ajax/
PHP is a server-side-language, so the php-code is executed before anything is showed on the screen.
That also means that when the page is loaded you can no longer interact with the php code.
For what it sounds like you're trying to do (a little hard to understand), it sounds like you need to use javascript to change the content on the page at runtime :)
You're select box hasn't got an id of sel, which is what the JS is listening for the change event on, I also can't see the div with the id output, which is where the results are going.<select id="sel"> And <div id="output"></div>
Related
First of all, I am using Bootstrap Dual Listbox that I got from http://www.virtuosoft.eu/code/bootstrap-duallistbox/
After trying to implement it, I encounter a single problem. At first run, the options are not being displayed on either select box unless I click the Move All button.
So here is the structure as well as the codes.
Index.php
<!-- HTML -->
<select multiple="multiple" size="5" class="eItems" name="skillsTagged" id="skillsTagged">
</select>
<!-- Scripts-->
<script>
$(document).ready(function(){
var dlb1 = $('#skillsTagged').bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});
getSkills();
});
function getSkills(){
var oldid = "1";
$.ajax({
type: "POST",
url: "get_selected_skills.php",
data: { specId : oldid }
}).done(function( res ) {
$("#skillsTagged").html(res);
});
}
</script>
get_selected_skills.php
<?php
echo "<option value='1'>1</option><option selected value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option selected value='5'>5</option>";
?>
So it seems like the options are there but are not being displayed on first run. Tried it on a regular listbox and is working so if anyone already encountered this when using Dual Listbox, your help will be greatly appreciated! Thanks!
Try to set ajax async property to false...
İn method : async:false
Or globally:
$.ajaxSetup({
async:false
});
if i have this input on html code
<input value="0001" name="call" id="call">
how i call that value in php script without submit? like event onBlur or anything ??
the php file have query something like this :
select * from table where field = (input html value)
you need to use Ajax for that.
<script>
$(document).ready(function()
{
var value = $("#call").val();
$.ajax({
url: "you file path where your php code is written to fetch value from database",
type:"POST",
data:{"call":value},
success:function(result){alert(result);}
})
});
</script>
and on php file.
<?php
write code for sql connection ;
$feild_value = $_POST["call"];
// you can use this $feild_value variable in query;
select * from table where field = $feild_value ;
//echo query result here
echo $query_result;
die;
?>
If you want to send this value to your PHP script when event Blur is triggered, then try this
<input value="0001" name="call" id="call">
<script type="text/javascript">
$('#call').on('blur',function(){
var value = $(this).val();
$.ajax({
url: "http://website.com/index.php",
type: "POST",
data: {"call": value},
success: function(data){
console.log(data);
}
});
});
</script>
To set input value to PHP session you will need to run ajax request anyway, see this question Set Session variable using javascript in PHP
Hope someone can help me..
i made my program more simpler so that everybody will understand..
i want my program to get the value of the without submitting, i know that this can only be done by javascript or jquery so I use the onChange, but what I want is when i select an option the value should be passed immediately on the same page but using php..
<select id="id_select" name="name" onChange="name_click()">
<option value="1">one</option>
<option value="2">two</option>
</select>
<script>
function name_click(){
value_select = document.getElementById("id_select").value;
}
</script>
and then i should pass the value_select into php in post method.. i dont know how i will do it.. please help me..
You cannot do this using PHP without submitting the page. PHP code executes on the server before the page is rendered in the browser. When a user then performs any action on the page (e.g. selects an item in a dropdown list), there is no PHP any more. The only way you can get this code into PHP is by submitting the page.
What you can do however is use javascript to get the value - and then fire off an AJAX request to a php script passing the selected value and then deal with the results, e.g.
$(document).ready(function() {
$('#my_select').on('change', do_something);
});
function do_something() {
var selected = $('#my_select').val();
$.ajax({
url: '/you/php/script.php',
type: 'POST',
dataType: 'json',
data: { value: selected },
success: function(data) {
$('#some_div').html(data);
}
});
}
With this code, whenever the selected option changes in the dropdown, a POST request will be fired off to your php script, passing the selected value to it. Then the returned HTML will be set into the div with ID some_div.
not sure ..but i guess ajax is what you need..
<script>
function name_click(){
value_select = $("#id_select").val();
$.post('path/to/your/page',{"value":value_select},function(data){
alert('done')
})
}
</script>
PHP
$value=$_POST['value']; //gives you the value_select data
Post with ajax as Alex G was telling you (+1) and then handle the post with PHP. You can define a callback in Javascript which will run when the page responds.
My suggestion go with jquery. Try with this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script>
$(document).ready(function(){
$("#id_select").change(function(){
var url = 'http:\\localhost\getdata.php'; //URL where you want to send data
var postData = {'value' : $(this).value};
$.ajax({
type: 'POST',
url: url,
data : postData,
dataType: 'json',
success: function(data) {
//
},
error: function(e) {
console.log(e.message);
}
});
})
})
</script>
In getdata.php
<?php
var $value = $_POST['value'];
// you can do your logic
?>
I'm trying to get a drop down box to alter a second drop down box through the use of a jquery/ajax script. Firebug is showing Jquery is working but my script isn't showing at all.
<script type="text/javascript">
function ajaxfunction(parent)
{
$.ajax({
url: '../functions/process.php?parent=' + parent;
success: function(data) {
$("#sub").html(data);
}
});
}
</script>
process.php is just a MySQL query (which works)
My initial drop down box is populated by a MySQL query
<select name="front-size" onchange="ajaxfunction(this.value)">
//Query
</select>
And then the second drop down box is just
<select name = "front-finish" id="sub">
</select>
How can I solve this?
calling inline function is not good at all... as web 2.0 standards suggest using unobtrusive JS rather than onevent attributes....check out why here..
other thigs..correct way to use ajax is by using type and data ajax option to send values in controller..
<script type="text/javascript">
$(function(){
$('select[name="front-size"').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html", //<--- here this will take the response as html...
success: function(data) {
$("#sub").html(data);
}
});
});
});
</script>
and your proces.php should be..
<?php
//db query ...thn get the value u wanted..
//loop through it..
$optVal .= "<option value="someDbValue">some DDB values</option>";
// end loop
echo $optValue;exit;
updated
looks like you still have onchange="ajaxfunction(this.value)" this in your select remove that it is not needed and the ajaxfunction in javascript too...
<select name="front-size" >
//----^ here remove that
use jQuery.on() that will allow us to add events on dynamically loaded content.
$('select[name^="front-"]').on('change',function(e){
e.preventDefault();
var value = $(this).val();
ajaxfunction(value);
});
[name^="front-"] this will select all the SELECT box having name starts with front-.
In your process.php give like this
echo "<select name='front-finish' id='sub' onchange='ajaxfunction(this.value)'>";
like this you need to add the "onchange" function to the newly created select box through ajax
or you can remove onchange function and write like
$("select[name^='front-']").live('change',function(){
//Do your ajax call here
});
I have two dropdown boxes, actually I have done this functionality by using jquery and ajax by calling an id that if I select one thing it will appear on second select box but the main problem I am facing is that I am using a template where a select box uses some class name called "cho" as if I don't use this class obviously my select box look wired so I like the style of it .So if I use this class in my second select box where the result display then the functionality wont work but if I don't use the class then it will work so what I want is:
I want to use the css class and implement the functionality too I checked in every css file but I cant find cho class so what I think that if I cant change the css file may be there is the way in jquery that I'll resolve this issue.
This is my first select box ,where select box and css working fine.
<?php echo form_dropdown('cat_id', $records2, '#', 'id="category" class = "cho"');?>
2nd select box -without css ..functionality successfull
<?php echo form_dropdown('item_id', $records3, '#', 'id="items"'); ?>
With css--functionality wont work but css do:
<?php echo form_dropdown('item_id', $records3, '#', 'id="items" class = "cho"'); ?>
My javascript:
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#category').change(function(){
$("#items > option").remove();
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items)
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('#items').append(opt);
});
}
});
});
});
</script>
html file source of two dropdown
<div class="controls">
<select name="cat_id" id="category" class = "cho">
<option value="1">jeans</option>
<option value="2">shirts</option>
</select>
<br />
</div>
</div>
Items:
sdf
bello
gamer
dsf
blue
Have you tried firebug or any other similar tool to find out your 'cho' class. Try this code also
$("#items").addClass("cho");
OK try selecting through name:
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#category').change(function(){
$('select[id="items_chzn"] > option').remove();
var category_id = $('#category').val();
$.ajax({
type: "POST",
url: "stockInController/get_Items/"+category_id,
success: function(items)
{
$.each(items,function(item_id,item_name)
{
var opt = $('<option />');
opt.val(item_id);
opt.text(item_name);
$('select[id="items_chzn"]').append(opt);
});
}
});
});
});
</script>
If you are still having an issue try using an alert in the function after the ajax call.