Facing scroll-linked trouble while making chained dropdown - php

I'm facing scroll-linked trouble while making chained dropdown.
I'm using php as programming language and codeigniter as the framework, here are the codes
View Codes
<div class="form-row">
<div class="col-md-4">
<label for="inputBody">Body Number</label>
<select name="inputBody" id="inputBody" class="form-control" required="required">
<?php foreach ($body as $bd) { ?>
<option value="<?php echo $bd->bodynumkids ?>" onchange="ambildata('+<?php echo $bd->bodynumkids ?>+');"><?php echo $bd->bodynumkids ?></option>
<?php } ?>
</select>
</div>
<div class="col-md-6">
<label for="inputKiddie">Kiddies Name</label>
<input type="text" name="inputKiddie" id="inputKiddie" class="form-control" placeholder="ex. Super Cop" required="required">
</div>
<script type="text/javascript">
function ambildata(x) {
$.ajax({
type:'POST',
data :'input='+x,
url :'<?php echo base_url()."Repairpaint/chained" ?>',
dataType: 'json',
success: function(data){
console.log(data);
}
})
}
</script>
</div>
Controller Codes
public function chained()
{
$dataKiddie = $this->input->post('input');
$where = array('bodynumkids'=> $dataKiddie);
$namakiddie = $this->Model_repairpaint->chaincb('kiddiejadi', $where)->result();
echo json_encode($namakiddie);
}
The result wasn't appear in console, only these warning that appear
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
What expected is the data from database appear in console when I click the dropdown. Can anyone here tell me the solution? Thank you before, for helping me.

Put ambildata()function in <select> tag not in <option>
<select name="inputBody" id="inputBody" class="form-control" required="required" onchange="ambildata(this.value)">
And the second thing some changing in the Ajax call
url : '<?php echo base_url("Repairpaint/chained"); ?>'
OR
url : '<?php echo base_url(); ?>' + 'Repairpaint/chained';
Sending Data
data : { 'input': x }

Related

Show sub-options based on selected main option in Codeigniter by ajax

I would like when I select the cats option that only the breed of cats appears, such as the Siamese example. If I select dog, I only want to get the breed of dogs, such as Pitbull and others.
Can you help me with the code, it tells me to use jquery, but how is it done I am just learning?
<div class="form-group">
<div class="row">
<div class="col-12 col-sm-6">
<label for="especie">Especie</label>
<select class="form-control" id="id_especie" name="id_especie" value="data-id-especie=">
<option value="">Seleccionar especie</option>
<?php foreach ($especie as $row) {?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
<?php }?>
</select>
</div>
<div class="col-12 col-sm-6">
<label for="raza">Raza</label>
<select class="form-control" id="id_raza" name="id_raza">
<option value="">Seleccionar raza</option>
<?php foreach ($raza as $row) {?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
<?php }?>
</select>
</div>
</div>
</div>
According to your Question you want Dynamic dependant drop down list in codeigniter with ajax / jQuery.
PHP VIEW :
<div class="col-12 col-sm-6">
<label for="especie">Especie</label>
<select class="form-control" id="id_especie" name="id_especie" value="data-id-especie=">
<option value="">Seleccionar especie</option>
<?php foreach ($especie as $row) {?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
<?php }?>
</select>
</div>
<div class="col-12 col-sm-6">
<label for="raza">Raza</label>
<select class="form-control" id="id_raza" name="id_raza">
<!-- Data here will be auto populated by ajax -->
</select>
</div>
Controller :
public function get_data()
{
$id_especie = $this->input->post("id_especie");
$SUbCatdata = $this->db->get_where('tableName',array('id'=>$id_especie))->result_array();
$option ="<option selected disabled value=''>Select Name</option>";
foreach($SUbCatdata as $row)
{
$option.="<option value='".$row['id']."'>".$row['nombre']."</option>";
}
echo $option;
}
jQuery / Ajax :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#id_especie").on("change",function(){
var id_especie = $(this).val();
$.ajax({
url : "<?php echo base_url('Controller/get_data') ?>",
type: "post",
data: {"id_especie":id_especie},
success : function(data){
//alert(data);
$("#id_raza").html(data);
}
});
});
</script>
Note : For more info regarding change()
https://api.jquery.com/change
If I understand you correctly, you want to create a sub-dropdown list that is dependent on the selection of another (main) dropdown list. If this is the case, here's what you need to do.
First, you need to create a file that contains code that will fetch results based on what is supplied. That is (in your example), if the main category is "dogs", it will query the database for all "species" of dogs, and return the result. Something like this:
Category Controller
class Category_controller extends CI_Controller{
// Get Subcategory method
public function get_subcategory()
{
// Check if input ($_GET or $_POST) exists
if ( $this->input->post_get() )
{
$main_cat_id = $this->input->post_get('mainid'); // main category id
// Perform your db query here to get the subcategory of the main cat
// Echo the result after performing a foreach loop like you did in the
// html file. <option value="value_id">value name</option>
$result = ""; // store empty value first
foreach ($dbresult as $value)
{
$result .= '<option value="$value['id']">$value['nombre']</option>';
}
echo $result;
}
}
}
SubCategory.js
$(document).ready(function() {
$('select[name="id_especie"]').on('change', function() {
var catid = $(this).val(); // will get the value attribute of the selected main category
// Perform ajax request
$.ajax({
url: 'url-to-the-subcategory-controller', // remember to set this in your config/routes.php file
method: 'POST',
cache: false,
data: {mainid: catid},
dataType: 'html',
success: function(data) {
$('select#id_raza').html(data); // update the subcategory dropdown
},
error: function(data) {
console.log(data);
}
});
})
});
So, your second select box select#id_raza show look like so in your view file:
<div class="col-12 col-sm-6">
<label for="raza">Raza</label>
<select class="form-control" id="id_raza" name="id_raza">
<option value="">Seleccionar raza</option>
<!-- Data here will be auto populated by ajax -->
</select>
</div>

How to automatic fill textbox depend upon select option from drop down

I have created one IMS System. In that i have to create bill on order page and in order page when i select customer name from drop down than customer_address,customer_phone and gst number should automatically fill in text box.In database i have created one table named partys in that all data are available(Customer_name,Customer_address,customer_phone and gst) If anybody knows solution than please help. Below is my code
<div class="form-group">
<label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Customer Name</label>
<div class="col-sm-7">
<select name="customer_name" id="client" style="width:100%;">
<?php
$dbc = mysqli_connect('localhost', 'root', '', 'stock')
or die('Error connecting to MySQL server.');
$query = "SELECT * FROM partys";
$result = mysqli_query($dbc, $query);
while ($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row['party_name'] ?>"><?php echo $row['party_name'] ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Customer Address</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="customer_address" name="customer_address" placeholder="Enter Customer Address" autocomplete="off">
</div>
</div>
<div class="form-group">
<label for="gross_amount" class="col-sm-5 control-label" style="text-align:left;">Customer Phone</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="customer_phone" name="customer_phone" placeholder="Enter Customer Phone" autocomplete="off">
</div>
</div>
<div class="form-group">
<label for="gstin" class="col-sm-5 control-label" style="text-align:left;">GSTIN</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="gstin" name="gstin" placeholder="Enter GST Number" autocomplete="off">
</div>
</div>
<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: '/create.php',
type: 'post',
// This just sends the value of the dropdown
data: {customer_name : party_name},
dataType: 'json',
success: function(response) {
// Parse the jSON that is returned
// Using conditions here would probably apply
// incase nothing is returned
var response = JSON.parse(response);
// These are the inputs that will populate
$("#customer_address").val(response.customer_address);
$("#customer_phone").val(response.customer_phone);
$("#gstin").val(response.gstin);
}
});
});
});
</script>
create separate php file as customer.php and write following code
$content = file_get_contents("php://input");
$customer_data = json_decode($content, true);
$customer_name = $customer_data['customer_name'];
//using mysql query fetch all data of particular customer
$query = mysqli_query($dbc,"SELECT * FROM partys WHERE party_name=$customer_name");
$result = mysqli_fetch_array($query);
echo json_encode($result);
after getting this alert json response in ajax call. This will give customer data.
and modify your ajax call as
<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: 'customer.php',
type: 'post',
// This just sends the value of the dropdown
data: {customer_name : party_name},
dataType: 'json',
success: function(response) {
alert(response);
// Parse the jSON that is returned
// Using conditions here would probably apply
// incase nothing is returned
var response = JSON.parse(response);
// These are the inputs that will populate
$("#customer_address").val(response.customer_address);
$("#customer_phone").val(response.customer_phone);
$("#gstin").val(response.gstin);
}
});
});
});

Getting value of select element using jquery

I have the following HTML
<div class="question-set">
<div class="row question">
<div class="col-md-2">
<select class="form-control" name="type[]">
<option value="Teacher feedback">Teacher feedback</option>
<option value="Genral Question">Genral Question</option>
<option value="Informative Question">Informative Question</option>
</select>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="questions[]" placeholder="Enter the question here" />
</div>
</div>
<div class="row question">
<div class="col-md-2">
<select class="form-control" name="type[]">
<option value="Teacher feedback">Teacher feedback</option>
<option value="Genral Question">Genral Question</option>
<option value="Informative Question">Informative Question</option>
</select>
</div>
<div class="col-md-8">
<input type="text" class="form-control" name="questions[]" placeholder="Enter the question here" />
</div>
</div>
</div>
In short there is a select tag with name type[] and a text input field names questions[]. I need to pass the values to a php page as an ajax call to insert into the database. I have the following AJAX code..
$.ajax({
method: "POST",
url: "feedback_create_form_process.php",
data: {"questions": $("input[name='questions[]']").val(), "type": $("select option:selected").val()},
success: function(data){
alert(data);
}
});
Here is my PHP code
<?php
include 'con.php';
if (isset($_POST) && sizeof($_POST)) {
$question = $_POST['questions'];
$type = $_POST['type'];
echo count($question);
foreach( $question as $key => $n ) {
$result = $con->query("insert into form question(null, ".$question[$key].", ".$n.")");
}
}
?>
The count is returned as 1. It sends only the first question and not the array. I want the values in an array so i can do an insert in a loop.
As Documented in JQuery .Val()
Description: Get the current value of the first element in the set of matched elements.
You can use
var values = $("input[name='questions[]']").map(function(){return $(this).val();}).get();
or
var values = [];
$("input[name='questions[]']").each(function() {
values.push($(this).val());
});
You can make use of jQuery's map() function to return the values as an array, like so:
var questions = $("input[name='questions[]']").map(function() {return $(this).val()}).get();
var types = $("select[name='type[]']").map(function() {return $(this).val()}).get();
$.ajax({
method: "POST",
url: "feedback_create_form_process.php",
data: {"questions": questions, "type": types},
success: function(data){
alert(data);
}
});
EDIT: Realizing a similar solution was provided by ABDU_GO. I find my script to be a bit more readable, however if you find this to be your solution, I'd suggest accepting his answer.

Removing dynamic dropdown options after JQuery AJAX request

I have a form that includes a dropdown box. This dropdown's options are filled dynamically, using PHP, from my database. When my form is submitted, the row containing the ticketId selected in the dropdown is removed from the database. What I would like is for, after the AJAX call is successful, have this list repopulate without the row that was just removed.
my form:
<form name="transferTicketForm" id="transferTicketForm">
<div class='form-group'>
<label for="ticket_number">Choose ticket:</label>
<select name="ticket_number" id="ticket_number" class="form-control">
<?php foreach ($assigned_tickets as $ticket): ?>
<option value="<?php echo($ticket->ticketId); ?>"><?php echo ($ticket->ticketId . " - " . $ticket->headline); ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="assignTo">Transfer to:</label>
<select name="assignTo" id="assignedTo" class="form-control">
<?php foreach($employees as $employee): ?>
<option value='<?php echo($employee->userId); ?>'><?php echo ($employee->firstName . " " . $employee->lastName);?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="transferComment">Comment:</label>
<textarea name="transferComment" id="transferComment" class="form-control"></textarea>
</div>
<div class="text-center">
<input class="btn btn-primary" type="button" id="doTransferTicketButton" value="Transfer Ticket">
</div>
</form>
my Ajax call:
$('#doTransferTicketButton').click(function(){
$.ajax({
type:'POST',
url:'<?php echo site_url();?>ticket_system/transfer_and_comment_ticket',
data:{
'assigned': $('#assignedTo').val(),
'comment': $('#transferComment').val(),
'ticketId': $('#ticket_number').val()
},
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#assigned').empty();
$('#transferTicketOptions').slideToggle();
}
});
});
Things I have tried:
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#ticket_number').empty();
$('#transferTicketOptions').slideToggle();
}
and
success: function(data){
$target_ticket = $('#ticket_number').val();
$('#ticket_' + $target_ticket).remove();
$('#ticket_number')[0].reset();
$('#transferTicketOptions').slideToggle();
}
Neither of which work for what I'm trying to do.
Any help would be greatly appreciated. Thank you!
First make your AJAX-file echo the ticket ID when removed. This ID will be passed to the success function. And on successs run:
success: function(data){
$("#ticket_number option[value=data]").remove();
}
The code is not testet, but i think it would work.

Get Option tag value in php

I've got this problem that I can't solve. Partly because I can't explain it with the right terms. I'm new to this so sorry for this clumsy question.
Below you can see an overview of my goal.
I'm using Magento CE 1.7.0.2
<div id="display">
<?php
if (sizeof($final_na)>0) {
$i = 0;
?>
<select size="5" class="auto-search" style="height:132px;width: 420px;padding:0px;" name="hero">
<?php foreach ($final_na as $key => $value) { ?>
<option style="text-align:center;padding: 5px 0 0;" value="<?php echo $final_na1[$i]; ?>" class="display_box" align="left" onclick="fill('<?php echo $value;?>')">
<?php echo $value; ?>
</option>
<?php $i++; ?>
<?php } ?>
</select>
<?php } ?>
</div>
<label for="description" class="rightgap"><?php echo Mage::helper('marketplacepartner')->__('Description') ?> :</label>
<textarea name="description" class="required-entry " id="description" rows="5" cols="75" ><?php echo $description?></textarea>
<label for="price" class="rightgap"><?php echo Mage::helper('marketplacepartner')->__('Price') ?> :</label>
<input type="price" class=" required-entry widthinput" name="price" id="price" value="<?php echo $price?>"/>
here i'm displaying a dropdown,based on my selection from this dropdown have to fill the remaining fields have to fill.
for example selected option value is 25 this is product id in my site based on that id values have to fill below like description,price....
for this i have to get that option value in one variable...
Using this script i'm getting the selected option value
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#display').click(function(){
var searchbox = $("#display :selected").val();
alert(searchbox);
});
});
</script>
but i can't store it in a variable in php
Any ideas ?
you can send the value of searchbox via json to targetfile.php
inside your click handler
$.ajax({
url: "targetfile.php",
type: "POST",
dataType : "json",
data: {"hero":searchbox},
success: function(data) {
// something that should happen after success
// data is filled with the output of targetfile.php (should be json)
}
});
do print_r($_POST); in targetfile.php to see what you get.
And take a look at the Console tab of firebug.
http://api.jquery.com/jQuery.ajax/

Categories