I have the following HTML code that allows me to select two items from select dropdown options;
Now, after selecting the two items, say, I select accommodation as my form and Kampala as my district, I want the total number of available possible results, for example, "25 results were found", to be automatically displayed.
The problem I have is that only the results for one selection are displayed with the other being shown as undefined notice. Any assistance please.
<!-- here is the html script for selecting options -->
<form id="analysis_formId" method="POST">
<label>select form</label>
<select id="selectformId" name="selectform" class="select_elements">
<option value="afc">accommodation form</option>
<option value="rtt">tour and travel form</option>
</select>
<label>select district</label>
<select id="selectdistrictsId" name="selectdistricts" class="select_elements">
<option value="alldistricts">All districts</option>
<option value="kampala">kampala</option>
<option value="wakiso">wakiso</option>
</select>
</form>
<!-- displaying results from count.php -->
<p><span id="inspection_result"></span></p>
This the script that gets the class names of the select elements and runs the onChange event.
<script>
var selections = document.getElementsByClassName("select_elements");
function onchangefunction(){
var selectedstring = (this.options[this.selectedIndex].value);
$("#inspection_result").html('checking...');
$.ajax({
type:'POST',
url:'count.php',
data:$(this).serialize(),
success:function(data)
{
$("#inspection_result").html(data);
}
});
}
for (var i = 0, l = selections.length; i < l; i++) {
selections[i].onchange = onchangefunction;
}
</script>
Here is count.php for querying the results from MySQL
if($_POST)
{
$formtype = strip_tags($_POST['selectform']);
$selectdistricts = strip_tags($_POST['selectdistricts']);
$fetchallforms22 = $conn->prepare("select count(indexId) as numafcrtt2
from registered_companies where company_form_type=:formtype and company_district=:selectdistricts");
$fetchallforms22->execute(array(':formtype'=>$formtype, ':selectdistricts'=>$selectdistricts));
$display22 = $fetchallforms22->fetchObject();
if($display22){
echo $display22->numafcrtt2." "."results available";
}
else
{
echo $display22->numafcrtt2." "."results available";
}
}//POST
Maybe no results for this query, chech it:
if (!empty(display2) ){
..... // DO something
}
Related
For my code i need 2 selects, the first select is static (4 options that dont change) and the second select is dependant on what is selected in the first select.
Then depending on what is chosen in de the second list a function is executed.
i found some example code one W3schools that allow me to make the whole list thing:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_options3
So this works really well but now i dont know how to attach a function to the selected options in the second select since there is no where in the html to do something like an onchange.
Each option from the second select should have a function (in my code the selected option will display an image corresponding with the chosen option)
<!DOCTYPE html>
<html>
<body>
<select id="car" onchange="ChangeCarList()">
<option value="">-- Car --</option>
<option value="VO">Volvo</option>
<option value="VW">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
<select id="carmodel"></select>
<script>
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
</script>
</body>
</html>
We have e commerce shopping site with many products.
We have lot of Designers , each Designer is owner of multiple products.
We are displaying Designers in dropdown , once we select Designers , than we can select Orders of those Designers , once we select Orders, than we can select related products.
Basically we are selecting all 3 dropdown fields and submitting form and saving values in database.
1. If order contains products of only one designer , after we select those products and submit form, than again if we select same Designer , previously selected Order will not visible. Thats fine.
Ex: here you can see we selected "kidsdial2" as Designer and order "100000142" and submit form
so when we select "kidsdial2" next time, we can't see order "100000142"
2. If order contains products of only multiple designers , after we select those products and submit form, than again if we select same Designer previously selected Order is Still visible. But we want to hide "Order" here also. this is the issue.
Ex : here order "100000141" contains products of multiple designers. so we selected Designer "kidsdial2" & order "100000141" and selected products and submit form.
when we select "kidsdial2" next time, we don't want to see order "100000142".
html
<form action="update_paidstatus.php" id="" onsubmit="return validate(); ">
<select onchange="getOrderDetail(event);" name="designer_id" id="designer_id">
<option value="">Select Designer</option>
<?php
while($data = $stmt->fetch())
{
if($data['type']=="admin")continue;
?>
<option value="<?php echo $data['userID'];?>">
<?php
echo $data['name'];
?>
</option>
<?php } ?>
</select>
<div id="ordernumbers">
<select name="designerorder_id" id="designerorder_id" class="designerorder_id" onchange='getProductDetail(this.value)'>
<option value="">Select Order</option>
</select>
</div>
<div id="productnumbers" name="dproduct_id" id="dproduct_id">
<select id="mySelect">
<option>Select Products</option>
</select>
</div>
</form>
script
function getOrderDetail(e)
{
var designerId=e.target.options[e.target.selectedIndex].value;
var url="http://sbdev2.kidsdial.com:81/php/site6/designerpaidstatus.php?designer_id="+designerId+"&opration=2";
var request = jQuery.ajax( {
url: url ,
type: 'POST',
} );
request.done( function (result)
{
//document.getElementById('ordernumbers').innerHTML =result;
$(".designerorder_id").html(result);
} );
request.fail( function ( error )
{
console.dir(error);
} );
}
php
require_once '../../app/Mage.php';
Mage::app();
$order = Mage::getModel('sales/order')->getCollection()->addAttributeToFilter('designer_id',array('like' => '%'.$id.'%'));
$htmltext='<select>';
$htmltext.="<option value=''>Select Order</option>";
foreach ($order as $orderData)
{
$data=array();
$sqlq1="select dproduct_id from order_details where designer_id='".$id."' and designerorder_id='".$orderData->getIncrementId()."'";
$sqlq=mysqli_query($conVar,$sqlq1);
while($rdata=mysqli_fetch_assoc($sqlq))
{
$data[]=$rdata['dproduct_id'];
}
$orderitems=$orderData->getData('dproduct_id');
$oitem=explode(',',$orderitems);
$finalValue=$orderData->getIncrementId()."-".$orderitemsarray[$k];
$result=array_diff($oitem,$data);
$result1=implode(',',$result);
if(count($result)>1)
{
$result2=array();
foreach($result as $product)
{
$_product = Mage::getModel('catalog/product')->load($product);
$_productDesignerId = $_product->getDesignerId();
if(trim($_productDesignerId) == trim($id))
{
$result2[] = trim($product);
}
}
$result2=implode(',',$result2);
$htmltext=$htmltext.'<option class="'.$result2.'" name="'.$result2.'" value="'.$orderData->getIncrementId().'">'. $orderData->getIncrementId().'</option>';
}
}
$htmltext=$htmltext."</select>";
echo $htmltext;exit;
sample database :
Edit - update_paidstatus.php
$newURL="http://sbdev2.kidsdial.com:81/php/site6/paidstatus.php";
if(isset($_POST) && $_POST!="" && !empty($_POST)){ // checking if form submision is occured or not.
$sucessFlag=true;
$productIds=explode(",",$_POST['dproduct_id']);
$oDate = new DateTime($_POST['dueDate']);
$sDate = $oDate->format("Y-m-d");
if(isset($conVar) && !empty($conVar) && $conVar!="")
{
for ($i=0; $i< count($productIds); $i++) {
$sqlQueryToUpdate="INSERT INTO order_details ( designer_id,designerorder_id,dproduct_id,dpaid_status,delivery_status,due_date) VALUES('".$_POST['designer_id']."','".$_POST['designerorder_id']."','".$productIds[$i]."','".$_POST['PaidStatus']."','".$_POST['PaidStatus']."','".$sDate."')";
$sucessFlag=mysqli_query($conVar,$sqlQueryToUpdate);
if($sucessFlag==TRUE)
{
echo "UPDATE SUCESSFULLY";
}
else
{
echo " not done.";
}
}
header('Location: '.$newURL);
}
}
?>
Consider there are two designers D1 and D2.
Products P11 and P12 belongs to D1 and products P21 and P22 belongs to D2
Now there is an order O1 which has products P11 and P22
Check the inline comments.
// fetches all order for the particular designer. Try to use = condition rather than like if possible.
// So as per our eg; If Desginer = D1 then it will return O1
$order = Mage::getModel('sales/order')->getCollection()->addAttributeToFilter('designer_id',array('like' => '%'.$id.'%'));
$htmltext='<select>';
$htmltext.="<option value=''>Select Order</option>";
foreach ($order as $orderData)
{
$data=array();
// Will fetch the product id based on the designer id and desginer order id
// So in our eg: It will return only P1 since P2 is linked to D2
$sqlq1="select dproduct_id from order_details where designer_id='".$id."' and designerorder_id='".$orderData->getIncrementId()."'";
$sqlq=mysqli_query($conVar,$sqlq1);
while($rdata=mysqli_fetch_assoc($sqlq))
{
$data[]=$rdata['dproduct_id']; //P1
}
$orderitems=$orderData->getData('dproduct_id');
$oitem=explode(',',$orderitems); // [P1,P2]
$finalValue=$orderData->getIncrementId()."-".$orderitemsarray[$k];
$result=array_diff($oitem,$data); //P2
$result1=implode(',',$result);
if(count($result)>1)
{
$result2=array();
foreach($result as $product)
{
$_product = Mage::getModel('catalog/product')->load($product);
$_productDesignerId = $_product->getDesignerId();
if(trim($_productDesignerId) == trim($id))
{
$result2[] = trim($product);
}
}
$result2=implode(',',$result2);
$htmltext=$htmltext.'<option class="'.$result2.'" name="'.$result2.'" value="'.$orderData->getIncrementId().'">'. $orderData->getIncrementId().'</option>'; //order data gets appended
}
}
$htmltext=$htmltext."</select>";
echo $htmltext;exit; //order id with P2
This is my main page where I select a option field.
opt1.php:
<html>
<div>
<select id="mn" onchange = "show(this.id)" >
<option value="3">hello</option>
<option value="4">hiii</option>
<option value="5">byee</option>
</select>
</div>
<?php include 'OPT2.php'?>
</html>
This is my javascript where I get the value from above select and pass to opt2.php
function show(s1){
var s1 = document.getElementById(s1);
var ch = s1.value;
$.post('OPT2.php', {variable: ch});
}
This is my opt2.php page to display the sub select.
<?php
$con = #$_POST['ch'];
echo "SELECT MODEL:<select id=sb name=sb >";
echo "<option name=$con>$con</option>";
echo "</select>";
?>
Actually this is not generating the intended result.
Is there any logical or processing mistake?
you need to make ajax call to opt2.php to get that data
so your opt1.php should look like
<html>
<div>
<select id="s1" onchange = "show(this.id)" >
<option value="3">hello</option>
<option value="4">hiii</option>
<option value="5">byee</option>
</select>
<select id="s2">
<option>--</option>
</select>
</div>
<?php include 'OPT2.php'?>
</html>
and your javascript
<script type="text/javascript">
$("#s1").change(function(){
$('#s2').find('option').remove().end(); //clear the city ddl
var block_no = $(this).find("option:selected").text();
var s1 = document.getElementById(s1);
var ch = s1.value;
//do the ajax call
$.ajax({
url:'OPT2.php',
type:'GET',
data:{variable:s1},
dataType:'json',
cache:false,
success:function(data)
{
//data=JSON.parse(data); //no need if dataType is set to json
var ddl = document.getElementById('s2');
for(var c=0;c<data.length;c++)
{
var option = document.createElement('option');
option.value = data[c];
option.text = data[c];
ddl.appendChild(option);
}
},
error:function(jxhr){
alert("Pls Reload the page");
}
});
});
i have one div for duel multiselect of provinces list which when i click on every option it is moved to another box(user can select several provinces).
and another div for duel multiselect of districts.
<div>
<select multiple class="multiselect" id="province" name="province">
<?PHP foreach($provinces->result() as $province){ ?>
<option value="<?=$province->id?>"><?=$province->name?></option>
<?PHP } ?>
</select>
</div>
<div id="district_div">
<select multiple class="multiselect" id="district" name="district" >
</select>
</div>
the list of province is correct and user can select multi provinces.
but what i need is an onchange in province select tag to bring the districts of selected province and put them in district_div.
i have the ajax for onchange to bring the districts:
function bring_page(page,name,id,divname,str)
{
var dropdownIndex = document.getElementById(name).selectedIndex;
var dropdownValue = document.getElementById(name)[dropdownIndex].value;
var url=page;
var params='&'+id+'='+dropdownValue+'&'+str;
//call ajax
makerequest_sp(url, params, divname);
}
the function bring_page is correct and work for normal select.
i think the problem is with bootstrap.
i am using plugins of bootstrap.
thanks for help
You need to get the values of the options in a loop because you will have multiple. I don't know how your backend is expecting the data, but something like this could work.
function bring_page(page, name, id, divname, str) {
var url=page;
var params = "&" + id +"=";
var dropdown = document.getElementById(name);
var options = dropdown.options;
var values = [];
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
values.push(options[i].value);
}
}
params += values.join(",");
//call ajax
makerequest_sp(url, params, divname);
}
I'm integrating Postcode anywhere with my web project. I'm using a drop drop for the county/state field. Postcode anywhere returns the name of the County. Can I change the Selected Index when I only have the name? (I'm using a number for the value field which relates to a database field).
I tried the following:
var f = document.getElementById("state_dropdown");
f.options.[f.selectedIndex].text = response[0].County;
I've tried to include the drop down code html here but I can't get it to work properly for some reason.
But of course this just changes the text field for the item in the drop down that is already selected.
I can query the database and find out what ID I have assigned the county but I'd rather not if there is another way.
Loop over the options until you have a match:
for (var i = 0; i < f.options.length; i++) {
if (f.options[i].text == response[0].Country) {
f.options.selectedIndex = i;
break;
}
}
Demo.
I would make a function and loop over the labels:
See: http://jsfiddle.net/Y3kYH/
<select id="country" name="countryselect" size="1">
<option value="1230">A</option>
<option value="1010">B</option>
<option value="1213">C</option>
<option value="1013">D</option>
</select>
JavaScript
function selectElementByName(id, name) {
f = document.getElementById(id);
for(i=0;i<f.options.length;i++){
if(f.options[i].label == name){
f.options.selectedIndex = i;
break;
}
}
}
selectElementByName("country","B");
Just a variation on other answers:
<script type="text/javascript">
function setValue(el, value) {
var sel = el.form.sel0;
var i = sel.options.length;
while (i--) {
sel.options[i].selected = sel.options[i].text == value;
}
}
</script>
<form>
<select name="sel0">
<option value="0" selected>China
<option value="1">Russia
</select>
<button type="button" onclick="setValue(this, 'Russia');">Set to Russia</button>
<input type="reset">
</form>