i have this html for that displays 2 dropdown. one is for category and second is for subcategory
<form action="a_insert_product.php" method="post">
<div class="module_content">
<fieldset>
<label>Category</label>
<select name="catname">
<?php
$sql = "SELECT * FROM category";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result))
{
$catname=$row["catname"];
$catid=$row["id"];
?>
<option value="<? echo $catname.'-'.$catid;?>"><? echo $catname;?></option>
<?}
}?>
</select>
</fieldset>
<fieldset>
<label>Subcategory</label>
<select name="subcatname">
<?php
$sql = "SELECT * FROM subcategory";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result))
{
$subcatname=$row["subcatname"];
$subcatid=$row["id"];
?>
<option value="<? echo $subcatname.'-'.$subcatid;?>"><? echo $subcatname;?></option>
<?}
}?>
</select>
</fieldset>
<fieldset>
<label>Product Name</label>
<textarea rows="2" name="prodname"></textarea>
</fieldset>
</div>
<footer>
<div class="submit_link">
<input type="submit" name="submit" value="Submit" class="alt_btn">
</div>
</footer>
</form>
Although it is working fine but i wish to display the subcategory according to the category that is selected in the category dropdown, i don't have much knowledge regarding javascript. can anyone plz tel how it can be done
You can do it using AJAX, for example, assign an "id" attribute to both your catname and subcatname dropdowns:
<select name="catname" id="category-dropdown">
<select name="subcatname" id="subcategory-dropdown">
And then use some AJAX magic, for example:
<script type="text/javascript">
$("#category-dropdown").change(function() {
var selection_value = $(this).val();
$.post("subcategories.php", { category: selection_value },
function(result){
$.each(result, function(index, subcat) {
var option_html = "<option>" + subcat.name + "</option>";
$("#subcategory-dropdown").append(option_html);
}
},
"json");
});
</script>
Please note that this example uses jQuery, so you will have to add it to your page before using. Also, you will need to create a PHP page that will provide you with the response for subcategories, in this case I have used JSON, which is fairly easy to use.
I would do the following:
On the first dropdown, you'd have an on change handler which checks for what is selected in the dropdown. I would link that to an ajax call which then brings in the correct data to allow you to populate the second dropdown.
Google or search on here "JQuery on change" and "JQuery ajax" - there's tons of resources out there.
This is a different approach to same ends
Related
I'm using ajax to take user input in a dropdown menu (so the input would be the chosen alternative) and show some information after a button is clicked. It works, but I want to use a switch case statement in the controller, which is not working.
I have this piece of code to populate the dropdown menu:
<form method="post" action="controleur.php">
<select name="liste_formations" id="liste_formations" class="form-control">
<option value="">Choisissez une formation</option>
<?php
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["idActivite"].'">'.$row["nom"].'</option>';
}
?>
</select>
</div>
<div class="col-md-4">
<input type="submit" name="action" class="btn" id="search" value="Voir informations" />
</form>
And when the user clicks the send button it goes to controller.php where I have:
case "Voir informations":
$idActivite = $_POST['liste_formations'];
$query = "SELECT * FROM formation WHERE idActivite = '$idActivite'";
$result = mysqli_query($db, $query);
while($row = mysqli_fetch_array($result))
{
$data["nombreMaxPart"] = $row["nombreMaxPart"];
$data["idFormateur"] = $row["idFormateur"];
$data["prix"] = $row["prix"];
$data["description"] = $row["description"];
}
echo json_encode($data);
break;
When I try to do that I get the information I want, but in a blank page with the information vector. I actually want to show it in a table.
I have done searching this question here but there is no suitable answer for my problem. So to be more specific, I have 2 select option which is floor and room. Both selection displayed based on database. So is there a syntax that can get the selected floor id so I can do my query to display the specific room for the selected floor before submit? Here's my code :
<form name="form" method="POST">
<div class="form-group">
<div><label>Floor Name</label></div>
<select class="form-control" id="floorid" name="existfloorname">
<option>None</option>
<?php
$result = $conn->query("select * from floors");
while ($row = $result->fetch_assoc())
{
?><option id="<?php echo $row['floorid'];?>" value="<?php echo $row['floorname']; ?>"><?php echo $row['floorname']; ?></option><?php
}
?>
</select>
</div>
<div class="form-group">
<div><label>Room Name</label></div>
<select class="form-control" name="existroomname">
<option>None</option>
<?php
$result = $conn->query("select * from rooms where floorid = '".GETSELECTEDFLOORID."'");
while ($row = $result->fetch_assoc())
{
?><option value="<?php echo $row['roomname']; ?>"><?php echo $row['roomname']; ?></option><?php
}
?>
</select>
</div>
<input type="submit" name="delete" value="Delete">
</form>
This is how the form looks like
You need to work with AJAX for this. AJAX allows the sending of data from the front(JS) to the back(PHP). JQuery makes this easy by providing you with the .ajax() method. This is how you need to do this:
Note: You will need to use jQuery to do it this way
First, re-arrange your HTML in this manner, notice the select ids:
<form name="form" method="POST">
<div class="form-group">
<div><label>Floor Name</label></div>
<select class="form-control" id="floor_select" name="existfloorname">
<option>None</option>
<?php
$floors = $conn->query("select * from floors");
while ($row = $floors->fetch_assoc()){ ?>
<option value="<?= $row['floorid']; ?>"><?= $row['floorname']; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<div><label>Room Name</label></div>
<select class="form-control" id="room_select" name="existroomname">
<option>None</option>
</select>
</div>
<input type="submit" name="delete" value="Delete">
</form>
Second, create your jQuery ajax call:
$(document).on("change", 'select#floor_select', function(e) {
var floor_id = $(this).val();
$.ajax({
type: "POST",
data: {floor_id: floor_id},
url: 'get_room_list.php',
dataType: 'json',
success: function(json) {
var $el = $("select#room_select");
$el.empty(); // remove old options
$el.append("<option>Please Select</option>");
//iterate through your results and add to your dropdown
$.each(json, function(k, v) {
$el.append("<option value='" + v.id + "'>" + v.roomname + "</option>");
});
}
});
});
Third, create the PHP script that the AJAX call above is looking for.
Call it get_room_list.php:
<?php
$result = $conn->query("select * from rooms where floorid = '" . GETSELECTEDFLOORID . "'");
while ($row = $result->fetch_assoc()) {
$results[] = $row;
}
header('Content-Type: application/json');
echo json_encode($results);
Once all the above is done, you should be able to obtain the information you need. Every time the "Floor Name" select is changed, JS will send a POST request (via AJAX) to PHP and PHP will return the "rooms" result in JSON format, which you then iterate to create your dropdown.
Hope this all makes sense.
Good luck.
You may need AJAX to get list room each floor.
in a php form I have the list of brands scrollable from a select field and I would modify the selected brand displaying it in a field beside.
The php form is this:
<?php
include '../sys/conn.php';
$brands = mysqli_query ($conn, "
*(query to select brands name and id)*
") or die ("Query not valid: " . mysqli_error($conn));
mysqli_close($conn);
?>
...
<form role="form" >
<label>Brands List</label>
<select class="form-control" name='brands list'>
<?php while ($listabrand=mysqli_fetch_array($brands)){
echo '<option>'.$listabrand['0'].' - '.$listabrand['1'].'</option>';
}?>
</select>
...
<label>Modify Brand</label>
<input type="text" name='brand-name' class="form-control" required placeholder="Brand Name to modify">
</form></html>
Basically I need to select the brand's name from the named "brands list" field and display it into the 'brand-name' in order to modify and save it.
Any help?
First of all, name attribute cannot contain space.
Correct this in <select class="form-control" name='brands list'>
And for the displaying selected brand in the value of text field, use javascript or jquery.
Showing example in JQuery:
$('select[name="brands-list"]').change(function(){
var selectedBrand = $(this).val();
$('input[name="brand-name"]').val(selectedBrand);
});
This is the right code.
<select class="form-control" name='brands-list'>
<?php
while ($listabrand=mysqli_fetch_array($brands)){
echo '<option value="'.$listabrand['1'].'">'.$listabrand['0'].' - '.$listabrand['1'].'</option>';
}?>
</select>
<div class="col-lg-8">
<form role="form">
<div class="form-group">
<label>Marca</label>
<input type="text" name='brand-name' class="form-control">
</div>
</form>
</div>
<script>
$('select[name="brands-list"]').change(function(){
var selectedBrand = $(this).val();
$('input[name="brand-name"]').val(selectedBrand);
});
</script>
I am building a page in which I have 2 select boxes. I add items to Select #2 from Select #1.
When the submit button is clicked, I want to get all options only from Select #2 whether they are selected or not.
<?php
require('handlers/handler.php');
$active = $_POST['activeProperties'];
$slider = $_POST['sliderProperties'];
$array = array();
if(isset($_POST['submit'])){
if(isset($_POST['sliderProperties'])){
foreach($_POST['sliderProperties'] as $item){
$array[] = $item;
}
}
echo "<pre>";
print_r($array);
echo "</pre>";
}
?>
<form method="post" style="height: 600px;">
<select id="source" name="activeProperties[]" data-text="Source list" data-search="Search for options" style="height: 600px;">
<?php
$query = $handler11->query("SELECT ID, name FROM properties WHERE active = 'yes' ");
while($row = $query->fetch()){
echo '<option value="'.$row['ID'].'">'.$row['name'].'</option>';
}
?>
</select>
<select id="destination" name="sliderProperties[]" data-text="Destination list" data-search="Search for options">
</select>
<input type="submit" name="submit" class="btn btn-primary" value="Save"/>
</form>
I am only getting the first item in the select box with this code. How can I get all items?
You can use the multiple select of HTML (documentation here), try this:
<form method="post" style="height: 600px;">
<select multiple id="source" name="activeProperties[]" data-text="Source list" data-search="Search for options" style="height: 600px;">
<?php
$query = $handler11->query("SELECT ID, name FROM properties WHERE active = 'yes' ");
while($row = $query->fetch()){
echo '<option value="'.$row['ID'].'">'.$row['name'].'</option>';
}
?>
</select>
</form>
the other option is doing through Javascript.
If you want all the data if selected or not, cant you get the same result in your php by this query :
$query = $handler11->query("SELECT ID, name FROM properties WHERE active = 'yes' ");
Can anybody help me on this. For showing the rezults from an MySql database i have to select school, class, subject, and exam. But listing all the classes or all the exams is not very practical so i want to do another function that when i choose some schools in the first select box it shows me in the second select box only the classes of the selected schools.
My code is:
<div id="allselects">
<form action="viewing.php" method="post" name="filt">
<div class="multsarrange">
<h1 class="choosetext" >Chose Schools</h1>
<select class="multipleselect" name="schools[]" size="8" multiple="multiple" id="shkll">
<?php
$sql = "SELECT * FROM schools ";
$scc=mysql_query($sql);
while ($db_f = mysql_fetch_assoc($scc)) {
$schcd=$db_f['schoolcode'];
$schc=$db_f['schoolname'];
echo "<option value=$schcd >$schc</option>";
}
?>
</select>
</div>
<div class="multsarrange" id="clasaajax">
<h1 class="choosetext" >Chose an Classes</h1>
<select class="multipleselect" name="classes[]" size="8" multiple="multiple" ">
<?php
$c = "SELECT * FROM classes ";
$cl=mysql_query($c);
while ($db_f = mysql_fetch_assoc($cl)) {
$clsc=$db_f['schoolID'];
$claid=$db_f['classID'];
$clay=$db_f['year'];
$clanm=$db_f['className'];
$name=schoolidton($clsc)." ".$clay." ".$clanm;
echo "<option value=$claid >$name</option>";
}
?>
</select>
</div>
<div class="multsarrange">
<h1 class="choosetext" >Chose Subjects</h1>
<select class="multipleselect" name="subjects[]" size="8" multiple="multiple">
<?php
$sb = "SELECT * FROM subjects ";
$sbi=mysql_query($sb);
while ($db_f = mysql_fetch_assoc($sbi)) {
$sbnm=$db_f['subjectName'];
$sbid=$db_f['subjectID'];
echo "<option value=$sbid >$sbnm</option>";
}
?>
</select>
</div>
<div class="multsarrange">
<h1 class="choosetext" >Chose Exams</h1>
<select class="multipleselect" name="exams[]" size="8" multiple="multiple">
<?php
$e = "SELECT * FROM exams ";
$ex=mysql_query($e);
while ($db_f = mysql_fetch_assoc($ex)) {
$id=$db_f['examID'];
$sub=$db_f['subjectID'];
$desc=$db_f['description'];
$year=$db_f['year'];
$data=$db_f['data'];
$exnam=subidton($sub)." - ".$year." - ".$desc." - ".$data;
echo "<option value=$id >$exnam</option>";
}
?>
</select>
</div>
<div id="longsubmit">
</br></br>
<input name="submit" type="submit" value="View" />
</div>
</form>
</div>
What you need to do is the following :
Setup an event listener on the select to listen for the change event - see here
Process the change event by sending the selected value to the PHP script - see here
Using PHP get the selected value and query the database as required (you already do that bit)
Send the associated HTML output or JSON or XML if you just creating a new select list - this is a simple echo
Write the output to the screen using JavaScript - this is either creating a new element based on the reply from the PHP function or inserting the HTML response
There are lots of things within this process - each with multiple options - i suggest you attempt to tackle each one and come back with specific questions if you get stuck
use ajax on abc.php get values or ids of school and make the tags you need and return back the results to the relevant id of html
function get_options(table,id_field,name_field,where_field,field_value,select_id,edit_id){
$('#'+select_id).html('<option>Loading...</option>');
$.ajax({
type: "POST", url: "abc.php", data: "&table="+table+"&id_field="+id_field+"&name_field="+name_field+"&where_field="+where_field+"&field_value="+field_value+ "&edit_id=" + edit_id +"&get_option=1",
complete: function(data){
//alert(data.responseText);
$('#'+select_id).html(data.responseText);
}
});
}
You have to use AJAX inorder to achieve this.
check this
http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php