<fieldset>
<legend>Available Areas</legend>
<select id="availableAreas">
<?php
$sql = "SELECT * FROM workArea";
$result = $db->query($sql);
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
$area = $row['name'];
echo "<option value='$id'>$area</option>";
}
?>
</select>
<input id="addArea" type="button" value="Add area" /><br />
<select id="workAreas" style="min-width: 200px" required multiple name="workAreaId"></select>
</fieldset>
The code above produces this output:
I haven't put the JavaScript in as it's not relevant to the question but clicking 'Add area' would add the area into the <select> element (the multiple list below the drop down).
When the user submits the form I need to send all of the <option>s that the user added to the list. Is there a way I can do this?
Thanks
Assuming you are using jQuery:
$('#yourForm').submit(function() {
$('#workAreas option').prop('selected', 'selected');
});
This should select all items in your multiple select when the form is submitted.
Another option would be to add a hidden input field for every Option. When you add [] to the name of the field it will be available on the server side as an array.
<input type="hidden" name="workareas[]" value="X" />
Related
I have a dropdown menu with selected options from my database. They are linked to a table which when submit is pressed will display the table with results from the dropdown. e.g if the dropdown states snake, a submit will show me a table with just snakes. When I press the back browser button however i am unable to see previous results. e.g if i click snake then deicide to click crocodile , if i then press back browser button i cannot see the table displaying snakes. I want to be able to click snake then crocodile then when going back be able to see previous selected results e.g table with snakes.
<option selected='true' disabled='disabled'>Select option </option>
<option value='All'>All</option>
<?php
$s = "SELECT DISTINCT species,status from animal";
$result = $con->query($s);
if($result = mysqli_query($con, $s)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
if($row['status']=='rare'){
$output = "<option value='".$row['species']."'"; //keeps select option on dropdown the same upon page refresh
if($_GET['fetching'] == $row['species']){
$output .= " selected='selected'";
}
$output .= ">".$row['species']."</option>";
echo $output;
if($_GET['fetching']){
// $output .= " selected='selected'";
$_SESSION['animal6'] = $_GET['fetching'];
header("Location: room.php?pn=1"); //added 12.04.22
exit;
}
}
}
}
}
?>
</select>
<input id='submit' name='submit' type='submit' value='submit' ></input>
</form>
<strong>Type Of Party</strong>
<select name="p_name">
<?php
$sql = mysqli_query($con, "SELECT * FROM party");
while ($row = $sql->fetch_array()){
echo '<option value="'.$row['type_party'].'">'.$row['type_party'].'</option>';
}
?>
</select>
<p>
<strong>Max No. Of Children</strong>
<input type="text" id="txt" name="nocc" placeholder="Type Your children" required="required" />
</p>
I want to retrieve data in my textfield with the corresponding data of the option which i select in droplist.
In my table: I have id, Type_party, capacity, and I want to receive capacity in textfield when i select type_party in dropdownlist. Please help me out.
Given, you use jQuery, this could easily achieved by storing the capacity in an data attribute.
<strong>Type Of Party</strong>
<select name="p_name" >
<?php
$sql = mysqli_query($con, "SELECT * FROM party");
while ($row = $sql->fetch_array()){
echo '<option value="'.$row['type_party'].'" data-capacity="' . $row['capacity'] . '">'.$row['type_party'].'</option>';
}
?>
</select>
<p>
<strong>Max No. Of Children</strong>
<input type="text" id="txt" name="nocc" placeholder="Type Your children" required="required" />
</p>
with the following javascript code
$('select[name="p_name"]').on('change', function() {
$('#txt').val($(':selected', this).data('capacity'));
});
Try this simple JavaScript
you need add the capacity attribute of data-capacity for the each option
Then apply with onchange function to select
Finally match the selecIndex then pass data-capacity value to textfield using dataset
JavaScript
function getvalue(that) {
documenyt.getElementById('txt').innerHTML = that.options[that.selectedIndex].dataset.capacity
}
php
<strong>Type Of Party</strong>
<select name="p_name" onchange="getvalue(this)">
<?php
$sql = mysqli_query($con, "SELECT * FROM party");
while ($row = $sql->fetch_array()){
echo '<option value="'.$row['type_party'].'" data-capacity="'.$row['capacity'].'">'.$row['type_party'].'</option>';
}
?>
</select>
<p>
<strong>Max No. Of Children</strong>
<input type="text" id="txt" name="nocc" placeholder="Type Your children" required="required" />
</p>
The scenario:
I'm allowing a user to select a number of pizzas, they then go to a page where they can choose different options for each pizza. The idea is that as they change an option for a pizza the results are shown in a results div for that pizza with the price. If the user has chosen 3 pizzas there will be lots of options with three divs to show the results for each, and a grand total div.
I have successfully looped through and created the option boxes, but I am struggling to see the best way to get the selections of the dynamic form values so I can do calculations and run some ajax to populate the result divs.
This is the generated forms(though they could probably all go into one form)
<?php
$boxNum = 0; ///to append to form input id names
///start loop
foreach(loops through array){///start loop
$theid = ///this successfully assigns the id
$pizzaname = /// this successfully assigns the pizza name
?>
<div id="pizza_option_<?php echo $boxNum; ?>" >
<form action="" method="post">
<input name="theid_<?php echo $boxNum; ?>" id="theid_<?php echo $boxNum; ?>" type="text" value="<?php echo $theid; ?>" class="bk" >
<input name=" pizzaname _<?php echo $boxNum; ?>" id=" pizzaname _<?php echo $boxNum; ?>" type="text" value="<?php echo $pizzaname?>" class="bk">
<select name="sizes_<?php echo $boxNum; ?>" id="sizes_<?php echo $boxNum; ?>" class="bk">
<?php avaliable_sizes($id); ///fuction to get available sizes ?>
</select>
<select name="topping_<?php echo $boxNum; ?>" id="topping_<?php echo $boxNum; ?>" class="bk">
<?php avaliable_toppings($id); ///fuction to get available toppings ?>
</select>
</form>
</div>
<?php $boxNum ++; } // end of loop ?>
<div id="pizza_results_<?php echo $boxNum; ?>" >
Display selection choices and cost for pizza
</div>
<div id="grand_total_for_pizzas" >
Display total of all pizzas
</div>
I have found it difficult to find resources that, a cover both dynamic form input values and event trigger when a form input has been changed.
You will see from my pseudo code that I have appended a unique id to the input ID as this I am thinking this can be used to identify a set of pizza inputs.
If anyone can point me in the right direction I would be grateful. I only require guidance on identifying when there is a change on one of the values for a pizza, not on any calculations or anything else.
Ok, after a little more digging around I found a solution:
by adding an event to the inputs:
onchange="calc(this)"
I can append the id I assigned to the input ID and get the values of the other elements
function calc(elem) {
//just get the number
var id = $(elem).attr("id").match(/\d+$/);
//append the id to the element ID
alert($('#pizzaname_'+id).val());
}
You have to use event delegation for dynamically created elements.
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Example:
$(document).ready(function(){
// to listen for value changes of the element with class 'bk':
// (event is attached to the document)
$(document).on('change', '.bk', function(){
var value = $(this).val();
// do stuff when value has been changed...
});
// attach event to other element (must be one of the parents of the inputs)
$('#some_parent_element').on('change', '.bk', function(){
var value = $(this).val();
// do stuff when value has been changed...
});
})
I would also add a data-id attribute to each input, so that you can easily get the id:
<select data-id="<?php echo $boxNum; ?>" name="sizes_<?php echo $boxNum; ?>" id="sizes_<?php echo $boxNum; ?>" class="bk">
And then in jQuery:
$(document).on('change', '.bk', function(){
var id = $(this).data('id');
var pizza_name = $('pizzaname_'+id).val();
});
I have a HTML form with dropdown list populated by php. I want the user to be able to select an option from the dropdown list and click on "Proceed" button which would open a new page based on the selected value.
<form name="selectPatient" method="post">
<div align="centre">
<select name="patient_dropdown">
<?php
include "connection.php";
$sql = mysql_query("SELECT Name from patient_info");
while ($row = mysql_fetch_array($sql)) {
echo "<option value=".$row['Name'].">".$row['Name']."</option>";
}
?>
</select>
</div>
<br>
<br>
<input type="submit" name="submit" value="Proceed"/>
</form>
<?php
if(isset($_POST['submit'])) {
header("Location: http://localhost/lei/test.com/proper/specific_patient.php");
}
?>
The code above works fine. How do I get the selected value from dropdown list?? I want to use the selected value to run a SQL query using php to get other details of the patient and then call a javascript file with that information. How can I do that??
Thanks in advance !
You need to check your $_POST variables on submit:
$patient_dropdown = isset($_POST['patient_dropdown']) ? $_POST['patient_dropdown'] : false;
Some Background information:
I have a table with two fields, TECHNAME and TECHCOLOR
What I am trying to do is:
Have a SQL generated Drop down menu based on TECHNAME (DONE)
Have TECHCOLOR update in text box when TECHNAME is selected (ISSUE IS HERE)
What is wrong
Currently, the textbox is showing TECHNAME insead of TECHCOLOR
Code
JavaScript:
<script type="text/javascript">
function load_value(value)
{
document.getElementById("test").value=value;
}
</script>
HTML/PHP:
<table>
<form method="post" action="">
<?php
$select_box='<select name="edittech" id="edittech" onchange="javascript:load_value(this.value);">';
$input="";
$result = $conn->query("select * from techs");
while ($row = $result->fetch_assoc()) {
$select_box .='<option id="name" value="'.$row["TECHNAME"].'">'.$row['TECHNAME'].'</option>';
}
$input ='<input type="text" name="test" id="test" value="" />';
echo $select_box."</select>";
echo $input;
?>
Thanks in advance! :D
When you submit the form, is the value for your edittech dropdown list used at all? If it isn't then you can simply change the value part of your dropdown to be TECHCOLOR and it will still show TECHNAME on the dropdown.
while ($row = $result->fetch_assoc()) {
$select_box .= "<option id=\"name\" value=\"{$row['TECHCOLOR']}\">{$row['TECHNAME']}</option>";
}