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/
Related
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>
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 }
I am trying to implement dependent dropdown using ajax and php. But anyhow the response from second dropdown is not coming. after checking in console, I am able to see the id of first dropdown but no response from second dropdown. So, When i click on first dropdown, I just get a blank value in Second dropdown.
HTML Code
<div class="col-md-6">
<?php
require_once('db.php');
$varient_result = $conn->query('select * from tv_varient');
?>
<select name="varient" id="varient-list" class="form-control c-square c-theme" required>
<option value="">Select Varient</option>
<?php
if ($varient_result->num_rows > 0) {
// output data of each row
while($row = $varient_result->fetch_assoc()) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
<?php
}
}
?>
</select>
</div>
</br></br>
<label for="inputPassword3" class="col-md-4 control-label" style="margin-left: 15px;">Price:</label>
<div class="col-md-6">
<select name="price" id="price-list" class="form-control c-square c-theme" required>
<option value=''>Select Price *</option>
</select>
<div>
</div>
</div>
</div>
</div>
</div>
AJAX Code
<script>
$('#varient-list').on('change', function(){
var varient_id = this.value;
$.ajax({
type: "POST",
url: "get_price.php",
data:'varient_id='+varient_id,
success: function(result){
$("#price-list").html(result);
}
});
});
</script>
get_price.php
?php
require_once('db.php');
//$country_id = mysqli_real_escape_string($_POST['country_id']);
//var_dump($country_id);
//var_dump($_POST['country_id']);
$varient_id = $_POST['veriant_id'];
echo $varient_id;
//var_dump($varient_id);
var_dump($_POST['varient_id']);
if($varient_id!='')
{
$states_result = $conn->query('select * from tv_price where veriant_id='.$varient_id.'');
$options = "<option value=''>Select Price</option>";
while($row = $states_result->fetch_assoc()) {
$options .= "<option value='".$row['price']."'>".$row['price']."</option>";
}
echo $options;
}
?>
Try below code,
$(document).on('change', '#varient-list', function(e)
{
var varient_id = this.value;
$.ajax({
type: "POST",
url: "get_price.php",
data:'varient_id='+varient_id,
success: function(result){
$("#price-list").html(result);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
varient_id & veriant_id on the POST is wrong (the e & a difference).
$varient_id = $_POST['veriant_id']; should be $varient_id = $_POST['varient_id'];
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.
I have a drop down list which is dynamically generated using ajax on page load.
On the other hand I have a php variable which contains the value to be selected by default.
However, when Iam trying to do this it isn't selecting the value. Following is code:
HTML & PHP
<h1>Venue: Edit</h1>
<< Back to Venue List
<br />
<form method="post" id="venueEdit" action="<?php echo URL;?>venue/editSave/<?php echo $this->venue['id']; ?>">
<fieldset>
<p>
<label for="cvenue" class="main">Venue</label>
<input id="cvenue" class="required" type="text" name="venue" value="<?php echo $this->venue['name']; ?>" />
</p>
<p>
<label for="ccity" class="main">City</label>
<input id="ccity" class="required" type="text" name="city" value="<?php echo $this->venue['city']; ?>" />
</p>
<p>
<label for="ccountry" class="main">Country</label>
<select id="ccountry" class="required" name="country">
<option value="">-- Select Country --</option>
</select>
</p>
<p>
<label class="main"> </label><input type="submit" value="Save" />
</p>
</fieldset>
</form>
JS:
function populateCountryDropDown(url){
$.get(url, function(o) {
for(var i = 0; i < o.length; i++){
$('select[name="country"]').append('<option value="' + o[i].id + '">' + o[i].name + "</option>");
}
}, 'json');
}
$(document).ready(function(){
populateCountryDropDown('<?php echo URL; ?>' + 'country/xhrGetCountryList');
$('select[name="country"]').val('<?php echo $this->venue['countryid']; ?>');
$("#venueEdit").validate();
});
I tried to alert the php value and it's ok but if I alert the select option value it's always null as at that point it's still populating the drop down list. I don't know how to solve this. Would appreciate your guys help? Thanks.
You need to move your code to set the value into the callback, to trigger the value being set after the AJAX call fired off by $.get() returns.
function populateCountryDropDown(url){
$.get(url, function(o) {
for(var i = 0; i < o.length; i++){
$('select[name="country"]').append('<option value="' + o[i].id + '">' + o[i].name + "</option>");
}
$('select[name="country"]').val('<?php echo $this->venue['countryid']; ?>');
$("#venueEdit").validate();
}, 'json');
}
$(document).ready(function(){
populateCountryDropDown('<?php echo URL; ?>' + 'country/xhrGetCountryList');
});
This code here:
$('select[name="country"]').val('<?php echo $this->venue['countryid']; ?>');
Try changing to:
$('select[name="country"]').val('<?php echo $this->venue["countryid"]; ?>'); // Double quotes around countryid vs the single quote.