I have code like this which I executed from backend :
$statement = $PDO->prepare($query);
$statement->execute($parameters);
if($statement->rowCount()>0)
{
$resultSet = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach ($resultSet as $key => $value)
{
$return .= "<option value='".$resultSet[$key]['bwid']."'>".$resultSet[$key]['bname']." - ".$resultSet[$key]['final_count']."</option>";
}
}
else
{
$return = "<option>$lbldisp_text_nosuppfound</option>";
}
echo json_encode($return);
How do I put a label that says "choose branch" (i want it as the first option) ?
Thank you.
Just add a label tag and write your label text inside it.
$return .= "<label>choose branch</label>";
$return .= "<option value='".$resultSet[$key]['bwid']."'>".$resultSet[$key]['bname']." - ".$resultSet[$key]['final_count']."</option>";
Simply append your label to the $return variable
$return .= '<label>Write text here</label>';
$return .= "<option value='".$resultSet[$key]['bwid']."'>".$resultSet[$key]['bname']." - ".$resultSet[$key]['final_count']."</option>";
echo $return;
First, you have to add a element surrounding the options to have a valid html document.
Then you can add a disabled option in your select
if($statement->rowCount()>0){
$resultSet = $statement->fetchAll(PDO::FETCH_ASSOC);
$result = '<label>Choose your branch</label><select>'; //open the select and add the label
$result .= '<option selected disabled>Choose branch</option>'; // add a disabled option with label
foreach ($resultSet as $key => $value) {
$return .= "<option value='".$resultSet[$key]['bwid']."'>".$resultSet[$key]['bname']." - ".$resultSet[$key]['final_count']."</option>";
}
$result .= '</select>'; // close the select
} else {
$return = "<option>$lbldisp_text_nosuppfound</option>";
}
From what I understand you want to add a label "choose branch" to your select as the first option so it appears in the list not as a <label>. To achieve this you need to add a new option in the list but disable it and set it as selected.
Before you start adding the options to $return with the foreach loop add this line:
$return .= "<option selected disabled>choose branch</option>";
Hello #chrisjai32 try this out
<div id="part">
<label>choose branch</label>
<input type="text" id="" placeholder="Branch Name" autocomplete="off">
<input type="hidden" name="branch_id" id="branch_id">
<div id="branch_options">
<option value="0">--choose branch--</option>
<?php foreach("$branches as $b") { ?>
<option value="<?php echo $b->branch_id; ?>">
<?php echo $c->branch_name; ?>
</option>
<?php } ?>
</div>
</div>
#chrisjai32 this is the script of my above answer
<script>
$(document).ready(function(){
$(document).on("click", "#check_branches", function(e){
branch_id = $("#branch_id").val();
$.ajax({
type: "GET",
url: "<?php echo url('/'); ?>/check_branch/"+brand_id,
success:function(result){
$("#result").html("available " + result);
}
});
return false;
});
});
</script>
Related
Actually, I have a field name (industry) the problem is that I want to get two value from the database change of industry by jquery but how do I do this can't understand. Please help-
Here is my code-
<label>Select Type of Industry</label>
<select class="form-control" name="industry" id="industry" onchange="industry_id(this.value);" required="">
<option value="">------------------Select Your Industry----------------</option>
<?php
foreach ($industry as $key => $value) { ?>
<option value="<?= $value['id']; ?> "> <?= $value['industory']; ?></option>
<?php } ?>
</select>
</div>
<script>
function industry_id(value) {
$.get("<?php echo base_url()?>dive/getebitvalue/"+value,function (data) {
$("#ebit_name").html(data);
// alert(data);
});
}
</script>
one value I get easily but how to get second from the same id?
Here is my model---
function getebit()
{
$industry=$this->uri->segment(3);
$sql = $this->db->query('SELECT * FROM industry WHERE id='.$industry);
$result = $sql->result();
$html='';
foreach ($result as $data) {
$html.= "<option value='" . $data->ebit . "' >" . $data->ebit . "</option>";
}
echo $html;
}
}
and here is my controller--
function getebitvalue(){
$data['ebit']= $this->site_model->getebit();
}
Method getebitvalue in controller should be like this :
function getebitvalue()
{
$industry_id = $this->uri->segment(3);
$result = $this->site_model->getebit($industry_id);
$html='';
if ( !empty($result)){
foreach ($result as $item)
{
$edita[$key] = $item->edita;
$html.= "<option value='" . $item->ebit . "' >" . $item->ebit . "</option>";
}
$data['edita'] = $edita;
$data['html'] = $html;
print_r($data);
exit;
}
}
Here is your model---
function getebit($industry_id)
{
$sql = $this->db->query('SELECT * FROM industry WHERE id='.$industry);
$result = $sql->result();
return $result;
}
You can also do this-
view page-
<div class="form-group">
<label>Select Type of Industry</label>
<select class="form-control industryData" name="industry" id="industry" required="">
<option value="">------------------Select Your Industry----------------</option>
<?php
foreach ($industry as $value) { ?>
<option data1="<?php echo $value['ebitda']; ?>" data2="<?php echo $value['ebit']; ?>" value="<?= $value['id']; ?>"> <?= $value['industory']; ?></option>
<?php } ?>
</select>
</div>
model page-
function select($tbl,$con=''){
$this->db->select("*");
$this->db->from($tbl);
if(!empty($con))
$this->db->where($con);
$query = $this->db->get();
return $query->result();
}
controller page-
public function dive(){
$this->load->view('common/header');
$data['industry'] = $this->site_model->select('industry');
$this->load->view('dive/dive',$data);
$this->load->view('common/footer');
}
Now use jquery on your view page--
<script>
$(document).on("change", ".industryData", function () {
var value = $(this).val();
var data1 = $('.industryData option:selected ').attr('data1');
var data2 = $('.industryData option:selected ').attr('data2');
alert(data1);
});
</script>
I made a form with some dynamic/concatenated select in this way.
FORM HTML (index.php)
<form id="src_form" action="index.php" method="post">
<p>
<select name="catid_1" id="catid_1" class="fieldmax">
<?php echo $cs->show_cat_1(''); ?>
</select>
</p>
<p>
<select name="catid_2" id="catid_2" class="fieldmax">
<option value=""> </option>
</select>
</p>
<p>
<select name="catid_3" id="catid_3" class="fieldmax">
<option value=""> </option>
</select>
</p>
<p>
<input type="submit" name="submit" value="SRC" id="btn_src">
</p>
</form>
AJAX JS
$(function() {
// Ajax post Page
var urlpage = 'ajax-php/con-select.php';
// Vars
var wait = '<option value="">wait</option>';
var all = '<option value="">all</option>';
// Default
$("select#catid_2").prop("disabled", true);
$("select#catid_3").prop("disabled", true);
// CATID_1 Change
$("select#catid_1").change(function(){
// set var
var catid_1 = $("select#catid_1 option:selected").prop("value");
// laod
$("select#catid_2").html(wait);
$.post(urlpage,
{
catid_1:catid_1
},
function(data){
switch (data) {
case all:
$("select#catid_2").html("");
return false;
default:
$("select#catid_2").prop("disabled", false);
$("select#catid_2").html(data);
return false;
}
});
});
// CATID_2 Change ... etc
});
CON-SELECT.PHP
if(isset($_POST['catid_1']))
{
echo $cs->show_cat_2();
die;
}
if(isset($_POST['catid_2']));
{
echo $cs->show_cat_3();
die;
}
CLASS.PHP
public function show_cat_1()
{
$result = $this->db->mysqli->query
("SELECT * FROM cat_1 ORDER BY idcat_1 ASC");
$cat_1 = '<option value="">all</option>';
while($row = $result->fetch_assoc())
{
$cat_1 .= '<option value="' . $row['idcat_1'] . '"';
$cat_1 .= '>' . $row['idcat_1'] . '</option>';
}
return $cat_1;
}
public function show_cat_2()
{
$result = $this->db->mysqli->query
("SELECT * FROM cat_2 ORDER BY idcat_2 ASC");
$cat_2 = '<option value="">all</option>';
while($row = $result->fetch_assoc())
{
$cat_1 .= '<option value="' . $row['idcat_2'] . '"';
$cat_1 .= '>' . $row['idcat_2'] . '</option>';
}
return $cat_2;
}
etc..
my goal is to keep the choices (select value) in fields after submit the form (reload page) while maintaining their functionality. you can do it? how could I do that? thanks
I am fairly new to programming so if you can include explanations so I can learn as I go will be very appreciated.
Ok So I am making a drop down menu from sql tables and I am using php and Jquery. So far I have gotten my first sub menu which is states to populate from my country menu. Now I am getting confused on how to get my city menu to populate from my state menu.
Here is my main php file!
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#flip").click(function() {
jQuery("#panel").slideToggle("slow");
});
jQuery("#country").change(function() {
//jQuery("#address").val(jQuery("#courseid :selected").val());
var querystr = 'countryid='+jQuery('#country :selected').val();
jQuery.post("<?php echo plugins_url(); ?>/CountryStateCity Drop Down/ajax.php", querystr, function(data){
if(data.errorcode == 0){
jQuery('#statecbo').html(data.chtml)
//jQuery('#citydescr').append('<textarea name="citydescr" id="citydescr" cols="80" rows="3" maxlength="500"></textarea>')
}else{
jQuery('#statecbo').html(data.chtml)
}
}, "json");
});
});
</script>
<html>
<head>
<title>Dynamic Drop Down Menu</title>
</head>
<body>
<div class="wrap">
<h5> Country</h5>
<select id="country" name="country" required>
<option value="">--Select Country--</option>
<?php
$sql=mysql_query("SELECT * from country order by name");
while ($row=mysql_fetch_array($sql)) {
$countryID=$row['IDCountry'];
$countryname=$row['name'];
echo "<option value='$countryID'>$countryname</option>";
}
?>
</select>
</div>
<h5>State</h5>
<div class="wrap" id="statecbo">
</div>
<div class="wrap">
<h5>City</h5>
</div>
</body>
</html>
And here is my ajax.php file
$country_id = isset($_POST['countryid']) ? $_POST['countryid'] : 0;
if ($country_id <> 0) {
$errorcode = 0;
$strmsg = "";
$sql="SELECT * from state WHERE IDCountry = ". $country_id . " ORDER BY name;";
$result=mysql_query($sql);
$cont=mysql_num_rows($result);
if(mysql_num_rows($result)){
$chtml = '<select name="states" id="states"><option value="0">--Select State-- </option>';
while($row = mysql_fetch_array($result)){
$chtml .= '<option value="'.$row['IDState'].'">'.$row['name'].'</option>';
}
$chtml .= '</select>';
echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$chtml));
}else{
$errorcode = 1;
$strmsg = '<font style="color:#F00;">No States available</font>';
echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$strmsg));
}
}
So my next step would be to add a city menu that is populated by the state menu I just populated from the country menu. Sorry if that is confusing. Thanks!
Based of off jeroen response here is what I added to try and get the city drop down menu.
My main php file--
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#flip").click(function() {
jQuery("#panel").slideToggle("slow");
});
jQuery("#country").change(function() {
var querystr = 'countryid='+jQuery('#country :selected').val();
jQuery.post("<?php echo plugins_url(); ?>/CountryStateCity Drop Down/ajax.php", querystr, function(data){
if(data.errorcode == 0){
jQuery('#statecbo').html(data.chtml)
}else{
jQuery('#statecbo').html(data.chtml)
}
}, "json");
});
jquery(".wrap").on('change', '#states',function() {
var querystr = 'stateid=' +jQuery('#states :selected').val();
jquery.post("<?php echo plugins_url(); ?>/CountryStateCity Drop Down/ajax.php", querystr, function(data) {
if(data.errorcode ==0){
jQuery('#citycbo').html(data.chtml)
}else{
jQuery('#citycbo').html(data.chtml)
}
}, "json");
});
});
</script>
and my ajax.php file
$country_id = isset($_POST['countryid']) ? $_POST['countryid'] : 0;
if ($country_id <> 0) {
$errorcode = 0;
$strmsg = "";
$sql="SELECT * from state WHERE IDCountry = ". $country_id . " ORDER BY name;";
$result=mysql_query($sql);
$cont=mysql_num_rows($result);
if(mysql_num_rows($result)){
$chtml = '<select name="states" id="states"><option value="0">--Select State--</option>';
while($row = mysql_fetch_array($result)){
$chtml .= '<option value="'.$row['IDState'].'">'.$row['name'].'</option>';
}
$chtml .= '</select>';
echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$chtml));
}else{
$errorcode = 1;
$strmsg = '<font style="color:#F00;">No States available</font>';
echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$strmsg));
}
}
$state_id = isset($_POST['IDState']) ? $_POST['IDState'] : 0;
if ($state_id <> 0) {
$errorcode = 0;
$strmsg = "";
$sql="SELECT * from state WHERE IDState = ". $state_id . " ORDER BY name;";
$result=mysql_query($sql);
$cont=mysql_num_rows($result);
if(mysql_num_rows($result)){
$chtml = '<select name="city" id="city"><option value="0">--Select city-- </option>';
while($row = mysql_fetch_array($result)){
$chtml .= '<option value="'.$row['IDCity'].'">'.$row['name'].'</option>';
}
$chtml .= '</select>';
echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$chtml));
}else{
$errorcode = 1;
$strmsg = '<font style="color:#F00;">No city available</font>';
echo json_encode(array("errorcode"=>$errorcode,"chtml"=>$strmsg));
}
}
You basically do the same thing you have done with the country / states.
However, you are using the jQuery change() function so that will not work with elements that were not on the page when that function was registered.
You can solve that by using event delegation:
jQuery(".wrap").on('change', '#states', function() {
// do your stuff
}
I have used the .wrap element as that is the one that wraps your form elements, but you could also use document for example.
And you can of course use the same method for what you have already, just change:
jQuery("#country").change(function() {
to:
jQuery(".wrap").on('change', '#country', function() {
I am currently working with a dynamic dropdown menu(dependable select boxes). I am pulling the values straight from MySQL DB(if your curious here is how i have the DB SETUP). I am able to get the values of each table and display them accordingly. The problem I am having is echoing the SELECTED value of each selct box. I have a created JS function that will request postfile.php which will then echo the SELECTED value of each box. I am not getting anything echoed. I have checked with firebug but nothing is being posted.
How can I make this work? or Am I approaching this wrong? or Is there a better way? EXAMPLE
Working HTML/PHP
<?php
include ('includes/dbConnect.php');
try {
$pdo = get_database_connection();
$sql = "SELECT *
FROM `categories`
WHERE `master_id` = 0";
$statement = $pdo->query($sql);
$list = $statement->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
echo 'There was a problem';
}
?>
<select name="main" id="main" size="7" class="update">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="subc1" id="subc1" size="7" class="update" disabled="disabled" hidden="hidden">
<option value="">----</option>
</select>
<select name="subc2" id="subc2" size="7" class="update" disabled="disabled" hidden="hidden">
<option value="">----</option>
</select>
<select name="subc3" id="subc3" size="7" class="update" disabled="disabled" hidden="hidden">
<option value="">----</option>
</select>
JS
<script type="text/javascript">
$(document).ready(function () {
$('#main).change(function() {
if ($(this).val()!='
') {
$("#subc1").load("postfile.php",{main_id: $(this).val()});
//$("#subc1").removeAttr('
disabled hidden ');
}
});
//code on change of sel_source
$('#subc1 ').change(function() {
if ($(this).val()!='
') {
$("#subc2").load("postfile.php",{subc1_id: $(this).val()});
//$("#colour").removeAttr('
disabled ');
}
});
$('#subc2 ').change(function() {
if ($(this).val()!='
') {
$("#subc3").load("postfile.php",{subc2_id: $(this).val()});
//$("#colour").removeAttr('
disabled ');
}
});
});
</script>
PHP- postfile.php
if(isset($_REQUEST['main_id']) && !empty($_REQUEST['main_id'])) {
try {
include ('../includes/dbConnect.php');
$pdo = get_database_connection();
$sql = ("select * from `categories` where id='".$_REQUEST['main_id']."' ");
$result = $con->prepare($sql);
$result->execute();
$number_of_rows = $result->fetchColumn();
}catch(PDOException $e) {
echo 'There was a problem';
}
if($number_of_rows > 0) {
$output = '<option value="">Select</option>';
while($row = mysql_fetch_assoc($result)) {
$output .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
} else {
$output = '<option value="">Select</option>';
}
echo $output;
}
if(isset($_REQUEST['subc1_id']) && !empty($_REQUEST['subc1_id'])) {
$result = mysql_query("select * from table where id='".$_REQUEST['subc1_id']."' ");
if($number_of_rows > 0) {
$output = '<option value="">Select</option>';
while($row = mysql_fetch_assoc($result)) {
$output .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
} else {
$output = '<option value="">Select</option>';
}
echo $output;
}
if(isset($_REQUEST['subc2_id']) && !empty($_REQUEST['subc2_id'])) {
$result = mysql_query("select * from table where id='".$_REQUEST['subc2_id']."' ");
if($number_of_rows > 0) {
$output = '<option value="">Select</option>';
while($row = mysql_fetch_assoc($result)) {
$output .= '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
} else {
$output = '<option value="">Select</option>';
}
echo $output;
}
Maybe you would like to use jQuery UI auto-complete. It is easier to use and less code. It has a remote data source also. Try this one, maybe this can solve your problem. http://jqueryui.com/demos/autocomplete/
Add on submit action to the form. In the function use the following:
var Myvar = $('#subc3 :selected').text();
I have a SELECT input that gets all of its options via the database. Below the select input, there are divs created for each option in the select. I want the user to select an option from the drop down and make the div below display. So basically the drop down are sports, and if they make a selection the sport div hidden below will load, and that div will contain all the sport positions
<select name="sport" id="select">
<?
foreach ($getSports as $row) {
echo '<option onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()" value="' . $row['0'] . '">' . $row['1'] . '</option>';
}
?>
</select>
</label>
<?
foreach ($getSports as $row) {
echo '<div id="position' . $row['1'].'" style="margin-top: 5px;display:none;">Positions:' . $row['1'].'';
$sport = $row['0'];
$getPositions = $model->getPositions($sport);
foreach ($getPositions as $row2) {
echo '<label style="float:right">'.$row2['1'].'</label>';
echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">';
}
echo '</div>';
}
?>
How about modifying your code like this? Seems to be more semantic:
<select name="sport" id="select">
<? foreach ($getSports as $row) {
echo '<option data-row-id="'.$row['1'].'" value="'.$row['0'].'">'.$row['1'].'</option>';
} ?>
</select>
</label>
<? foreach ($getSports as $row) {
echo '<div data-position="'.$row['1'].'" style="margin-top:5px;display:none;">Positions:' . $row['1'].'';
$sport = $row['0'];
$getPositions = $model->getPositions($sport);
foreach ($getPositions as $row2) {
echo '<label style="float:right">'.$row2['1'].'</label>';
echo '<input type="checkbox" name="'.$row2['1'].'" value="'.$row2['0'].'">';
}
echo '</div>';
}?>
<script>
$(function() {//create the binding once the document is ready
$('#select').change(function() {
var select = $(this);
var selectedOption = select.find(':selected');
var position = selectedOption.attr('data-row-id');
var divContext = $('[data-position="'+position+'"]');
$('[data-position]').not(divContext).hide();
divContext.show();
});
});
</script>
If you want to keep visible only the selected sport, I suggest this.
(1) add a class to the div which holds sports information - ex. class="sportsHolder"
(2) change this part
onClick="toggle'.$row['1'].'()" onLoad="toggle'.$row['1'].'()"
to
onClick="toggle('.$row['1'].');" onLoad="toggle('.$row['1'].');"
(3) create the function
<script type="text/javascript">
function toggle(whichPos) {
$(".sportsHolder").hide();
$("#position" + whichPos).show();
}
</script>
at least I would do it that way.