Hiding an option value based on first dropdown - javascript

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')
});

Related

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

javascript enable disable in every row table withphp array

i have a table from array in php so i put select option that have javascript to control disable/enable, .my problem is , javascript only working at 1st row of table..and the other rows are not working..can somebody help me with this thank you in advance...my code as :
$(document).ready(function() {
$('#Status1').change(function() {
if (($(this).val() === 'T') || ($(this).val() === 'M')) {
$(‘#uia’).attr('disabled', 'disabled');
} else {
$(‘#uia’).attr('disabled', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Status1" name="Status1[]">
<option value="T" >PILIHAN 1</option></option>
<option value="M" >PILIHAN 2</option></option>
<option value="S" >PILIHAN 3</option></option>
</select>
<select id="uia" name="uia[]">
<option value="E" >PILIHAN 1</option></option>
<option value="D" >PILIHAN 2</option></option>
<option value="K" >PILIHAN 3</option></option>
</select>
first of all you have some errors in your syntax.
you have 2 closing tags for the option elements (<option value="T" >PILIHAN 1</option></option>).
you have invalid single quotes in your jQuery selectors (use ' instead of ’).
As #ADyson has noticed, use .prop( propertyName, value ) instead of .attr( attributeName, value ) for disabling and enabling elements.
$('#Status1').change(function(){
if(($(this).val() === 'T') || ($(this).val() === 'M')){
$('#uia').prop('disabled', 'disabled');
}else{
$('#uia').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Status1" name="Status1[]" >
<option value="T" >PILIHAN 1</option>
<option value="M" >PILIHAN 2</option>
<option value="S" >PILIHAN 3</option>
</select>
<select id="uia" name="uia[]" >
<option value="E" >PILIHAN 1</option>
<option value="D" >PILIHAN 2</option>
<option value="K" >PILIHAN 3</option>
</select>
Note that this doesn't disable the #uia element on load.
To achieve this you could set the #uia element to disabled by default or add an onload event to the element.
<tbody>
<?php do {?>
<?php $Sellcount++ ; ?>
<tr>
<script type="text/javascript">
$(document).ready(function() {
$('#Status1').change(function(){
if(($(this).val() === 'T') || ($(this).val() === 'M')){
$('#uia').attr('disabled', 'disabled');
}else{
$('#uia').attr('disabled', false);
}
});
});
</script>
<td clas ="TD-Ubah2"><?php echo $Sellcount; ?></td>
<td class ="TD-Ubah2" nowrap><?php echo $row_rsSell['Nama']; ?></td>
<td class ="TD-Ubah2"><?php echo $row_rsSell['IC'];?></td>
<input type="hidden" id="IC" name="IC" value="<?php echo $row_rsSell['IC'];?>">
<td class ="TD-Ubah2"><input id="notel" name="notel" type="text" value="<?php echo $row_rsSell['NoTel_HF']; ?>"></td>
<td class ="TD-Ubah2">
<select id="Status1" name="Status1" >
<option value="" >SILA PILIH</option>
<option value="A" <?php if($row_rsSell['Status'] == 'A'){ echo "selected"; }?>>PILIHAN 1</option>
<option value="L" <?php if($row_rsSell['Status'] == 'L'){ echo "selected"; }?>>PILIHAN 2</option>
<option value="M" <?php if($row_rsSell['Status'] == 'M'){ echo "selected"; }?>>PILIHAN 3</option>
</select>
</td>
<td class ="TD-Ubah2">
<select id="uia" name="uia" >
<option value="" >SILA PILIH</option>
<option value="P" <?php if($row_rsSell['uia'] == 'P'){ echo "selected"; }?>>PILIHAN 1</option>
<option value="K" <?php if($row_rsSell['uia'] == 'K'){ echo "selected"; }?>>PILIHAN 2</option>
<option value="H" <?php if($row_rsSell['uia'] == 'H'){ echo "selected"; }?>>PILIHAN 3</option>
</select><br>
</td>
</tr>
<?php } while ($row_rsSell = mysql_fetch_assoc($rsSell));?>
</tbody>
i just amend my code..and still the other rows not run that java script..

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>

Php and ajax multiple dropdown menu onChange function

I want to choose province on the basis of state selected. This option is working fine, but when I add a new dropdown box for district that depends on the province option, and so on, all other option are not working and are displaying all values from the database not on the basis of the selected drop down menu ...[![enter image description here][1]][1]
include.php code:
<?php
$con=mysql_connect('localhost','root','') or die('Mysql not connected');
mysql_select_db('location',$con) or die('DataBase not connected');
?>
<html>
<head>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax1.js">
</script>
</head>
<body>
<h1>Address<br/></h1>
<form>
<select name="state" style="padding:10px;width:200px;font-size:20px;" onChange="display(this.value)">
<option value="" selected="selected">-- Select Country --</option>
<?php
$query1="select * from tbl_state";
$query1_result=mysql_query($query1)or mysql_error();
while($row=mysql_fetch_array($query1_result))
{
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
?>
</select>
<div id="show_city">
<select name="city" style="padding:10px;width:200px;font-size:20px; " onChange="display1(this.value)">
<option value="" selected="selected">-- Select Province --</option>
</select>
</div>
<br>
<div id1="show_Dist">
<select name="dist" style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select Dist --</option>
<?php
$query="select * from tbl_dist";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['Dist_id']; ?>"><?php echo $row['Dist_Name']; ?></option>
<?php
}
?>
</select>
</div>
<br>
<div id1="show_Dist">
<select name="dist" style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select Tehsil --</option>
<br>
<?php
$query="select * from tbl_tehsil";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['tehsil_id']; ?>"><?php echo $row['tehsil_Name']; ?></option>
<?php
}
?>
</select>
</div>
<br>
<div id1="show_UC">
<select name="dist" style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select Union Concil--</option>
<br>
<?
$query="select * from tbl_tehsil";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['tehsil_id']; ?>"><?php echo $row['tehsil_Name']; ?></option>
<?php
?>
</select>
</div>
<br>
<div id1="show_Villages">
<select name="dist" style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select Villages--</option>
<br>
<?php
$query="select * from tbl_tehsil";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['tehsil_id']; ?>"><?php echo $row['tehsil_Name']; ?></option>
<?php
}
?>
</select>
</div>
</form>
</body>
</html>
getcity code:
<?php
$con=mysql_connect('localhost','root','') or die('Mysql not connected');
mysql_select_db('location',$con) or die('DataBase not connected');
$state_id=$_REQUEST['state_id'];
$query="select * from tbl_city where state_id='$state_id'";
?>
<select name="city" style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select city --</option>
<?php
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['city_name']; ?></option>
<?php
}
?>
</select>
getdist.php code:
<?php
$con=mysql_connect('localhost','root','') or die('Mysql not connected');
mysql_select_db('location',$con) or die('DataBase not connected');
$city_id=$_REQUEST['city_id'];
$query="select * from tbl_Dist where city_id='$city_id'";
echo "Error";
?>
<select name="city" style="padding:10px;width:200px;font-size:20px;">
<option value="" selected="selected">-- Select Dist --</option>
<?php
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['Dist_id']; ?>"><?php echo $row['Dist_Name']; ?></option>
<?php
}
?>
</select>
ajax file:
// JavaScript Document
var XMLHttpRequestObject=false;
function display(state_id)
{
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequestObject.onreadystatechange=function()
{
if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
document.getElementById("show_city").innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.open("GET","getcity.php?state_id="+state_id,true);
XMLHttpRequestObject.send();
}
ajax1 file:
var XMLHttpRequestObject=false;
function display1(dist_id)
{
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequestObject.onreadystatechange=function()
{
if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
document.getElementById("show_Dist").innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.open("GET","getdist.php?city_id="+city_id,true);
XMLHttpRequestObject.send();
}
How can I use the AJAX file properly?
See I Can't go through all your codes. I'm having my code. Just go through it.
Try using this. Use little brain. And, you will not have any problem.
~ #imDEnam
View.php
<select class='form-control City' name='StoreCity' required>
<option value="">Select City</option>
<?
$QueryCity=mysql_query("SELECT * FROM AubreeCities");
while($RowCt=mysql_fetch_array($QueryCity))
{?>
<option value="<?echo $RowCt['ACityNo'];?>"><?echo $RowCt['ACName'];?></option>
<?}?>
</select>
<div class='Stores'>
//Here, we will show all details which is coming from AjaxSelectStores.php Page..
</div>
**Ajax Call**
$('.City').change(function(){
var CityNo= $('.City').val();
$.ajax({url:"AjaxSelectStores.php?CityNo="+CityNo,cache:false,success:function(result){
$('.Stores').html(result);
}});
});
AjaxSelectStores.php
<?
include("open-db-connection.php");
extract($_GET);
$RecentMonth=date("F");
?>
<div class='row'>
<div class='col-md-2'><label>Select Store</label></div>
<div class='col-md-4'>
<select class='form-control' name='StoreNo'>
<option value="">Select Store</option>
<?
$QueryStore=mysql_query("SELECT * FROM AubreeStores WHERE AStoreCity='$CityNo' ");
while($RowS=mysql_fetch_array($QueryStore))
{?>
<option value="<?echo $RowS['AStoreNo'];?>"><?echo $RowS['AStoreName'];?></option>
<?}?>
</select>
</div>
</div>

Javascript Download Item from Dropdown

Drop down, when item of dropdown is selected I need it to go to download page based on the advanced custom fields value.
Code:
<select name="download" onChange="download(this.value)">
<option value="0">Select template to download</option>
<option value="<?php the_field('download_template_1_link', 'option'); ?>"><?php the_field('download_template_1_title', 'option'); ?></option>
<option value="<?php the_field('download_template_2_link', 'option'); ?>"><?php the_field('download_template_2_title', 'option'); ?></option>
<option value="<?php the_field('download_template_3_link', 'option'); ?>"><?php the_field('download_template_3_title', 'option'); ?></option>
<option value="<?php the_field('download_template_4_link', 'option'); ?>"><?php the_field('download_template_4_title', 'option'); ?></option>
<option value="<?php the_field('download_template_5_link', 'option'); ?>"><?php the_field('download_template_5_title', 'option'); ?></option>
<script>
function download(val) {
window.location
}
</script>
</select>
use window.location.href to go to download page.
<script>
function download(val) {
window.location.href = val;
}
</script>
function download(url) {
if (url.length !== 0) {
window.location.href = url;
}
}
<select onChange="download(this.value)">
<option value="">-- Select --</option>
<option value="http://apple.com">Apple</option>
<option value="http://bing.com">Bing</option>
</select>

Categories