I use a dropdown menu to choose options from a list which I get from a SQL query:
<div id="container" action="import.php" method="post" enctype="multipart/form-data">
<span id="pickfiles">[Upload files]</span>
</div>
echo ' <form action="import.php" method="post" id="pickfiles" enctype="multipart/form-data">
Adresslieferant: <select name="taskOption">
<option value="" disabled selected hidden>Adresslieferanten auswählen</option>';
foreach ($sql as $row) {
echo "<option value=' ". $row['firma'] . " ' name='adresslieferung' id='adresslieferung' type='text'>". $row['firma'] ."</option>";
}
echo ' </select>
</form> ';
?>
This is part of a form where I upload a csv file and this code snippet should choose one of the options of the dropdown menu which will be handed over in a javascript code snippet:
FileUploaded: function(up, files, info) {
window.open('import.php?file='+files.name+'&address_delivery='+(document.getElementById('adresslieferung') && document.getElementById('adresslieferung').value ? document.getElementById('adresslieferung').value : ''), '_blank')
},
But this way no matter which option I select at the dropdown menu. It always passes over the first choice of the dropdown menu. I guess it's because it just picks the first one with id='adresslieferung' but I don't know how else I could do it.
Problem is you are giving id to <options> instead of <select>, that's why when you try to get data using this id, it gives you the first value every-time.
Remove id from <options> and add it to <select>
<div id="container" action="import.php" method="post" enctype="multipart/form-data">
<span id="pickfiles">[Upload files]</span>
</div>
echo '<form action="import.php" method="post" id="pickfiles" enctype="multipart/form-data">
Adresslieferant:
<select name="taskOption" id='adresslieferung'><!-- added id here-->
<option value="" disabled selected hidden>Adresslieferanten auswählen</option>';
foreach ($sql as $row) {
//Remove id from options
echo "<option value=' ". $row['firma'] . " ' name='adresslieferung' type='text'>". $row['firma'] ."</option>";
}
echo '</select>
</form>';
?>
Note:jQuery/javascript treated id as a unique attribute so make sure an id doesn't use twice in an HTML. You can use class concept in case you want to apply some event handling on a bunch of html elements.(give them same class and apply event handling in one go)
Related
I used this code to select classes for students from the database in a dropdown. It appeared correctly. Then I when I realized that I actually want to select more than one class for a student, I added multiple. It showed as a multiple but still inserts only one value in database table.
<?php
require_once('../config.php');
$class_result = $conn->query('select * from class');
?>
<label for="exampleFormControlTextarea1">Class</label>
<select class="form-control" name="class[]" id="class" multiple>
<option value=""></option>
<?php
if ($plot_type_result->num_rows > 0) {
// output data of each row
while ($row = $plot_type_result->fetch_assoc()) {
?>
<option value="<?php echo $row["class"]; ?>">
<?php echo $row["class"]; ?>
</option>
<?php
}
}
?>
</select>
Now I want this select class to be a multi select. If I add multiple it becomes a multiple but doesn't really inserts the multiple values I select. Only selects the last selected from the database and inserts it as a single one. How can I achieve multi select and actually pass it as an array to the database with more than one value?
$classDatas= implode(", ", $datas);
You can try to save the array in a single column by converting it to text with implote.
It is possible to change dropdown to list in form?
can't embed an image because of the reputation
here's my form with dropdown :
then I've change the value inside dropdown to list like this:
but the problem, my first image can execute the button and save the value, but when I change the form interface like my 2nd image, the button can't execute (nothing effect showing after clicking the button)
my code on dropdown looks like :
<div class="form-group">
<label for="ik">Kriteria</label>
<select class="form-control" id="ik" name="ik">
<?php
$stmt2 = $pgn2->readAll();
while ($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)){
extract($row2);
echo "<option value='{$id_kriteria}'>{$nama_kriteria}</option>";
}
?>
</select>
</div>
then I change the code of <select> to <form> like this to showing list :
<div class="form-group">
<form class="form-control" id="ik" name="ik">
<?php
$stmt2 = $pgn2->readAll();
while ($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)){
extract($row2);
?>
<option value="<?php echo $id_kriteria; ?>"><?php echo $nama_kriteria; ?></option>
<input type="text" class="form-control" id="nn" name="nn">
<?php
}
?>
</form>
</div>
Problem:
the 2nd code is <form> inside <form>, because if I change the <form> tag to <label> or etc, the interface looks bad,
may someone help me how to do?
I have two "forms" that consist of a single dropdown list each. I'm submitting both forms with javascript onchange="this.form.submit()" I need to reserve a variable, if it is set, on the second form submit. I have the form submitting to the same page and currently, it isn't passing the first variable.
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="GET">
<select name="show" style="width:100%;" onchange="this.form.submit()">
<option value="cond" <?php if(isset($_GET['show'])&&$_GET['show']=='cond'||!isset($_GET['show'])) { echo 'selected'; } ?>>Condensed</option>
<option value="full" <?php if(isset($_GET['show'])&&$_GET['show']=='full') { echo 'selected'; } ?>>Show All</option>
</select>
</form>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="GET">
<select name="sort_slsp" style="width:100%;" onchange="this.form.submit()">
<option value="">--Choose Salesperson--</option>
<?php
$get_all_slsp = mysqli_query($lmcon, "SELECT * FROM slsps ORDER BY slsp_name");
while($row = mysqli_fetch_array($get_all_slsp)) {
echo '<option value="' . $row['slsp_id'] . '">' . $row['slsp_name'] . '</option>';
}
?>
</select>
</form>
When the form method is GET, browsers overwrite any possibly existing query string part of the URL specified via the action attribute with the new query string they construct from the form fields.
The easiest solution here is to add that additional value you want to submit as a hidden input field into the form:
<input type="hidden" name="foo" value="bar">
Seing as your first select field has the name show, and that is likely the value you want to pass on here(?), you’d fill that value attribute as such,
value="<?php echo htmlspecialchars($_GET['show']); ?>"
(Adding a check for whether that parameter exists in the first place, and maybe output a default value if not, I’ll leave up to you.)
I have a page that displays a list of products. The user can select the quantity of a product to order and then click the order button. This should place a reference to the quantity and the product ID in a Cookie. However currently the button is not even being registered. When I click on it nothing happens.
If I place the button outside of the foreach loop then it works. Does anyone know what is going on?
Below is the code for the list of products
<?php if($products): ?>
<ul>
<?php foreach($products as $product): ?>
<h3 id="stock_code"><?= get_field('stock_code', $product->ID); ?></h3>
<p>Description: <?= get_field('description', $product->ID); ?></p>
<p>Quantity Per Pallet: <?= get_field('quantity_per_pallet', $product->ID); ?></p>
<!-- Quantity Dropdown -->
Amount <select id="order_amount<?= $product->ID; ?>" name="amt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" value="Add to Order" id="orderBtn"/>
<?php endforeach; ?>
</ul>
<? endif ?>
This is the code to be executed when the button is clicked
$("#orderBtn").click(function(event){
//Show the order Box
$(".order-alert").show();
event.preventDefault();
//Create the Array
var productArray = [];
//If no Cookie exists, create one and add the Array
if ($.cookie('order_cookie') === undefined) {
console.log("Create a new cookie");
$.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
//If the Cookie already exists do this
} else {
console.log("Read the cookie");
productArray = JSON.parse($.cookie('order_cookie'));
console.log($.cookie('order_cookie'));
//Append items onto the Array
}
//Display the number of items in the Array in the Order Box
$('#order_counter').html(productArray.length);
});
I'd appreciate any help on the matter
Don't use ID on button. You have to use class if you want to assign event to multiply objects.
When you are using id selector jQuery assign event only to first object becouse ID sholud be unique.
Change:
$("#orderBtn").click(function(event){
..
}
To:
$(".orderBtn").click(function(event){
..
}
And HTML declaration:
<input type="submit" value="Add to Order" id="orderBtn"/>
To:
<input type="submit" value="Add to Order" class="orderBtn"/>
I have two dropdown boxes for car makes and models, when a make is selected i need all its models to show in the next box. As of now using the following code the models show up when the dropdown is clicked.
window.onmousedown = function(e){
this.id = e.target.id;
if(this.id == "vehicle_makes"){
var make = document.getElementById("vehicle_makes").value;
ajaxCall(make);
}
}
However i need the javascript to trigger when an option from the dropdown is selected rather than when the drop down is opened.
here also is the html - with some php
<div class="vehicle-search-wrap">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<select id="vehicle_makes" name="s">
<?php
foreach($makes as $make){ //put all makes in dropdown
echo "<option value='". $make ."'>". $make ."</option>";
}
?>
</select>
<select id="model_drop" name="vmodels">
<?php
//nothing to start
?>
</select>
<input type="submit" value="Search Vehicle" />
</div>
</form>
</div>
use the onchange event of selectbox.
here is a demo
Try this:
<select name="Pizza" size="5"
onchange="myFunctionHere()">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Roma</option>
</select>