Develop Reference

Can someone help me to display my filter search correctly and also i'm unable to find my error?

//this is my productContent1.php file,i want to display product filter search options to allow users to search product with filter.I included class Product.php and then call methods to display filter options values from MySQL database table vehicle
<div class="products">
<?php
include 'class/Product.php';
$product = new Product();
?>
<div class="container">
<div class="row">
<form class="form-inline" action=action.php" method="POST">
<label>Type:</label>
<select name="Type" id="type" required>
<?php
$type = $product->gettype();
foreach($Type as $typeDetails){
?>
<optgroup label="Type" value="<?php echo $typeDetails["type"]; ?>" > <?php echo $typeDetails["type"]; ?>
<option value="">-- All --</option>
<option value="">-- Motorcycles --</option>
<option value="">-- Mini-Trucks --</option>
<option value="">-- Vans --</option>
<option value="">-- Cars --</option>
</select>
<?php
}
?>
<label>Make:</label>
<select name="Make" id="make" required>
<?php
$make = $product->getmake();
foreach($Make as $makeDetails){
?>
<optgroup label="Make" value="<?php echo $makeDetails["make"]; ?>" > <?php echo $makeDetails["make"]; ?>
<option value="">-- All --</option>
<option value="">-- Suzuki --</option>
<option value="">-- Honda --</option>
<option value="">-- Yamaha --</option>
<option value="">-- Toyota --</option>
<option value="">-- Nissan --</option>
<option value="">-- Mitsubishi --</option>
<option value="">-- Mazda --</option>
</select>
<?php
}
?>
<label>Price:</label>
<select name="Price" id="price" required>
<?php
$price = $product->getprice();
foreach($price as $priceDetails){
?>
<optgroup label="Price" value="<?php echo $priceDetails["price"]; ?>" > <?php echo $priceDetails["price"]; ?>
<option value="">-- All --</option>
<option value="">-- 0-10000 --</option>
<option value="">-- 10000-50000 --</option>
<option value="">-- 50000-500000 --</option>
<option value="">-- >500000 --</option>
</select>
<?php
}
?>
<label> Size:</label>
<select name="Size" id="size" required>
<?php
$size = $product->getsize();
foreach($size as $sizeDetails){
?>
<optgroup label="Size" value="<?php echo $sizeDetails["size"]; ?>" > <?php echo $sizeDetails["size"]; ?>
<option value="">-- All --</option>
<option value="">-- Small --</option>
<option value="">-- Medium --</option>
<option value="">-- Large --</option>
</select>
<?php
}
?>
<label> Color:</label>
<select name="Color" id="color" required>
<?php
$color = $product->getcolor();
foreach($color as $ColorDetails){
?>
<optgroup label="Color" value="<?php echo $colorDetails["color"]; ?>" > <?php echo $colorDetails["color"]; ?>
<option value="">-- All --</option>
<option value="">-- Red --</option>
<option value="">-- Blue --</option>
<option value="">-- White --</option>
<option value="">-- Black --</option>
<option value="">-- Grey --</option>
<option value="">-- Silver --</option>
<option value="">-- Orange --</option>
</select>
<?php
}
?>
<button type="submit" class="filled-button btn-block">Search</button>
</form>
<div class="col md-6">
<div class="row">
<div class="col-md-3">
<div class="product-item">
<img src="images/Toyota allion.jpg" alt="Toyota Allion">
<div class="card-footer">
<div class="card-title"><h3>Toyota Allion</h3></div>
<div class="card-price"><h3>Rs 850 000</h3></div>
<p class="card-text"><small class="text-muted">Available in white only</small></p>
<small>
<strong title="Author"><i class="fa fa-dashboard"></i>53 000km</strong>
<strong title="Author"><i class="fa fa-cube"></i>1600cc</strong>
<strong title="Views"><i class="fa fa-cog"></i>Automatic</strong>
</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product-item">
<img src="images/Toyota axio.jpg" alt="Toyota Axio">
<div class="card-footer">
<div class="card-title"><h3>Toyota Axio</h3></div>
<div class="card-price"><h3>Rs 750 000</h3></div>
<p class="card-text"><small class="text-muted">Available in white only</small></p>
<small>
<strong title="Author"><i class="fa fa-dashboard"></i>25 453km</strong>
<strong title="Author"><i class="fa fa-cube"></i>1500cc</strong>
<strong title="Views"><i class="fa fa-cog"></i>Automatic</strong>
</small>
</div>
</div>
</div>
<div class="col-md-12">
<ul class="pages">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li></li>
</ul>
</div>
</div>
</div>
//in action.phpI included class Product.php and call method $product->searchProducts() to get search result HTML and passed as JSON response using json_encode.
<?php
include 'class/Product.php';
$product = new Product();
if(isset($_POST["action"])){
$html = $product->searchProducts($_POST);
$data = array(
"html" => $html,
);
echo json_encode($data);
}
?>
//Product.php to define method searchProducts(), to get product filter search data from MySQL database table.I created SELECT query with filter search options and get data. Then create result HTML with result data and return as complete search result HTML.
<?php
function searchProducts(){
$sqlQuery = "SELECT * FROM ".$this->productTable;
if(isset($_POST["type"])) {
$typeFilterData = implode("','", $_POST["type"]);
$sqlQuery .= "
AND type IN('".$typeFilterData."')";
}
if(isset($_POST["make"])){
$makeFilterData = implode("','", $_POST["make"]);
$sqlQuery .= "
AND make IN('".$makeFilterData."')";
}
if(isset($_POST["price"])) {
$priceFilterData = implode("','", $_POST["price"]);
$sqlQuery .= "
AND price IN('".$priceFilterData."')";
}
if(isset($_POST["size"])) {
$sizeFilterData = implode("','", $_POST["size"]);
$sqlQuery .= "
AND size IN('".$sizeFilterData."')";
}
if(isset($_POST["color"])) {
$colorFilterData = implode("','", $_POST["color"]);
$sqlQuery .= "
AND color IN('".$colorFilterData."')";
}
$sqlQuery .= " ORDER By price";
$result = mysqli_query($this->dbConnect, $sqlQuery);
$totalResult = mysqli_num_rows($result);
$searchResultHTML = '';
if($totalResult > 0) {
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
$searchResultHTML .= '';
}
}
else {
$searchResultHTML = '<h3>No product found.</h3>';
}
return $searchResultHTML;
}
?>
//search.js to define a function filterSearch() to make Ajax request according to filter search option display search result. The Ajax request made to action.php to load search data from MySQL database table as JSON response.
function filterSearch() {
$('.searchResult').html('<div id="loading">Loading .....</div>');
var action = 'fetch_data';
var type = getFilterData('type');
var make = getFilterData('make');
var price = getFilterData('price');
var size = getFilterData('size');
var color = getFilterData('color');
$.ajax({
url:"action.php",
method:"POST",
dataType: "json",
data:{action:action, type:type, make:make, price:price, size:size, color:color},
success:function(data){
$('.searchResult').html(data.html);
}
});
}

How to add superscript in option tag select dropdown 1st 2nd 3rd 4th 5th. 1ST I want S captial letters but i tried s will converted to small case

I used below code. But 1st --> returns 1sT --> I need 1ST
<option value="1ST"
<?php if (in_array("1ST", $_POST['pay_day'])) echo selected; ?>
> 1ˢᵀ </option>
<option value="2ND"
<?php if (in_array("2ND", $_POST['pay_day'])) echo selected; ?>
> 2ᴺᴰ </option>
<option value="3RD"
<?php if (in_array("3RD", $_POST['pay_day'])) echo selected; ?>
> 3ᴿᴰ </option>
<option value="4TH"
<?php if (in_array("4TH", $_POST['pay_day'])) echo selected; ?>
> 4ᵀᴴ </option>
<option value="5TH"
<?php if (in_array("5TH", $_POST['pay_day'])) echo selected; ?>
> 5ᵀᴴ </option>
Please help

<option value="1ST" <?php if (in_array("1ST", $_POST['pay_day'])) echo selected; ?> > 1<span style="text-transform: capitalize;">ˢᵀ</span></option>
<option value="2ND" <?php if (in_array("2ND", $_POST['pay_day'])) echo selected; ?> > 2<span style="text-transform: capitalize;">ᴺᴰ</span> </option>
<option value="3RD" <?php if (in_array("3RD", $_POST['pay_day'])) echo selected; ?> > 3<span style="text-transform: capitalize;">ᴿᴰ</span> </option>
<option value="4TH" <?php if (in_array("4TH", $_POST['pay_day'])) echo selected; ?> > 4<span style="text-transform: capitalize;">ᵀᴴ</span> </option>
<option value="5TH" <?php if (in_array("5TH", $_POST['pay_day'])) echo selected; ?> > 5<span style="text-transform: capitalize;">ᵀᴴ</span> </option>

jQuery set and trigger option value based on the input

i am using https://www.geodata.solutions/ for getting country,state,city list
And everything is working fine and i am able to save the data to databse
<select name="country" class="countries" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>
Now i have to show the user to selected option
if $country , $state, $city are the details i fetched from the data base
so i change the html to following
<select name="country" class="countries" id="countryId">
<?php if($country!==""){?>
<option value="<?php echo $country; ?>" selected><?php echo $country; ?></option>
<?php } else { ?>
<option value="">Select Country</option>
<?php } ?>
</select>
<select name="state" class="states" id="stateId">
<?php if($state!==""){?>
<option value="<?php echo $state; ?>" selected><?php echo $state; ?>
</option>
<?php } else { ?>
<option value="">Select State</option>
<?php } ?>
</select>
<select name="city" class="cities" id="cityId">
<?php if($city!==""){?>
<option value="<?php echo $city; ?>" selected><?php echo $city; ?>
</option>
<?php } else { ?>
<option value="">Select City</option>
<?php } ?>
</select>
But Now the this is they are not ablue to change the dropdown . How can i solve this
i tried this also
<script>
jQuery(function($){
<?php if($country!==""){?>
var mySelect=$("#countryId");
mySelect.append(
$('<option value="<?php echo $country;?>" selected><?php echo
$country;?></option>'));
$('#countryId').trigger('change');
<?php } ?>
});
</script>
2) Question
I am checking for something that can integrate the country flag with the phone number field and i found https://intl-tel-input.com/. But now i have to select the country phone code automatically as per user change the country dropdown list in the fist select box . If there is any way we can make these each related ?

On change trigger id imported with ajax

I have a small script, I did not made it, I want to modify it but Im stuck.
There are two select options, state and city. When state is selected ajax is bringing the specific cities for that state.
I have default value both for state and city but I cant trigger the city to change.
Here is the javascript
$("#state_id").change(function() {
$.ajax({
url: "<?php echo base_url() . "ajaxreq/getcity/"; ?>" + $("#state_id").val(),
success: function(result) {
$("#ajaxcity").html(result);
}
});
});
$('#state_id').trigger('change');
This is html part:
<div class="logininputfield">
<label><?php echo $this->lang->line('region') ?><span>*</span></label>
<div class="inputfieldsection">
<select name="state_id" id="state_id">
<option value=""><?= $this->lang->line("please_select"); ?> </option>
<?php foreach ($state as $key => $state_name) { ?>
<option value="<?php echo $key; ?>" <?php if ($state_id == $key ) { ?> selected <?php } ?> ><?php echo $state_name; ?></option>
<?php } ?>
</select>
<span for="state_id" class="error"></span>
</div>
</div>
<div class="logininputfield">
<label><?php echo $this->lang->line('city') ?><span>*</span></label>
<div class="inputfieldsection">
<span id="ajaxcity">
<select name="city" id="city" class="input span6">
<option value=""><?php echo $this->lang->line('please_select'); ?></option>
</select>
</span>
<span for="city" class="error"></span>
</div>
</div>
The result is this:
<div class="inputfieldsection">
<span id="ajaxcity"> <select name="city_id" id="city_id" class="valid">
<option value="102">München</option>
<option value="103">Nürnberg</option>
<option value="104">Augsburg</option>
<option value="105">Regensburg</option>
<option value="106">Ingolstadt</option>
<option value="107">Würzburg</option>
<option value="108">Fürth</option>
<option value="109">Erlangen</option>
<option value="110">Bayreuth</option>
<option value="111">Bamberg</option>
<option value="112">Aschaffenburg</option>
<option value="113">Landshut</option>
<option value="114">Kempten (Allgäu)</option>
<option value="115">Rosenheim</option>
<option value="116">Neu-Ulm</option>
<option value="117">Schweinfurt</option>
<option value="118">Passau</option>
<option value="119">Freising</option>
<option value="120">Dachau</option>
<option value="121">Straubing</option>
<option value="122">Hof</option>
<option value="123">Memmingen</option>
<option value="124">Kaufbeuren</option>
<option value="125">Weiden in der Oberpfalz</option>
<option value="126">Amberg</option>
<option value="127">Coburg</option>
<option value="128">Ansbach</option>
<option value="129">Schwabach</option>
<option value="130">Germering</option>
<option value="131">Neumarkt in der Oberpfalz</option>
<option value="132">Erding</option>
<option value="133">Fürstenfeldbruck</option>
<option value="134">Deggendorf</option>
<option value="135">Forchheim</option>
<option value="136">Friedberg</option>
<option value="137">Neuburg an der Donau</option>
<option value="138">Landsberg am Lech</option>
<option value="139">Schwandorf</option>
<option value="140">Königsbrunn</option>
<option value="141">Unterschleißheim</option>
<option value="142">Kulmbach</option>
<option value="143">Olching</option>
<option value="144">Garmisch-Partenkirchen</option>
<option value="145">Lauf an der Pegnitz</option>
<option value="146">Zirndorf</option>
<option value="147">Lindau</option>
<option value="148">Pfaffenhofen an der Ilm</option>
<option value="149">Roth</option>
<option value="150">Geretsried</option>
<option value="151">Unterhaching</option>
<option value="152">Herzogenaurach</option>
<option value="153">Starnberg</option>
<option value="154">Waldkraiburg</option>
<option value="155">Vaterstetten</option>
<option value="156">Senden</option>
<option value="157">Weilheim in Oberbayern</option>
<option value="158">Sonthofen</option>
<option value="159">Neusäß</option>
<option value="160">Gersthofen</option>
<option value="161">Bad Kissingen</option>
<option value="162">Ottobrunn</option>
<option value="163">Aichach</option>
<option value="164">Puchheim</option>
<option value="165">Kitzingen</option>
<option value="166">Traunreut</option>
<option value="167">Gauting</option>
<option value="168">Lichtenfels</option>
</select><span for="city_id" class="error"></span>
</span>
<span for="city" class="error"></span>
</div>
I'm a noob with javascript.
I added myself the trigger part and it works but I dont know how to make it work for the city.
It would be something like this but is it doesnt work.
$('#city_id').val(<? echo $city_id; ?>).trigger('change');
Thank you in advance.

This was the answer i was looking for
<?php foreach ($city as $key => $city_name) { ?>
<option value="<?php echo $key; ?>" <?php if($city_id == $key) {?> selected <?php } ?> ><?php echo $city_name; ?></option>
<?php } ?>

how to show/hide div based on selected option's id?

I have this vehicles invoice form with 5 rows. each row can be a different vehicle but if a car is selected, it shows you a second select list to chose its color.
here is my javascript:
<script>
$(document).ready(function() {
$("#select1").change(function(event) {
var id = $(event.target).id();
$("#" + id).show();
});
});
</script>
here is my form:
<form name="invoice" action="invoice.php">
<table border="1">
<tr>
<td>SN</td>
<td>Vahicle Type</td>
<td>Quantity</td>
</tr>
<?php $sn = 1 ;
while ($sn < 5){ ?>
<tr>
<td>
<?php echo $sn ?>
</td>
<td>
<select name="vehicles[]" id="select1">
<option id="0" value="0">Select Vehicle</option>
<option id="<?php echo $sn ?>" value="toyota" name="toyota">Toyota</option>
<option id="<?php echo $sn ?>" value="nissan" name="nissan">Nissan</option>
<option id="<?php echo $sn ?>" value="BMW" name="bmw">BMW</option>
<option id="0" value="plane" name="plane">Plane</option>
<option id="0" value="boat" name="boat">Boat</option>
<option id="0" value="bike" name="bike">Bike</option>
</select>
<div id="<?php echo $sn ?>" class="toggleable" style="display:none;">
<select name="color[]" id="select2">
<option id="<?php echo $sn ?>" value="red" name="red">Red</option>
<option id="<?php echo $sn ?>" value="black" name="black">Black</option>
<option id="<?php echo $sn ?>" value="white" name="white">White</option>
</select>
</div>
</td>
<td>
<input type="number" name="quantity[]">
</td>
</tr>
<?php $sn=$sn+1; } ?>
</table>
</form>
im not so good with javascript. i wrote this code by learning from online examples but its not working.

As tomas_b said, you should be using a data-* attribute for this. Element IDs must be unique within the document, if you duplicate them then getElementById will only return the first one (mostly).
If the listener is on the select element, then it will be this within the function, its properties can be accessed directly. There is also rarely any need to add an ID to a form control that already has a name, and select elements should always have one option with the selected attribute so that you know one will be selected by default.
So you might do something like:
window.onload = function() {
document.getElementById('select1').onchange = handleVehicleChange;
}
function handleVehicleChange() {
var opt = this.options(this.selectedIndex);
document.getElementById('carTypes').style.display = opt.getAttribute('data-type') == 'car'? '' : 'none';
}
<select name="vehicles[]" id="select1">
<option id="0" value="0" selected>Select Vehicle</option>
<option data-type="car" value="toyota">Toyota</option>
<option data-type="car" value="nissan">Nissan</option>
<option data-type="car" value="BMW">BMW</option>
<option data-type="aeroplane" value="plane">Plane</option>
<option data-type="boat" value="boat">Boat</option>
<option data-type="bike" value="bike">Bike</option>
</select>
<div id="carTypes" class="toggleable" style="display:none;">
<select name="color[]" id="select2">
<option value="red">Red</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
</div>

To obtain the value of the selected option "id" attribute using jQuery, you can use the following jQuery snippet
var id = $("#select1 > option:selected").attr('data-id');
See it in action: http://plnkr.co/edit/bWj0MzLey0n4dkI03bs1?p=preview
The query here simply gets you the selected option using the ":selected" selector (https://api.jquery.com/category/selectors/).
However as seen in the example, you should use a different attribute name for the option tags, e.g. "data-id", as "id" has its purpose.