Confirmation page - javascript

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>

Related

How to hide select options when there is no data

I'm building a drop-down list with options containing data from a database and want to hide options which have zero data.
I have tried an if statement using continue but failing to catch the live data values from the database.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php foreach($database as $row):
if ($row['topic'] == 0) {
continue;
}
else {
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php endforeach; ?>
</select>
Is there any clever javascript-, php-, etc. code that can deactivate/hide options from a database which are empty.
Add this in your css:
select option:empty {
display:none
}
I think you should try this.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php
if(count($database) > 0)
{
foreach($database as $row)
{
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php
}
}
?>
</select>
Hope it helpful for you.

How to select a selected value from database in PHP

Im trying to make a select that will help me in my "edit user" page.
I have this code but I don´t know how to change it so I can load the value selected from the database.
This code it´s working...
<div class="form-group">
<th><label for="text">Tipo Sanguineo:</label></th>
<td><select class="form-control" id="sangue" name="tipo_sangue">
<option value="O-" <?php if ($cl_tipo_sangue == "O-") echo 'selected';?> >O-</option>
<option value="O+" <?php if ($cl_tipo_sangue == "O+") echo 'selected';?> >O+</option>
<option value="A-" <?php if ($cl_tipo_sangue == "A-") echo 'selected';?> >A-</option>
<option value="A+" <?php if ($cl_tipo_sangue == "A+") echo 'selected';?> >A+</option>
<option value="B-" <?php if ($cl_tipo_sangue == "B-") echo 'selected';?> >B-</option>
<option value="B+" <?php if ($cl_tipo_sangue == "B+") echo 'selected';?> >B+</option>
<option value="AB-" <?php if ($cl_tipo_sangue == "AB-") echo 'selected';?> >AB-</option>
<option value="AB+" <?php if ($cl_tipo_sangue == "AB+") echo 'selected';?> >AB+</option>
</select></td>
</div>
I need to do this with this code:
<?php $dts = DBRead11(); ?>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>"><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
The code that I need to change is loading the values from the database to the site, and Im not sure how to see the selected one if I load them from the database.
Try this,
<?php $dts = DBRead11(); ?>
<?php $cl_tipo_sangue = "B+"; ?>// here you need to add db value which you saved in DB
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>" <?php if ($cl_tipo_sangue == $option['nome']) { echo 'selected="selected"'; } ?> ><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
Steps:
1) Take an array to save drop down options' id name pairs.
2) Loop over it in the <select> tag for <option>s.
3) Check if selected id is the current iteration id.
4) If yes, add attribute selected="selected" to current <option>
And check in the loop if selected one.
<?php
$bloodGroups = [
'O-' => 'O-',
'O+' => 'O+',
'A-' => 'A-',
'A+' => 'A+',
'B-' => 'B-',
'B+' => 'B+',
'AB-' => 'AB-',
'AB+' => 'AB+'
];
?>
<div class="form-group">
<th><label for="text">Tipo Sanguineo:</label></th>
<td><select class="form-control" id="sangue" name="tipo_sangue">
<?php
if (! empty($bloodGroups)) {
foreach ($bloodGroups as $bgid => $bloodGroup) {
$selected = ($cl_tipo_sangue == $bgid) ? 'selected="selected"' : '';
?>
<option value="<?php echo $bgid;?>" <?php echo $selected;?>><?php echo $bloodGroup;?></option>
<?php
}
}
?>
</select></td>
</div>
You need to fetch the value you saving in database then
<?php
$nome = $database_value;
?>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>" <?php echo ($option['nome'] == $nome)?'selected':'' ?>><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
Using javascript
<?php $dts = DBRead11(); ?>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>"><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
<script>
document.querySelector('#diretor_turma').value = '<?= $cl_tipo_sangue ?>'
</script>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
$select = (isset($cl_tipo_sangue) && $cl_tipo_sangue == $option['nome'])?"selected = 'selected'":"";?>
<option value="<?php echo $option['nome']; ?>" <?php echo $select; ?>><?php echo $option['nome']; ?></option>
<?php } ?>
</select>

how can i create 2 dynamic dropdown from one table in database?

Can someone help me on how to link up 2 dropdown list which data came from the same table in the database, is it possible to do this way because I can only find a solution which there must be 2 table in the database to link up those two. this is how should it work, 1st, the user choose the department and the 2nd dropdown will show only the people that assigned from that particular department.
database table has id,name,department.
the department works already but the 2nd dropdown didnt work to filter from the department. Can someone help me to know what is wrong with this?
index.php
<?php
$query ="SELECT DISTINCT company from hrar";
$results = $db_handle->runQuery($query);
?>
<script>
function getName(val) {
$.ajax({
type: "POST",
url: "getName.php",
data:'department='+val,
success: function(data){
$("#nameList").html(data);
}
});
}
function selectDepartment(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
<label>Department:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getName(this.value);">
<option value="">Select Department</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["company"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>Name:</label><br/>
<select name="state" id="nameList" class="demoInputBox">
<option value="">Select Name</option>
</select>
//below is the getName.php
if(!empty($_POST["company"])) {
$query ="SELECT DISTINCT name from hrar = '" . $_POST["company"] . "'";
$results = $db_handle->runQuery($query);
?>
<option value="">Select Name</option>
<?php
foreach($results as $name) {
?>
<option value="<?php echo $name["id"]; ?>"><?php echo $name["name"]; ?></option>
<?php
}
}
?>
Try this.
<select name="filter" id="filter" onchange="this.form.submit();">
<option value="name">Select Name</option>
<?php
$sql = "SELECT DISTINCT name FROM hr";
$result = mysqli_query($conn,$sql);
while ($row = mysqli_fetch_array($result))
{
echo "<option value='". $row['name'] ."'>" .$row['name'] ."</option>";
}
?>
</select>

Creating a cascading dropdown group

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/

using javascript code inside a PHP while loop for multiple text fields

I am selecting data from a database using PHP with some javascript inside the loop:
<script type="text/javascript">
$('#voip_type<?php echo $i; ?>').on('change',function(){
var val = $(this).val();
if( val ==="no"){
$("#producttype<?php echo $i; ?>").show()
}
else if( val ==="extension")
{
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
else {
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
});
</script>
each time it loops round, it adds +1 onto $i
this does the same in the textfield IDs so the code in the JS and the text field IDs match names but the values aren't changing on the textfields and select elements
here is one example of a select element:
<select name="voip_type<?php echo $i; ?>" id="voip_type<?php echo $i; ?>" style="width:120px;">
<option value="">VoIP Item?</option>
<optgroup label="No">
<option value="no" <?php if($result["voip_type"] != 'extension' or $result["voip_type"] != 'queue' or $result["voip_type"] != 'ivr' or $result["voip_type"] != 'storage') { echo 'selected="selected"'; } ?>>Continue</option>
</optgroup>
<optgroup label="Yes">
<option value="extension" <?php if($result["voip_type"] == 'extension') { echo 'selected="selected"'; } ?>>Extension</option>
<option value="queue" <?php if($result["voip_type"] == 'queue') { echo 'selected="selected"'; } ?>>Queue</option>
<option value="ivr" <?php if($result["voip_type"] == 'ivr') { echo 'selected="selected"'; } ?>>IVR</option>
<option value="storage" <?php if($result["voip_type"] == 'storage') { echo 'selected="selected"'; } ?>>Storage</option>
</select>
UPDATE - Full code:
<?php
$sql="SELECT * FROM customer_billing where customer_seq = '".$_GET["seq"]."' ";
$rs=mysql_query($sql,$conn) or die(mysql_error());
$i=0;
while($result=mysql_fetch_array($rs)) {
$i++; ?>
<script type="text/javascript">
$('#voip_type<?php echo $i; ?>').on('change',function(){
var val = $(this).val();
if( val ==="no"){
$("#producttype<?php echo $i; ?>").show()
}
else if( val ==="extension")
{
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
else {
$("#producttype<?php echo $i; ?>").val("VoIP Telephony").show()
}
});
</script>
<input type="hidden" name="sequence<?php echo $i; ?>" size="30" value="<?php echo $result["sequence"]; ?>" />
<select name="voip_type<?php echo $i; ?>" id="voip_type<?php echo $i; ?>" style="width:120px;">
<option value="">VoIP Item?</option>
<optgroup label="No">
<option value="no" <?php if($result["voip_type"] != 'extension' or $result["voip_type"] != 'queue' or $result["voip_type"] != 'ivr' or $result["voip_type"] != 'storage') { echo 'selected="selected"'; } ?>>Continue</option>
</optgroup>
<optgroup label="Yes">
<option value="extension" <?php if($result["voip_type"] == 'extension') { echo 'selected="selected"'; } ?>>Extension</option>
<option value="queue" <?php if($result["voip_type"] == 'queue') { echo 'selected="selected"'; } ?>>Queue</option>
<option value="ivr" <?php if($result["voip_type"] == 'ivr') { echo 'selected="selected"'; } ?>>IVR</option>
<option value="storage" <?php if($result["voip_type"] == 'storage') { echo 'selected="selected"'; } ?>>Storage</option>
</select><br />
<select name="producttype<?php echo $i; ?>" id="producttype<?php echo $i; ?>" style="width:120px;">
<option value="">none</option>
<option value="Broadband">Broadband</option><option value="Hosted Exchange">Hosted Exchange</option><option value="Offsite Backup">Offsite Backup</option><option value="PC Maintenance">PC Maintenance</option><option value="Phone Lines (PSTN/ISDN)" selected="selected" >Phone Lines (PSTN/ISDN)</option><option value="Software Development">Software Development</option><option value="VoIP Telephony">VoIP Telephony</option><option value="Web Hosting">Web Hosting</option> </select>
<input type="text" name="productname<?php echo $i; ?>" size="30" value="<?php echo $result["productname"]; ?>" />
<?php
}
?>
Your code is super hard to debug. My suggestion is that you turn your code into 2 separated piece of code one for PHP and one for Javascript. You can mix 2 languages but it doesn't mean that you should mix them. Instead do this
<script type="text/javascript">
var result = <?= json_encode($the_final_query_result) ?>;
</script>
The idea is to turn all your PHP variables that will be used in JS into JS variables. Then in you JS code you can just use normal JS functions to loop through the variables instead of mixing PHP loops and JS code (and HTML code) which makes your code "impossibru" to debug
Another thing is that mysql_fetch_array is deprecated as of PHP 5.5 (http://fi1.php.net/mysql_fetch_array), you should consider switching to something else
if you want to php code inside javascript or jquery then you should do like this..
funciton() {;}

Categories

Resources