We Keep Coding

How to show and hide form control while changing select box options

I have 2 select box in html. First is for Country and second is for city. I need to show a textbox when user select country other then Pakistan and show a drop down list for city if user select Pakistan form country dropdown.
Here is my code which i tried:
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
<div class="form-group col-md-3">
<label for="cc-payment" class="control-label mb-1">Birth Country</label>
<select class="form-control" name="Birth_Country" id="Birth_Country" style="color: black;" required>
<option value="">Please Select Birth Country</option>
<?php
$sel_cus = "select Country_Name from personal_country_name Order By Country_Name";
$res_cus = mysqli_query($connection, $sel_cus);
while ($row = mysqli_fetch_array($res_cus)) {?>
<option value="<?php echo $row['Country_Name'];?>"><?php echo strtoupper($row['Country_Name']);?></option>
<?php
}
?>
</select>
</div>
<div class="form-group col-md-3">
<label for="cc-payment" class="control-label mb-1">Birth City</label>
<select class=" form-control " name="Birth_City" id="Birth_City" style="color: black;" required>
<option value="">Please Select Birth City</option>
<?php
$sel_cus = "select city_name from personal_city_name order By city_name";
$res_cus = mysqli_query($connection, $sel_cus);
while ($row = mysqli_fetch_array($res_cus)) {?>
<option value="<?php echo $row['city_name'];?>"><?php echo strtoupper($row['city_name']);?></option>
<?php
}
?>
</select>
<input type="text" autocomplete="off" onkeyup="this.value = this.value.toUpperCase();" class="form-control "
name="Birth_City" id="other" style="color: black;" value="<?php echo $data['Birth_City']?>" required
data-toggle="tooltip" title="Birth City" placeholder="Birth City"/>
</div>
<button type="submit" class="btn btn-primary pull-right"
style=" margin-right: 430px; width: 105px; height: 42px; margin-top: 22px; " value="Save" name="Save"
id="Save">Save
</button>
</form>

Try this Jquery code
$(function(){
$("#city").hide();
});
$("#country").change(function(){
if($("#country").val() !="" )
{
$("#city").show();
} else {
$("#city").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
<option value="">select country</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="city">
<option value="">select city</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

Added an example based on your requirement. So you need do the following things.
Hide both controls
Enable control based on the value from select
function hideBoth() {
$('#cityText').hide();
$('#city').hide();
}
$(document).ready(function() {
$('#country').on('change', function() {
hideBoth();
var country = $.trim(this.value).toLowerCase();
if (country !== "pakistan") {
$('#cityText').show();
} else {
$('#city').show();
}
});
});
.hide {
display: none;
}
.show {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<select id="country">
<option value="">Select</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Pakistan">Pakistan</option>
<option value="India">India</option>
<option value="Iran">Iran</option>
<option value="Nepal">Nepal</option>
</select>
<select id="city" class="hide">
<option value="">Select</option>
<option value="1">City 1</option>
<option value="2">City 2</option>
<option value="3">City 3</option>
<option value="4">City 4</option>
<option value="5">City 5</option>
<option value="6">City 6</option>
</select>
<input type="text" placeholder="Enter your city" class="hide" id="cityText" />

use jquery
<script>
$(document).ready(function(){
$("#Birth_Country").onchange(function(){
$country = $('#Birth_Country').val();
if ($country == "Pakistan") {
$("#Birth_City").show();
$("#other").hide();
}else {
$("#other").show();
$("#Birth_City").hide();
}
}
});
</script>
include script file in php also jquery file
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

How to choose a <select> option value automatically from an URL parameter?

I have 2 step form and I'm passing the first name in the URL from step 1 to step 2, but I'm not sure how to do the same thing for a select field. As an example I have this:
In the URL:
?firstname=Bob
Form Field:
<input type="text" id="firstname" name="firstname" value="<?php echo $_GET['firstname']; ?>" required>
There is a variable passing in the URL for the select field which is:
&colortype=Black+and+White
But the Select options look like this:
<label for="colortype">Colors...</label>
<select id="colortype" name="colortype">
<option value="" selected disabled hidden>Select an option</option>
<option value="Purple and Yellow">Purple and Yellow</option>
<option value="Red and Blue">Red and Blue</option>
<option value="Black and White">Black and White</option>
</select>
I have tried adding the option:
<option value="<?php echo $_GET['colortype']; ?>">
<?php echo $_GET['colortype']; ?>
</option>
But no luck. Is there a way to automatically select the colortype that comes through the URL?

Use this
<label for="colortype">Colors...</label>
<select id="colortype" name="colortype">
<option <?php if ($_GET['colortype'] == '' ) echo 'selected' ; ?> value="" disabled hidden>Select an option</option>
<option <?php if ($_GET['colortype'] == 'Purple and Yellow' ) echo 'selected' ; ?> value="Purple and Yellow">Purple and Yellow</option>
<option <?php if ($_GET['colortype'] == 'Red and Blue' ) echo 'selected' ; ?> value="Red and Blue">Red and Blue</option>
<option <?php if ($_GET['colortype'] == 'Black and White' ) echo 'selected' ; ?> value="Black and White">Black and White</option>
</select>

<label for="colortype">Colors...</label>
<select id="colortype" name="colortype">
<?php $color = $_GET['colortype']; ?>
<option <?php if ($color == '' ) { ?> selected="selected" <?php } ?> value="" >Select an option</option>
<option <?php if ($color == 'Purple and Yellow' ) { ?> selected="selected" <?php } ?> value="Purple and Yellow" >Select an option</option>
<option <?php if ($color == 'Red and Blue' ) { ?> selected="selected" <?php } ?> value="Red and Blue" >Select an option</option>
<option <?php if ($color == 'Black and White' ) { ?> selected="selected" <?php } ?> value="Black and White" >Select an option</option>

You can try this code
Colors...
<option value="" selected disabled hidden>Select an option</option>
<option value="1">Purple and Yellow</option>
<option value="2">Red and Blue</option>
<option value="3">Black and White</option>
value="Black and White">Black and White

Display selected dropdown value from database (i.e.mysql)

I've saved the value of the apple from the select drop down to the mysql.
Now in the edit page, i'd like to show the respective value.
But i dont seems to get it right
<?php $food = $mysqli->real_escape_string($_POST['food']); ?>
<select id="food" required name="food" >
<option value="" disabled selected>Select a Food</option>
<option value="apple" <?php if($food == apple)
echo "selected='selected'"; ?>Apple</option>
<option value="kiwi" <?php if($food == kiwi)
echo "selected='selected'"; ?>Kiwi</option>
</select></div>

<select id="food" required name="food" >
<option value="" >Select a Food</option>
<option value="apple" <?php if($food == "apple")
echo "selected='selected'"; ?>Apple</option>
<option value="kiwi" <?php if($food == "kiwi")
echo "selected='selected'"; ?>Kiwi</option>
</select></div>

String should be enclosed by single quotes or double quotes if($food == 'apple')
<select id="food" required name="food" >
<option value="" disabled selected>Select a Food</option>
<option value="apple" <?php if($food == 'apple')
echo "selected='selected'"; ?>Apple</option>
<option value="kiwi" <?php if($food == 'kiwi')
echo "selected='selected'"; ?>Kiwi</option>
</select></div>

Bring the Options from database table in 2nd Select box based on the value selected in 1st Select Box

I searched a lot about this topic and found difficult approaches mostly not working. I have 2 Select boxes (class & student) which should be dynamically generated. After selecting the Class, the 2nd Select Box should show the Option Values from the Students Table.
<form action="" class="form-horizontal" method="POST">
<h4>Issue Book: </h4><hr>
<label class="control-label" for="class">Class</label>
<select id="class" name="class" class="form-control">
<option value="">Select Class</option>
<?php
$class_query = "SELECT * FROM `classes` ";
$class_result = mysql_query($class_query);
do{
$class_row = mysql_fetch_array($class_result);
if($class_row){
$class_id = $class_row['id'];
$class_name = $class_row['class'];
?>
<option value="<?php echo $class_id; ?>"><?php echo $class_name; ?></option>
<?php
}
}while($class_row);
?>
</select>
<label class="control-label" for="student">Student</label>
<select id="student" name="student" class="form-control">
<option value="">Select Student</option>
</select>
<!-- Submit -->
<button type="submit" name="issue_book">Issue Book</button>
</form>
Kindly help with this, I have no knowledge of JS or JQuery. I shall be very thankful.

first this is your html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="" class="form-horizontal" method="POST">
<h4>Issue Book: </h4>
<hr>
<label class="control-label" for="class">Class</label>
<select id="class" name="class" class="form-control" onchange="getStudentOption(this)">
<option value="">Select Class</option>
<option value="class1">Class 1</option>
<option value="class2">Class 2</option>
<option value="class3">Class 3</option>
<option value="class4">Class 4</option>
</select>
<label class="control-label" for="student">Student</label>
<select id="student" name="student" class="form-control">
<option value="">Select Student</option>
</select>
<!-- Submit -->
<button type="submit" name="issue_book">Issue Book</button>
</form>
added a onchange function
<script>
function getStudentOption(input) {
var class_name = input.value;
$.ajax({
type: "GET",
data: 'class=' + class_name,
url: 'demo.php',
dataType: 'text',
success: function (text) {
$('#student').html(text);
},
});
}
</script>
here demo is the file name which file give you all student data so you can change this file name and path also
and this is your demo file content
<?php
if (isset($_GET) && ($_GET['class'] != '')) {
/*$class_value = $_GET['class'];
$query = "SELECT * FROM students WHERE class_name=" . $class_value;
$result = mysql_query($query);
$total_refs = mysql_num_rows($result);
if ($total_refs > 0) {
?>
<option value="">Select Student</option>
<?php
while ($line = mysql_fetch_array($result)) {
$student_name = $line['student_name'];
$student_id = $line['student_id'];
?>
<option
value="<?php echo $student_id; ?>"><?php echo $student_name; ?></option>
<?php
}
?>
<?php
} else { ?>
<option value="">Select Student</option>
<?php
}*/?>
<option value="">Select Student</option>
<option value="1">Student 1</option>
<option value="2">Student 2</option>
<option value="3">Student 3</option>
<?php }
?>
i have added some demo content you can update data which code i have added, i am not sure which your table structure so just update condition value and filed value

Hiding an option value based on first dropdown

I would like to hide an option value if one value is selected in first dropdown.
I have added below the dropdown code:
<select name="time_hour" class="span6">
<option value="00" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '00'){ echo "selected";} ?>>00</option>
<option value="01" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '01'){ echo "selected";} ?>>01</option>
<option value="02" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '02'){ echo "selected";} ?>>02</option>
<option value="03" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '03'){ echo "selected";} ?>>03</option>
<option value="04" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '04'){ echo "selected";} ?>>04</option>
<option value="05" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '05'){ echo "selected";} ?>>05</option>
<option value="06" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '06'){ echo "selected";} ?>>06</option>
<option value="07" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '07'){ echo "selected";} ?>>07</option>
<option value="08" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '08'){ echo "selected";} ?>>08</option>
<option value="09" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '09'){ echo "selected";} ?>>09</option>
<option value="10" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '10'){ echo "selected";} ?>>10</option>
<option value="11" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '11'){ echo "selected";} ?>>11</option>
<option value="12" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '12'){ echo "selected";} ?>>12</option>
<option value="13" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '13'){ echo "selected";} ?>>13</option>
<option value="14" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '14'){ echo "selected";} ?>>14</option>
<option value="15" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '15'){ echo "selected";} ?>>15</option>
<option value="16" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '16'){ echo "selected";} ?>>16</option>
<option value="17" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '17'){ echo "selected";} ?>>17</option>
<option value="18" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '18'){ echo "selected";} ?>>18</option>
<option value="19" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '19'){ echo "selected";} ?>>19</option>
<option value="20" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '20'){ echo "selected";} ?>>20</option>
<option value="21" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '21'){ echo "selected";} ?>>21</option>
<option value="22" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '22'){ echo "selected";} ?>>22</option>
<option value="23" <?php if(date('H',strtotime($time_gap[0]->time_gap_time)) == '23'){ echo "selected";} ?>>23</option>
</select>
And the second dropdown is
<select name="time_min" id="time_min" class="span6">
<option value="00" <?php if(date('i',strtotime($time_gap[0]->time_gap_time)) == 00){ echo "selected";} ?>>00</option>
<option value="15" <?php if(date('i',strtotime($time_gap[0]->time_gap_time)) == 15){ echo "selected";} ?>>15</option>
<option value="30" <?php if(date('i',strtotime($time_gap[0]->time_gap_time)) == 30){ echo "selected";} ?>>30</option>
<option value="45" <?php if(date('i',strtotime($time_gap[0]->time_gap_time)) == 45){ echo "selected";} ?>>45</option>
</select>
So, for example, If I select 00 in first dropdown, 00 should be hide in second dropdown. I am trying to get this possibility. Please help.

use JQuery and set id="time_hour" attribute for first select tag:
$("#time_hour").change(function (){
$("#time_min").find("option").css('display','')
$("#time_min").find("option[value="+$(this).val()+"]").css('display','none')
});