Automatically fill an entry when changing a select connected to a database - javascript

I have a Payments table, which has 3 fields (id, item, amount) with the following query, with which I fill a combobox with all items, now I want to make that every time I select an item, the amount is automatically filled in an imput that I have in the form.
<div class="form-group">
<label class="col-sm-2 control-label" for="Old">Tipo de pago* </label>
<div class="col-sm-10">
<select class="form-control" id="pagos" name="pagos" >
<option value="" >Selecciona pago</option>
<?php
$sql = "select id, rubro, monto from pagos";
$q = $conn->query($sql);
while($r = $q->fetch_assoc())
{
echo '<option value="'.$r['id'].'" '.(($pagos==$r['id'])?'selected="selected"':'').'>'.$r['rubro'].'</option>';
}
?>
</select>
</div>
</div>

If I understood what you want, you could use jQuery to do that:
Let's suppose you have you have an Input:text with the id="MyInput"
$('#pagos').change(function() {
$('#MyInput').val($('#pagos').val());
})

Related

How to automatically fill the input field in html form

I have a system project where I can create fuel expenses records, so the process to create an expenses records, I fill up the first form with names of employee,
here's my first form:(using this form, I can access all employee's name from database)
<div class="form-group">
<label>Employee Name</label>
<select name="employee" onchange="getEmp(this.value)" class="form-control">
<option value="">Select Employee</option>
<?php foreach($emps as $emp) : ?>
<option value="<?php echo $emp["employee_id"]; ?>"><?php echo $emp["surname"] . ', ' . $emp["firstname"]; ?></option>
<?php endforeach; ?>
</select>
<div class="help-block with-errors"></div>
</div>
the name of employee is already stored in the table named tbl_employee, each names are provided with codename and issued with vehicle. so in other words, I have two tables in my database named, tbl_employee and tbl_vehicle.
the tbl_employee has attribute: employee_id(primary key), carid(foreign key) surname, firstname and codename,
the tbl_vehicle has attribute: carid(primary key) and reg_num(registration number or plate number)
what I want is, when I select a names from the form stated above, I want to automatically fill the form (stated below) with its codename and a reg_num(plate number):
<div class="form-group">
<label>Employees Code Name</label>
<input class="form-control" name="codename" type="text"/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Plate Number</label>
<input class="form-control" name="reg_num" type="text"/>
<div class="help-block with-errors"></div>
</div>
I also using this SQL statement to access the employees name directly from the database:
$emp = query("SELECT * FROM tbl_employee");
render("./fuel/list.php", ["title" => "Fuel Expenses List", "fuels" => $rows, "emps" => $emp]);
as you see, there is no javascript written on my codes, that's one of the reason why I need everyone's help.
You try this:
onkeyup(getEmp(this.value));

show data in another dropdown, related first dropdown data

I have two divs. One is input type text (Searching for city) and another is select option (Select area based on city search. ). If I type city name in first div then related city show in dropdown and when I select any city then related area in second div should be show.
My fronend is:
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group mb-15">
<input type="text" name="selectcity" id="selectcity" class="selectcity tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="form-group mb-15" >
<select required id="selectarea" class="form-control" name="selectarea">
<option value="">Select Area</option>
</select>
</div>
</div>
Now script is:
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function() {
$('input.selectcity').typeahead({
name: 'selectcity',
remote: 'search.php?key=%QUERY',
limit: 10
}).on('typeahead:selected', function(e){
var selectedcity = $(this).val();
$.ajax({
type: "POST",
url: "process-request.php",
data: "selectcity=" + selectedcity,
}).done(function(data) {
$("#selectarea").html(data);
});
});
});
search.php is:
<?php
include("connection.php");
$key=$_GET['key'];
$array = array();
$query=mysql_query("select * from location_master where status1='1' AND location LIKE '%{$key}%'");
while($row=mysql_fetch_array($query))
{
$array[] = $row['location'];
}
echo json_encode($array);
?>
process-request.php is
<?php
include("connection.php");
if(isset($_POST["selectcity"])){
$selectcity = $_POST["selectcity"];
$query1=mysql_query("select * from location_master where parent_id='$selectcity'") or die (mysql_error());
if($selectcity !== 'Select City'){
echo"<option value=''>Select Area</option>";
while($value = mysql_fetch_array($query1)) {
?>
<option value="<?php echo $value['id'];?>" ><?php echo $value['location'];?></option>
<?php
}
}
}
?>
But in search.php $array[] = $row['location']; display accurate city. But it gives null id for area.
If I $array[] = $row['id']; then I type city in text box, then ID is showing in dropdown and gives accurate area in area option.
But I need display city in dropdown but ID should be pass of related city for area option.

How do I populate textbox from a combobox selected

i want a combobox which populates itself from a database column, when a user selects an option from the combobox it will populate textboxes, which are on the same page, with information related to the selection in the combobox.
Below is the code I used to populate a textbox when I selected the select nama from the dropdown combobox. but it doesnt work, the textbox still blank.
I have the drop down working and also it fills a JavaScript array using names but I just cannot work out how to use the array to show in the fields.
i understand it will have to use javascript and Onchange function, can anyone point me in the right direction?
cheers and thank in advance :)
<script src="js/jquery.js"></script>
<script type="text/javascript">
var selected = new Array();
<?php
$query1 = "SELECT * FROM inventori";
$result1 = mysql_query($query1) or die(mysql_error());
// build javascript array
while($row1=mysql_fetch_array($result1)){
echo 'selected['.$row1['selectnama'].'] = new Array();';
echo 'selected['.$row1['selectnama'].']["NAMA_BAHAN_BAKU"] = "'.$row1['NAMA_BAHAN_BAKU'].'";';
echo 'selected['.$row1['selectnama'].']["SATUAN"] = "'.$row1['SATUAN'].'";';
}
?>
function showname() {
var selectnama = document.formInventori.selectnama.value;
document.formInventori.SATUAN.value = selected[selectnama]["SATUAN"];
}
window.onload=function() {
showname();
}
</script>
<form role="form" action="" method="post" name="formInventori">
<div class="form-group">
<label for="NAMA_BAHAN_BAKU">Nama Bahan Baku</label>
<select class="form-control" name="selectnama" onchange="showname()">
<option value="">Pilih Nama Bahan Baku</option>
<?php
$query1 = "SELECT * FROM inventori";
$result1 = mysql_query($query1) or die(mysql_error());
// build javascript array
while($row1=mysql_fetch_array($result1)){
echo '<option value="'.$row1['ID_BAHAN_BAKU'].'">'.$row1['NAMA_BAHAN_BAKU'].'</option>'; }
?>
</select>
</div>
<div class="form-group">
<label for="SATUAN">Satuan Barang</label>
<input type="text" class="form-control" readonly="" id="SATUAN" name="SATUAN" value="">
</div>
</form>
I would use AJAX to do that, i would save the value selected from the combobox and then pass it to a php through ajax so the php executes a query where the selected value is the search "key", then print the result throught php

three select lists database driven

I am trying to create a form with three select dropdown lists. user selects an option from select1 and based on the selected option, select2 gets populated, then user selects an option from select2 and based on selection, select3 gets populated.
following an example on stackoverflow I created this. the lists are getting populated fine but values are not passed when I hit submit button. if i select options from select1 and select2 only then values do get passed, but when i select option from select3 then no values are passed.
This is my PHP:
<?php
require "php/db.inc";
$db = new mysqli($hostName, $username, $password,'mms');//set your database handler
$query = "SELECT AcID, AcName FROM accounts WHERE ParentAcID ='0'";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$accountgroups[] = array("id" => $row['AcID'], "val" => $row['AcName']);
}
$query = "SELECT AcID, AcName, ParentAcID FROM accounts";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$accounts[$row['ParentAcID']][] = array("id" => $row['AcID'], "val" => $row['AcName']);
}
$query = "SELECT AcID, AcName, ParentAcID FROM accounts";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$subaccounts[$row['ParentAcID']][] = array("id" => $row['AcID'], "val" => $row['AcName']);
}
$jsonAcGroup = json_encode($accountgroups);
$jsonAc = json_encode($accounts);
$jsonSubAc = json_encode($subaccounts);
?>
This is my Javascript:
<script type='text/javascript'>
<?php
echo "var account_group = $jsonAcGroup; \n";
echo "var accounts = $jsonAc; \n";
echo "var sub_accounts = $jsonSubAc; \n";
?>
function loadAccountGroup(){
var select = document.getElementById("AcGroupSelect");
select.onchange = updateAccount;
for(var i = 0; i < account_group.length; i++){
select.options[i] = new Option(account_group[i].val,account_group[i].id);
}
}
function updateAccount(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("AcSelect");
AcSelect.options.length = 0; //delete all options if any present
subcatSelect.onchange = updateSubAccount;
for(var i = 0; i < accounts[catid].length; i++){
subcatSelect.options[i] = new Option(accounts[catid][i].val,accounts[catid][i].id);
}
}
function updateSubAccount(){
var catSelect2 = this;
var catid2 = this.value;
var subcatSelect2 = document.getElementById("SubAcSelect");
SubAcSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < sub_accounts[catid2].length; i++){
subcatSelect2.options[i] = new Option(sub_accounts[catid2][i].val,sub_accounts[catid2][i].id);
}
}
function start() {
loadAccountGroup();
updateAccount();
updateSubAccount();
}
window.onload = start;
</script>
This is my FORM:
<form class="form" method="post" action="form_test.php">
<table class='table table-striped'>
<tr>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Account Group</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Account</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Sub Account</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Debit</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Credit</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<select class="form-control" name="AcGroupSelect" id='AcGroupSelect'></select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" name="AcSelect" id='AcSelect'></select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" name="SubAcSelect" id='SubAcSelect'></select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="col-sm-1 form-control" name="DebitAmount" placeholder="Debit Amount">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="col-sm-1 form-control" name="CreditAmount" placeholder="Credit Amount">
</div>
</td>
</tr>
</table>
I had a similar problem. Once you get your values from the drop down list you still need to somehow put them into you form and submit them.
have a look at this I managed to solve it like this.
Populating the third menu based on previous dropdown values
Also have you got a submit button? Can't see how you submit in your form. Also missing closing form tag
Finally I figured it out. this script works just fine. the problem was not in the script but rather in the html. the top menu was hiding one line output n i was banging my head for getting the blank page.

PHP + Jquery Change Value of Textbox according to two Dropdown

I try to update text box value according to 2 dropdown. 1 drop down contain price1 and other drop down contain price 2, now I want that when user select price from both drop down then textbox display like that "price1 + price2 = total" How can I marge both value in single textbox value ? my price comes from database. Here is FIDDLE
PHP CODE
<div class="three columns">
<div class="picker">
<select name="city" required>
<option value="" disabled>Select</option>
<?php
$result = mysqli_query($con,"SELECT * FROM area");
while($row = mysqli_fetch_array($result))
{
?>
<option value="New"><?php echo $row['city']."( $ ".$row['area'].")";; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="four columns">
<div class="picker">
<select name="position" required>
<?php
$result = mysqli_query($con,"SELECT * FROM pricing");
while($row = mysqli_fetch_array($result))
{
?>
<option value="<?php echo $row['position']; ?>"><?php echo $row['position']."( $ ".$row['price'].")"; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="row">
<div class="two columns">
Total
</div>
<div class="ten columns">
<div class="field">
<input class="input" type="total" id="total" placeholder="" name="total" disabled/>
</div>
</div>
</div>
add a class on both combo and write one event this way:
$('.combo').change(function() {
$('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
FIDDLE DEMO
or you can do this way:
$('.combo').change(function() {
$('#firstvalue').val($('#combo').val() +"+"+$('#combo1').val()+"=");
$('#firstvalue1').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
SECOND DEMO
use this..
$(document).ready(function() {
$('.combo').change(function() {
$('#firstvalue').val(parseInt($('#combo').val()) +parseInt($('#combo1').val()));
});
$('#combo1').change(function() {
$('#firstvalue1').val($('#combo1').val());
});
});
you can do it by using variables:
if you wanted to sum of two dropdown options then you have to give integer value of the seond dropdown not the string(like a3,a4 should be 3,4). see demo html.
$(document).ready(function() {
price1=0;
price2 =0;
$('#combo').change(function() {
price1= this.value;
$('#firstvalue').val(parseInt(price1)+parseInt(price2));
});
$('#combo1').change(function() {
price2 = this.value;
$('#firstvalue').val(parseInt(price1)+parseInt(price2));
});
});
demo

Categories