I want to have validation as dependent to each other with 3 select box options value example: if we select man 14 then remain 16 should be show in teenager and child after then i select 6 people in teenager then remain 10 people should be show in child option then child can be select only 10 they cant be more then people limit. see below image
$total_booked_people_limit = "30";
<div class="form-group" >
<label for="sel1"><b>Adults (18+):</b></label>
<select class="form-control" id="sel1">
<?php for($i=0; $i<=$total_booked_people_limit; $i++){
echo "<option value=\"$i\">$i</option>";
} ?>
</select>
<label for="sel1"><b>Teenager(14 - 17):</b></label>
<select class="form-control" id="sel1">
<?php for($j=0; $j<=$total_booked_people_limit; $j++) {
echo "<option value=\"$j\">$j</option>";
} ?>
</select>
<label for="sel1"><b>Children (7 - 14):</b></label>
<select class="form-control" id="sel1">
<?php for($k=0; $k<=$total_booked_people_limit; $k++) {
echo "<option value=\"$k\">$k</option>";
} ?>
</select>
Try this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<?php $total_booked_people_limit = "30"; ?>
<div class="form-group" >
<label for="sel1"><b>Adults (18+):</b></label>
<select class="form-control first" id="sel1">
<?php for($i=0; $i<=$total_booked_people_limit; $i++) {
echo "<option value=\"$i\">$i</option>";
} ?>
</select>
<label for="sel1"><b>Teenager(14 - 17):</b></label>
<select class="form-control second" id="sel1">
<?php for($j=0; $j<=$total_booked_people_limit; $j++) {
echo "<option value=\"$j\">$j</option>";
} ?>
</select>
<label for="sel1"><b>Children (7 - 14):</b></label>
<select class="form-control third" id="sel1">
<?php for($k=0; $k<=$total_booked_people_limit; $k++) {
echo "<option value=\"$k\">$k</option>";
} ?>
</select>
<script type="text/javascript">
$(document).ready(function() {
$(".first").change(function() {
var first = $(".first").val();
var remaining = 30-first;
$('.second').children('option').remove();
for(firstcount = 0; firstcount <= remaining; firstcount++){
$(".second").append("<option>"+firstcount+"</option>");
}
});
$(".second").change(function() {
var first = $(".first").val();
var second = $(".second").val();
var firstsecond = +first + +second;
var remaining = 30-firstsecond;
$('.third').children('option').remove();
for(secondcount = 0; secondcount <= remaining; secondcount++){
$(".third").append("<option>"+secondcount+"</option>");
}
});
});
</script>
Related
So there are two drop-down lists in my code. One is "Specialization" which has options such as General, Cardiologist, Pediatrician, etc, and the other one is "Doctor" which has the name of the doctors as options. What I want is to show the names of the doctors in the "Doctor" drop-down based on the values selected in the "Specialization" drop-down.
This is how my JSON looks like:
[{"username":"Ashok","spec":"General"},{"username":"arun","spec":"Cardiologist"},{"username":"Dinesh","spec":"General"},{"username":"Ganesh","spec":"Pediatrician"},{"username":"Kumar","spec":"Pediatrician"},{"username":"Amit","spec":"Cardiologist"},{"username":"Abbis","spec":"Neurologist"}]
Eg: If I select 'General' from the "Specialization" drop-down, then only the doctors with General (Ashok and Dinesh) will be shown as the drop-down options in the "doctor" drop-down.
Here is the HTML and JS part:
<div class="col-md-4">
<label for="spec">Specialization:</label>
</div>
<div class="col-md-8">
<select name="spec" class="form-control" id="spec">
<option value="" disabled selected>Select Specialization</option>
<?php display_specs();?>
</select>
<script>
let data = <?php echo json_encode($docarray); ?>
document.getElementById('spec').onchange = function updateSpecs(e) {
let values = data.filter(obj => obj.spec == this.value).map(o => o.username);
document.getElementById('doctor1').value = document.querySelector(`[value=${//query that matches the doctor name in json}]`).getAttribute('data-value');
};
</script>
</div><br><br>
<div class="col-md-4"><label for="doctor">Doctors:</label></div>
<div class="col-md-8">
<select name="doctor" class="form-control" id="doctor1" required="required">
<option value="" disabled selected>Select Doctor</option>
<?php display_docs();?>
</select>
<script>
document.getElementById('doctor').onchange = function updateFees(e) {
document.getElementById('docFees').value = document.querySelector(`[value=${this.value}]`).getAttribute('data-value'); // fees will be added based on the doctor mentioned in the db
};
Here is the PHP code for 'display_specs()' and 'display docs()':
function display_docs()
{
global $con;
$query="select * from doctb";
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result))
{
$username=$row['username'];
$price=$row['docFees'];
echo '<option value="' .$username. '" data-value="'.$price.'">'.$username.'</option>';
}
}
function display_specs() {
global $con;
$query="select distinct(spec) from doctb";
$result=mysqli_query($con,$query);
while($row=mysqli_fetch_array($result))
{
$spec=$row['spec'];
$username=$row['username'];
echo '<option value="' .$username. '" data-value="'.$spec.'">'.$spec.'</option>';
}
}
Screenshot:
I did my best my couldn't able to do that. So any suggestions are welcome. Thanks in advance!
You can use additional attribute in docs list
data-spec="'.$spec.'"
function display_docs()
{
global $con;
$query = "select * from doctb";
$result = mysqli_query($con,$query);
while( $row = mysqli_fetch_array($result) )
{
$username = $row['username'];
$price = $row['docFees'];
$spec = $row['spec'];
echo '<option value="' .$username. '" data-value="'.$price.'" data-spec="'.$spec.'">'.$username.'</option>';
}
}
function display_specs() {
global $con;
$query = "select distinct(spec) from doctb";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result))
{
$spec = $row['spec'];
$username = $row['username'];
echo '<option value = "' .$username. '" data-value = "'.$spec.'">'.$spec.'</option>';
}
}
then use JS to filter second select
document.getElementById('spec').onchange = function foo() {
let spec = this.value;
let docs = [...document.getElementById('doctor').options];
docs.forEach((el, ind, arr)=>{
arr[ind].setAttribute("style","");
if (el.getAttribute("data-spec") != spec ) {
arr[ind].setAttribute("style","display: none");
}
});
};
<div class="col-md-4">
<label for="spec">Specialization:</label>
</div>
<div class="col-md-8">
<select name="spec" class="form-control" id="spec">
<option value="" disabled selected>Select Specialization</option>
<option value="General">General</option>
<option value="Cardiologist">Cardiologist</option>
<option value="Pediatrician">Pediatrician</option>
<option value="Neurologist">Neurologist</option>
</select>
</div><br>
<div class="col-md-4"><label for="doctor">Doctors:</label></div>
<div class="col-md-8">
<select name="doctor" class="form-control" id="doctor" required="required">
<option value="" disabled selected>Select Doctor</option>
<option value="Ashok" data-spec="General">Ashok</option>
<option value="arun" data-spec="Cardiologist">arun</option>
<option value="Dinesh" data-spec="General">Dinesh</option>
<option value="Ganesh" data-spec="Pediatrician">Ganesh</option>
<option value="Kumar" data-spec="Pediatrician">Kumar</option>
<option value="Amit" data-spec="Cardiologist">Amit</option>
<option value="Abbis" data-spec="Neurologist">Abbis</option>
</select>
</div>
<label for="Course"> Course </label>
<select name="course" >
<option>select your course`</option>
<?php
$query="SELECT Course_Name FROM courses";
$result=mysqli_query($conn,$query);
if($result)
{
while($row=mysqli_fetch_array($result)) {
$Course_Name=$row["Course_Name"];
echo "<option value='".$Course_Name."'>".$Course_Name." </option>";
}
}
?>
</select>
<label for="Course"> Course </label>
<select name="course" onchange="if(this.value==-1){addop(this)}" >
<option>select your course</option>
<?php
$query="SELECT Course_Name FROM courses";
$result=mysqli_query($conn,$query);
if($result)
{
while($row=mysqli_fetch_array($result)) {
$Course_Name=$row["Course_Name"];
echo "<option value='".$Course_Name."'>".$Course_Name." </option>";
}
}
?>
<option value="-1">Add Another</option>
</select>
<script type="text/javascript">
function addop(r)
{
var c = window.prompt("Add Custom Course");
if(c!=null && c!= -1)
{
var str = '<option value="'+c+'">'+c+'</option>';
r.innerHTML += str;
r.value = c;
}
}
</script>
What I wanted to do is that when the value of the dropdown paymentstatus is unpaid, the other two dropdowns automatically won't be clicked. My code is working is just that I need to click the dropdown for the code to work since I'm using onclick. Is there any other way that I don't have to click the dropdown?
<div class="row">
<div class="col-md-3">
<label>Order Status</label>
<?php
require '../includes/db.php';
$sql = $connection->prepare("SELECT * FROM orderstatus");
$sql->execute();
$data = $sql->fetchAll();
echo "<select name='orderstatusid' id='orderstatusid' class='form-control orderstatusid' required>";
foreach($data as $row):
echo "<option class='dropdown' value='{$row['orderstatusid']}'>".htmlspecialchars($row["description"])."</option>";
endforeach;
echo "</select>";
?>
<br />
</div>
<div class="col-md-3">
<label>Payment Status</label>
<?php
require '../includes/db.php';
$sql = $connection->prepare("SELECT * FROM paymentstatus");
$sql->execute();
$data = $sql->fetchAll();
echo "<select name='paymentstatusid' id='paymentstatusid' class='form-control paymentstatusid' onchange='disableotherdropdown()' required>";
foreach($data as $row):
echo "<option class='dropdown' value='{$row['paymentstatusid']}'>".htmlspecialchars($row["description"])."</option>";
endforeach;
echo "</select>";
?> <br />
</div>
<div class="col-md-6">
<label>Date of Payment</label>
<input type="date" name="paiddate" id="paiddate" class="form-control paiddate" required/>
<br />
</div>
</div>
<script>
function disableotherdropdown() {
var val = $(".paymentstatusid").val();
if (val != '1') {
$('.paiddate').css('border-color', 'red');
$('.orderstatusid').attr("readonly", false);
$('.paiddate').attr("readonly", false);
} else {
$('.orderstatusid').attr("readonly", true);
$('.paiddate').attr("readonly", true);
$('.paiddate').css('border-color', '#ccc');
}
}
</script>
<script>
$(document).ready(function(){
$("#paymentstatusid").change(function()
{disableotherdropdown()});
function disableotherdropdown(){
var val =$("#paymentstatusid").val();
alert(val)
if (val !=1) {
alert('a');
$('#orderstatusid').attr("disabled",false);
} else {
alert('b');
$('#orderstatusid').attr("disabled", true);
}
}
});
</script>
<body>
<select id='paymentstatusid'>
<option selected val='0'>hhh</option>
<option value='1'>paid</option>
<option value='2'>unpaid</option>
</select>
<select id='orderstatusid'>
<option selected="selected" val='0' > </option>
<option val='1'>a</option>
<option val='2'>b</option>
</select>
</body>
Change
Readonly to disable works
$('#orderstatusid').attr("disabled", true);
I have 10 dropdown menus that are like:
Please Select
Item 1
Item 2
Item 3
---Appetizers---
Item 4
Item 5
---Main Courses---
Item 6
Item 7
---Lunch Specials---
Item 8
I want to grab the value if an Item is selected and print it on a confirmation page. Can I do that with a for loop and javascript? Like if I do this, how would I call it in HTML?
function getItems() {
var items = [
document.getElementById("item1").value,
document.getElementById("item2").value,
document.getElementById("item3").value,
document.getElementById("item4").value,
document.getElementById("item5").value,
document.getElementById("item6").value,
document.getElementById("item7").value,
document.getElementById("item8").value,
document.getElementById("item9").value,
document.getElementById("item10").value
];
for (int i = 0; i < items.length; i++) {
var count = 0;
if (
(item[i] != "Please Select") ||
(item[i] != "---Appetizers---") ||
(item[i] != "---Main Courses---") ||
(item[i] != "---Lunch Specials---")
) {
document.getElementById(i).innerHTML = item[i];
count++;
}
}
}
The dropdowns are populated from a MySQL database using php. My HTML/php:
Item 4
<select id="item4">
<option value"">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value"">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value"">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value"">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
</select>
<br>
You seem to generate a single drop down with all options. If that is intended, then make it one in which multiple selections can be made, which is not the default behaviour. For that to happen, add the multiple attribute to the select.
Then you need to add a listener to the change event, so that your code executes whenever the user selects or unselects item(s).
Note that you have forgotten some = after the value attributes. Also, it is not allowed to put a <br> tag after an option element. A select element should only have option children elements.
Here is how the corrected PHP could look:
Item 4
<select id="item4" multiple size="8">
<option value="">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value="">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value="">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value="">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
</select>
The JavaScript could be much simpler, as in this working snippet:
// Listen to the selection changes made:
document.querySelector('#item4').addEventListener('change', function () {
// For this demo, the text is stored in a DIV
document.getElementById('output').textContent =
[...this.selectedOptions] // convert selected options list to array
.filter ( option => option.value.length ) // option must have a value
.map( option => option.textContent ) // get text of option
.join('\n'); // add line breaks
});
Item 4 (hold Ctrl key to add selections)<br>
<select id="item4" multiple size=8>
<option value="">Please Select</option>
<option value="">---Appetizers---</option>
<option value="1">drink 1 - $1</option>
<option value="1.10">drink 2 - $1.10</option>
<option value="">---Main Courses---</option>
<option value="15">dish 1 - $15</option>
<option value="16">dish 2 - $16</option>
<option value="">---Lunch Secials---</option>
<option value="10">lunch 1 - $10</option>
<option value="11">lunch 2 - $11</option>
</select>
<div id="output" style="white-space:pre"></div>
I'm trying to create a group of dropdowns to create a "search". Each dropdown should be hidden until the previous dropdown has been selected. The value of the previous selection is irrelevant to the values on the next dropdown. They should only just be hidden if the previous dropdown is still in the default value. Is there any way to make this possible? I've been able to hide the second dropdown but from the third and forward, I haven't been able to make them appear dynamically.
This is how all the dropdowns look without any css:
I would like to have every dropdown after "Year" to be hidden, and after each dropdown, the next one would appear.
This is my current code:
<form name="ftpquery" method="post" action="sendFTP.php">
<select name="year">
<option value="">Year</option>
<?php for($i = 1992; $i < 2016; $i++) { ?>
<option value = "<?php echo $i; ?>"><?php echo $i; ?></option>;
<?php } ?>
</select>
<select name = "julian">
<option value = "">Julian</option>
<?php
for($i = 1; $i < 366; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "station">
<option value = "">Station</option>
<?php
while ($row = mysqli_fetch_array($response)){
?>
<option value = "<?php echo $row['Station'] ?>"><?php echo $row['Station'] ?></option>;
<?php } ?>
</select>
<select name = "month">
<option value = "">Month</option>
<?php
for($i = 1; $i < 13; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "day">
<option value = "">Day</option>
<?php
for($i = 1; $i <= 31; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "hour">
<option value = "">Hour</option>
<?php
for($i = 0; $i <= 23; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "min">
<option value = "">Min</option>
<option value = "00"><?php echo "00" ?></option>;
<option value = "15"><?php echo "15" ?></option>;
<option value = "30"><?php echo "30" ?></option>;
<option value = "45"><?php echo "45" ?></option>;
</select>
<select name = "version">
<option value = "">Version</option>
<option value = "a"><?php echo "a" ?></option>;
<option value = "b"><?php echo "b" ?></option>;
</select>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
Is there any way to make this possible?
Thank you for your time and help!
I'd run something in jQuery like this:
<style>
select.date-select {
display: none;
}
</style>
<script type="text/javascript">
function selectShowHide()
{
// Loop through all the .date-select selects
$("select.date-select").each(function() {
if ($(this).val() == 0) {
// If it has no value hide it
$(this).next("select.date-select").hide();
} else {
// If it does show it
$(this).next("select.date-select").show();
}
});
}
$(function(){
// On load activate the show hide
selectShowHide();
// Show the first one
$("select.date-select").first().show();
// On change of select work out what to hide
$("select.date-select").change(function(){
selectShowHide();
});
});
</script>
You'd need to give all of your selects a class of date-select:
<select class="date-select">
</select>
And a fiddle: http://jsfiddle.net/hnwLqo7h/