Using Ajax with Codeigniter - javascript

I saw few pages but tried all and none worked for me.
This is what i want:
on my html:
<form class="form-horizontal" role="form" method="POST" action="">
<select name="customer_id" id="customer_id" class="form-control">
<option>Select customer</option>
<?php foreach($customers AS $customer): ?>
<option value="<?php echo $customer->id;?>"><?php echo $customer->name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label for="category" class="col-xs-4 control-label">Category</label>
<div class="col-sm-4 col-xs-8">
<input type="text" class="form-control" name="category" id="category" placeholder="Category" disabled="disabled">
</div>
</div>
Then i have a script to auto fill the category field depending on the customer selected, ass on the database each customers fall into different categories.
<script type="text/javascript">
$(document).ready(function() {
$('#customer_id').change(function() {
var customer_id = $("#customer_id").val();
$.ajax({
type: "POST",
url: <?php echo base_url(). 'customer/getCustomerCat' ; ?>,
data: form_data,
success: function(cat)
{
$("#category").val(cat);
}
});
});
});
</script>
Then on my controller i have:
public function getCustomerCat(){
$id = $this->input->post('customer_id');
$category = $this->customer_model->getCustomerCat($id)[0]->category;
echo $category;
}
On my Model i have:
public function getCustomerCat($id){
$query ="SELECT category FROM customers WHERE id=$id";
$query = $this->db->query($query);
return $query->result();
}
I am not so good with ajax but expected the categoory field to be populated after selecting a customer without reloading the page.

Related

How to use select values for form action

I am trying to pass the select values for form action URL for wordpress,
$args_shortcode = shortcode_atts(array(
'category_name' => ''
), $attr);
$condition = "";
if(isset($_POST['Collateral_services'])){
$condition = "/?Collateral_services=".$_POST['Collateral_services'];
}
$action_url = site_url() . "/category/" . $args_shortcode['category_name'] . $condition;
As you can see, the action url will redirect user to a different page which is getting fetched from shortcode attribute, so $_POST['Collateral_services'] is not fetching any data because it needs to be on search result page,
But the action URL needs to be based on selected option of the form, so I am not getting how can I change values in url after "/category/" using javascript or jQuery ?
form:
<form method="POST" action="<?php echo $action_url; ?>">
<div class="form-group">
<div class="col-xs-12 col-sm-12">
<select name="Collateral_services" class="custom-select-input">
<option value="" disabled selected>All Services</option>
<?php
foreach ($terms_ser as $term_ser) {
?>
<option value="<?php echo $term_ser->slug; ?>"><?php echo $term_ser->name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="custom-search-button-align">
<input type="submit" value="Filter" class="custom-search">
</div>
</form>

How i get the values in select option using javascript

I am fetching acno from table when i select a party name in option.I have so far tired i get the acno from the table but it is not place in the option box.
My controller code:
public function get_states2()
{
$name = $this->input->post('name');
$result = $this->db->query("SELECT TAcNo FROM tipup_payment LEFT OUTER JOIN parmaster on parmaster.pcode = tipup_payment.TName WHERE PName='$name' ")->result_array();
echo json_encode($result);
}
My View page code:
<div class="col-md-6">
<div class="form-group form-group-xs">
<div class="col-lg-9">
Party Name:
<select class="form-control countries" name="City">
<option></option>
<?php foreach ($PName as $row ): ?>
<option value="<?php echo trim($row['PName']); ?>"><?php echo trim($row['PName']); ?></option><?php endforeach ?>
</select>
</div>
</div>
<div class="form-group form-group-xs">
<div class="col-lg-9">
AcNo:
<select multiple="multiple" style="height: 85px;" id="Name" class="form-control states">
<option value=""></option>
</select>
<?php echo form_error('Area', '<div class="text-danger">', '</div>'); ?>
</div>
</div>
<div id="item">
<input type="checkbox" name="item">With Details</center></div>
</div>
</div>
My Script Code:
<script type="text/javascript">
$(document).ready(function(){
$('.countries').change(function(){
var name = $('.countries').val();
$.ajax({
type: "POST",
url: "<?php echo base_url();?>Tieup/get_states2",
data:{name:name},
datatype: 'json',
success: function (data) {
/*get response as json */
alert(data);
var result = jQuery.parseJSON(data);
var no = result.TAcNo;
$("#Name").val(no);
/*ends */
}
});
});
});
</script>
This is my view page when i select a party name it should display the acno in acno option box( it down the party name).
give a class or id to ur dropdown
ur html
<select class="product">
</select>
ur jquery code
loop through all ur value and set it in ur option value one by one and at the end inject all ur html to ur select option using .html()
var value = [{"TAcNo":"341"}]
var options = '<option value="">Select</option>';
$(value).each((index, item) => { //loop through your elements
console.log(item)
options += '<option value="'+item.TAcNo+'">'+item.TAcNo+'</option>';
});
$('.product').html(options);
Hope it helps
Solution
you need to trigger change like this to update select value
$("#Name").val(no).change();

How to auto populate textbox when dropdown is selected

i'm trying to auto populate text-box when drop-down is selected. I've tried some code but nothing happen i already included the jquery file in my code.
I have a database table called services and the column are service_id, service_name, service_price.
Here's My view
<div class="form-group-inner">
<div class="row">
<div class="col-lg-1">
<label class="login2 pull-right pull-right-pro">Service</label>
</div>
<div class="col-lg-4">
<div class="form-select-list">
<select class="form-control custom-select-value" id="service_name" name="service_name">
<option>Select Service</option>
<?php foreach ($service as $services): ?>
<option value="<?php echo $services->service_id; ?>"><?php echo $services->service_name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="form-group-inner">
<div class="row">
<div class="col-lg-1">
<label class="login2 pull-right pull-right-pro">Price</label>
</div>
<div class="col-lg-4">
<input type="text" id="price" name="price" class="form-control" />
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#service_name').on('change', function() {
var service_id=$("service_name").val();
$.post("<?php echo base_url();?>/records/getprice/" + service_id,
function(data){
$('#price').val(data.service_price);
});
}
<script>
Controller
function add_form($patient_id){
$data['service']=$this->services_model->get_all_services();
$data['value'] = $this->patient_model->get_selected_patient($patient_id);
$this->load->view('header/header');
$this->load->view('Records/add_records',$data);
$this->load->view('footer/footer');
}
function getprice($service_id){
$laiza=$this->db->get_where("services",array("service_id"=>$service_id));
foreach ($laiza->result() as $row){
$arr = array('service_price' => $row->service_price);
header('Content-Type: application/json');
echo json_encode($arr);
}
}
I expect that when i select a data from dropdown the textbox will populate the price base on the selected item dropdown
ID selector # missing when your getting the Service_Name value
Change the same to
var service_id=$("#service_name").val();
or
var service_id= this.value;
<script>
$(document).ready(function () {
$('#service_name').on('change', function() {
var service_id=$("#service_name").val();
$.post("<?php echo base_url();?>/records/getprice/" + service_id,
function(data){
$('#price').val(data.service_price);
});
}
<script>

How to get value of select-option tag from database

i made this form of adding data in the database. I have exam table that contains exam_code(PK), exam_title and subject_code(FK). Here is the design
<div style="width:800px;height:auto;margin-left:auto;margin-right:auto;margin-top:50px;">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-6 col-sm-3 ">
<input name="code" type="text" class="form-control" id="excode" placeholder="Enter Exam Code">
</div>
<div class="col-xs-6 col-sm-3 ">
<input name="title" type="text" class="form-control" id="extitle" placeholder="Enter Exam Title">
</div>
<div class="col-xs-6 col-sm-3 ">
<select name="subjcode" class="form-control">
<option selected="selected">Choose subject</option>
<option disabled="disabled">---------------------------------</option>
<?php
include('db.php');
$subj = $connect->query("SELECT subject_code FROM subject");
while($row1 = mysqli_fetch_array($subj)){
echo "<option value = $row1[subject_code]>$row1[subject_code]</option>";
}
?>
</select>
</div>
<div class="col-xs-6 col-sm-3 ">
<input type="submit" name="add" class="btn btn-default" value="Add" />
</div>
</div>
</form>
</div>
Is my query here correct? I can't think of anyway to insert the data. Here..
<?php
include('db.php');
if(isset($_POST['add'])){
$excode = $_POST['code'];
$extitle = $_POST['title'];
$subcode = $_POST['subjcode'];
$examinsert = $connect->query("INSERT INTO exam (exam_code, exam_title, subject_code) VALUES ('$excode', '$extitle', '$subcode')");
if(!$examinsert){
die("<script>
alert('Error encountered, Reloading page');
window.location.href='teacher.php';
</script>");
}else{
die("<script>
alert('Your exam title has been added. You will see your titles in the Examination title section below!');
window.location.href='teacher.php';
</script>");
}
}
?>
Change Your PHP CODE
FROM This
<?php
include('db.php');
$subj = $connect->query("SELECT subject_code FROM subject");
while($row1 = mysqli_fetch_array($subj)){
echo "<option value = $row1[subject_code]>$row1[subject_code]</option>";
}
?>
To This
<?php
include('db.php');
$subj = $connect->query("SELECT subject_code FROM subject");
while($row1 = mysqli_fetch_array($subj)){
echo "<option value = ".$row1[subject_code].">".$row1[subject_code]."</option>";
}
?>
store value in Variable and than put it.
<?php
include('db.php');
$subj = $connect->query("SELECT subject_code FROM subject");
while($row1 = mysqli_fetch_array($subj)){
$subjectCode = $row1[subject_code];
echo "<option value = $subjectCode>$subjectCode</option>";
}
?>
Its Works.
I fixed it by adding a query that disables the foreign keys.
$set = $connect->query('SET foreign_key_checks = 0');
/*insert query*/
$set1 = $connect->query('SET foreign_key_checks = 1');

Use value from a form in a redirect button outside the form

Fetch selected value from dropdown which is in one form and onClick of the button outside the form send the value to php page
<div class="drpvendorname">
<font style="color: white;">
<label>Distribution Point:</label>
</font>
</div>
<select class="form-control" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option onClick="distribution('.$result['pointshortname'].')" value="' .$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
</form><!--form1 ends here-->
<form action="../customer/form.php"><!--form2 starts here-->
<button class="btn pos7" name="abc" method="GET" style="margin-left:5%;">New Customer</button>
</form><!--form2 ends here-->
<div class="dailybreakupbtn">
<input class="btn" type="submit" id="dailybreakupbutn" name="dailybreakup" value="Enter Daily Breakup" onClick="distribution(<?=$pointname?>)"/>
</div>
<?php
if(isset($pointname)){
?>
<script type="text/javascript">
function distribution(pointname){
var pointname;
window.location.href="dailybreakup.php?query=" +pointname;
}
</script>
<?php
}
?>
I have tried this sending selected dropdown box value to next page using function name distribution
I ended sending undefined to the next page.
can any one help me sending the selected value to the next page with out putting the button in the <form>
May this will be help you :)
Html code:
<form action= "" method= "post">
<select class="form-control drpvendor" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option value="'.$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
</form>
JQuery Code:
$(doucment).on('change','.drpvendor',function(){
var data=$(this).attr('selected','selected');
$.ajax({
url: "dailybreakup.php",
data:'query='+ data,
type: "POST",
success: function(data) {
window.location.href='customer/form.php';
}
});
});
Use code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> // please link the path or use cdn
<script type="text/javascript">
function call_me(){
var pointname=document.getElementById("drpvendor").value;
alert(pointname); // comment it after testing
window.location.href="dailybreakup.php?query=" +pointname;
}
</script>
<form>
<select class="form-control" id="drpvendor" name="pointname" required="">
<option selected disabled>Choose distribution point</option>
<?php
$strSQL = "SELECT * FROM point_tbl ORDER BY pointname ASC";
$query = mysqli_query($db, $strSQL);
while($result = mysqli_fetch_array($query))
{
echo '<option value="' .$result['pointshortname'].'">'. $result['pointname'].'</option>';
}
?>
</select>
<input type="button" onclick="call_me()"/>
</form><!--form1 ends here-->
Note : 1) Code is not tested
2) use your select id instead of your_select_id
3) check variable

Categories