Develop Reference

Auto Fill Textboxes from database when choose element in combobox without reload page

I want auto fill textboxes from database when user choose an element in combo box.
with jQuery or java script in php.
$name when choose an element get text of that
<select name="Work_Subject" id="id2" onchange="">
<option value="*" selected>*</option>
<option value="1">TD</option>
<option value="2">HW</option>
<option value="3">Re</option>
<option value="4">AM</option>
<option value="5">Other</option>
</select>
$name=$_POST['work_suubject'];
$arrResult = mysql_query("SELECT * FROM cr_time name=".$name."",$con);
if((mysql_num_rows($arrResult))>0){
$row = mysql_fetch_row($arrResult);}
<input type="text" name="title_affect" id="title_affect" value="<?php $row['name']?>">

HTML FILE
<select name="Work_Subject" id="id2">
<option value="*" selected>*</option>
<option value="1">TD</option>
<option value="2">HW</option>
<option value="3">Re</option>
<option value="4">AM</option>
<option value="5">Other</option>
</select>
<input type="text" class="result" />
<input type="text" class="result" />
<input type="text" class="result" />
<input type="text" class="result" />
<input type="text" class="result" />
JS
$("#id2").change(function(){
$.ajax({
type: "POST",
url: "some.php",
data: {'value':$(this).val()},
success: function(msg){$('.result').val(msg)}
});
});
some.php
make your code and echo result
Eg. echo $result; die;

$(document).ready(function() {
$("#id2").change(function(){
$.ajax({
type: "POST",
url: "some.php",
data: "element="+$(this).val(),
success: function(msg){
alert( "Прибыли данные: " + msg );
}
});
});
});
Select the item, then pass a value, then do work on the server and then give the result

how to create selected item and input what item is

i wanna learn how to search something from database, and it's work, here the code
<fieldset>
<form action="" method="POST">
By Round Id : <input id="input-round" type="text" name="name" size="15"/><br/><br/>
By Player Id : <input id="input-player-id" type="text" name="player" size="15"/><br/><br/>
<input id="btn-form-close" type="button" value="Cancel" />
</form>
<script type="text/javascript">
$("#btn-form-close").click(function(){
$('#view-form').html('');
});
$('#input-round').keyup(function(){
var name = $('#input-round').val();
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_round');?>",
data:'nama='+name,
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
$('#input-player-id').keyup(function(){
var player = $('#input-player-id').val();
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_player');?>",
data:'nama='+player,
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
but i wanna create something like option can be selected, so i can selected search By Round Id or By player Id. but i don't have any idea how to accomplish that. what i get is select that option
<select class="form-control" id="sel1">
<option> By Round Id </option>
<option> By Player Id</option>
</select>
but what about input? can someone give me example, thanks a lot

First you may want to include in the form:
<form action="" method="POST">
Search by
<select class="form-control" id="sel1">
<option id="roundId"> By Round Id </option>
<option id="playerId"> By Player Id</option>
</select>
Id : <input id="input-round" type="text" name="name" size="15"/><br/><br/>
<input id="btn-form-close" type="button" value="Cancel" />
</form>
then send the selected option to backend to process
$('#input-round').keyup(function(){
var name = $('#input-round').val();
var choice = $('#sel1 option:selected').val()
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_round');?>",
data:'nama='+name+'&choice='+choice, //process this choice in backend..
success:function(html){
$('#view-list-round-id').html(html);
}
});
});

you have not given value for option
change it like this
<select class="form-control" id="sel1">
<option value="1" data-id="2"> By Round Id </option>
<option value="2" data-id="1"> By Player Id</option>
<option value="3" data-id="2"> By Round Id </option>
</select>
and the jquery function
$('#sel1').change(function(){
var player = $(this).val();
var PR_id = $(this).find(':selected').attr('data-id');
if(PR_id == 1)
{
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_player');?>",
data:'nama='+player,
success:function(html){
$('#view-list-round-id').html(html);
}
});
}
else if(PR_id ==2)
{
//next ajax call
}
});

thanks all now i get it, here the code i want it
<form action="" method="POST">
Search by
<select class="form-control" id="select">
<option id="roundId"> Rounds Id</option>
<option id="playerId"> Player Id</option>
</select>
: <input id="input" type="text" name="input" size="15"/><br/><br/>
<input id="submit" type="button" value="Search" />
</form>
jquery function like this
<script type="text/javascript">
$("#btn-form-close").click(function(){
$('#view-form').html('');
});
$("#submit").click(function(){
var data = {
'select' : $("#select").val(),
'input' : $("#input").val(),
};
//alert ($("#input").val());
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history');?>",
data:data,
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
</script>
and about controller is here
public function look_search_history(){
if($_POST['input']){
$select = $_POST['select'];
$input = $_POST['input'];
if ($select == "Rounds Id"){
$data['tbl_bet_spot'] = $this->login_model->select_by_round($input)->result();
$this->load->view('roulette/view_search_history', $data);
}else if ($select == "Player Id"){
$data['tbl_bet_spot'] = $this->login_model->select_by_player($input)->result();
$this->load->view('roulette/view_search_history', $data);
}
}
}

How to echo the value of a select to a text box

I have code in which I try to echo the value of a select with onclick.
I have a select which is getting its data from a database. Now I want that the option I click on is echoed into the text box. But I fail.
Here is my code:
<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
function get_main_sector(myid){
var id = document.getElementById("segment_id").value;
alert(id);
$(document).ready(function() {
$("#segment_id")({
onSelect: function(Text, inst) {
$("#dt_title input[type='text']").val($("#dt_title input[type='text']").attr('data-title')+Text);
}
})
});
}
</script>
</head>
<body>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px" onchange="get_main_sector(this.value)">
<option value="">[--Select Segment------]</option>
<?php
if(is_array($segments) && !empty($segments)) {
foreach($segments as $segment) {
echo '<option value="'.$segment->ID.'"';
echo '>';
echo $segment->title;
echo '</option>';
}
}
?>
</select>
</span>
<span id="dt_title">
<input name="title" type="text" value=" MB | <?php echo $segment->title;?> | " data-title="MB | <?php echo $segment->title;?> | " style="width:300px"/ readonly>
</span>
</body>
</html>

For that you don't need php. It's done client side.
Get value of select item :
$("#idoftheselect").val();
Get the option text selected of the select :
$("#idoftheselect").find(":selected").text();
Set a input values :
$("#idoftheinput").val("All your string content or var");
Here an example :
$(".myselect").change(function(){
var res = $(".myselect").find(":selected").map(function () {
if($(this).val()!="")
return $(this).text();
else
return "";
}).get().join(" ");
$("#inputid").val(res);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="myselect">
<option value="">Choose</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<input type="text" id="inputid" placeholder="Here selected item">

Updated code
$("#segment_id").change(function () {
var id = $(this).val();
$("#title").val($("#segment_id option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px" >
<option value="">[--Select Segment------]</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</span>
<span id="dt_title"> <input id="title" name="title" type="text" value=" "
data-title="MB" style="width:300px" readonly> </span>

If you are trying to get the selected item value in to the text box, completely remove this part of your code (I think this is useless)
MB | <?php echo $segment->title;?> | "data-title="MB | <?php echo $segment->title;?> |
for your answer=>
Remove the "onchange" event from select element:
<select name="segment_id" id="segment_id" STYLE="width: 300px">
Inside script (put this script area at the end of the code ... better that way)
<script>
$( document ).ready(function() {
$("#segment_id").on('change', function () {
var id = document.getElementById("segment_id").value;
alert(id);
$("#title").val($$("#segment_id option:selected").text());
});
});
</script>
the complete answer will be :
<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<!-- Body Starts Here -->
<body>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px">
<option value="">[--Select Segment------]</option>
<?php
if(is_array($segments) && !empty($segments))
{
foreach($segments as $segment)
{
echo '<option value="'.$segment->ID.'"';
echo '>';
echo $segment->title;
echo '</option>';
}
}
?>
</select>
</span>
<span id="dt_title"> <input name="title" type="text" value="" data-title="" style="width:300px"/ readonly> </span>
<script type="text/javascript">
$(document).ready(function () {
$("#segment_id").on('change', function () {
var id = document.getElementById("segment_id").value;
alert(id);
$("#title").val($$("#segment_id option:selected").text());
});
});
</script>
</body>
</html>

Keep drop down option on the next page

I have 3 pages: index.php, soldc.php and soldf.php like in select option below.
On each page i have the same dropdown as header. So when i click the button , depending on dropown option, the button redirect to soldc.php or sodf.php where are displayed different information. I want to keep dropdown option selected on the next page i'm redirected by the button. Thx for help.
<html>
<body>
<form name="hop"><br>
<p align="center">
<select name="choose" style="width: 168px;height: 35px;">
<option value="./soldc.php">Sold clienti</option>
<option value="./soldf.php">Sold furnizori</option>
</select>
<input type="button" data-validate="submit" class="btn-primary" onclick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Calculate" style="
margin-left: 10px;">
</form>
</body>
</html>

Place this in your <head>
<script language="JavaScript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
</script>
Then use this as your html form
<form name="form1">
<select name="select" id="select">
<option value="./soldc.php?id=1" <?php if($_GET['id'] == 1) { ?> selected=selected <?php } ?>>Sold clienti</option>
<option value="./soldf.php?id=2" <?php if($_GET['id'] == 2) { ?> selected=selected <?php } ?>>Sold furnizori</option>
</select>
<input type="button" name="go_button" id= "go_button" value="Go" onClick="MM_jumpMenuGo('select','parent',0)">
</form>
Hope this helps

I am not sure this will work, but I think it would:
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
Html
<p align="center">
<form name="hop" class="center">
<select name="choose" id="selection" style="width: 168px;height: 35px;">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" data-validate="submit" class="btn-primary" onclick="location=document.hop.choose.options[document.hop.choose.selectedIndex].value;" value="Calculate" style="
margin-left: 10px;">
</form>
</p>

When you go to target page that means you the last selected option is the current page , am i correct ? use the following js code in each page :
var option = document.location.pathname.match(/[^\/]+$/)[0];
document.getElementById('select').value = option;
change this line <select name="choose" style="width: 168px;height: 35px;">
to this
<select id=select name="choose" style="width: 168px;height: 35px;">

drop down list send values through AJAX call

I'm new to AJAX and trying to learn basic calls through AJAX and jQuery.
I have a simple drop list of countries, where I want to select a particular country and send the value of it to server, where it would process which country was selected and give particular output. For now, it could just echo simple output in php file. There is some kind of problem with this code. I would appreciate if anyone could help me with it. thanks
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function load()
{
$.ajax({
type:"GET",
url: "test.php",
data: { country: $("#country").val()}
}).done(function(msg){
$("#right #myDiv").html(msg);
});
}
</script>
</head>
<body>
<div id="main">
<div id="left">
Select Country: <select id="country" name="country">
<option value="germany">Germany</option>
<option value="england">England</option>
</select>
<input type="button" value="Run Query" onClick="load()"></input>
</div>
<div id="right">
<div id="myDiv"></div>
</div>
</div>
test.php
<?php
$name=$_GET['country'];
if($name=="England")
{
echo "Works";
}
else
{
echo "doesnt Work";
}
?>
?>

The only issue I see is that in your PHP you have
if($name=="England")
But in your html you have
<option value="england">England</option>
It is sending over "england". "england" != "England".
Also, I would just do
$("#country").val()
instead of
$("#country option:selected").val()

if you mean too get work message from php file replace England with england, because php is case sensitive.

There is 2 errors in your code :
data: { country: $("#country option:selected").val()}
should be $("#country").val()
and
if($name=="England")
shoudl be "england"
So Here is the right code :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function load()
{
$.ajax({
type:"GET",
url: "test.php",
data: { country: $("#country").val() }
}).done(function(msg){
$("#right #myDiv").html(msg);
});
}
</script>
</head>
<body>
<div id="main">
<div id="left">
Select Country: <select id="country" name="country">
<option value="germany">Germany</option>
<option value="england">England</option>
</select>
<input type="button" value="Run Query" onClick="load()"></input>
</div>
And for the test.php :
<?php
$name=$_GET['country'];
if($name=="england")
{
echo "Works";
}
else
{
echo "doesnt Work";
}
?>
EDIT : It's pretty straight forward for me, but : be sure you call your page via your web server. The url in your browser should be :
http://localhost/whatever/page.html
and not (if from your hard drive) :
file://c:/whatever/page.html