We Keep Coding

select multiple products from selectbox and enter quantity for each selected product

it is the simple POS system for one product.But now i have to extend for multiple products.it works like when i select multiple product it shows a separate box where the selected product name is written and in parallel there is an input box of quantity.is it possible through jquery or in php?it would be a great help if someone helps me to sort out
<form method="POST" style="width:60%;margin-left:200px">
<div class="form-group">
<label>Choose Product:</label>
<select name="product_id" class="form-control" class="select" id="select_items" multiple >
<option disabled selected>-- Select Product --</option>
<!-- to retrive data from database and show into dropdown -->
<?php
$db = mysqli_connect('localhost', 'root', '', 'login');
$records = mysqli_query($db, "SELECT * From products where deleted=0"); // Use select query here
while($data = mysqli_fetch_array($records))
{
echo "<option value=". $data['id'] ." >" .$data['name'] ." </option>"; // displaying data in option menu
}
?>
</select>
<label> Quantity: </label>
<input type="text" name="quantity" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" />
</div>
<button class="btn" name="submit-product" type="submit" ID="btnClick" >Submit</button>
</form>

Yes, it can be done using jQuery.
We have to have a wrapper for quantity selection area using id, just need to have a onchange event listener to selection.
When we change selection, jQuery function calls, within that jQuery function, we have to gather the all options selected and then using for loop, we can clone the quantity wrapper content and change the content.
For example:
function populate() {
$('#select_items :selected').each(function() {
let html = '';
html += '<div>';
html +='<label> Quantity:'+$(this).text()+' </label>';
html += '<input type="text" name="quantity[]" class="form-control" ID="txtName" placeholder="Enter Quantity" required="" val='+$(this).val()+' />';
html += '</div>'
$('#selected-quantity').append(html)
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" style="width:60%;margin-left:200px">
<div class="form-group">
<label>Choose Product:</label>
<select name="product_id" class="form-control" class="select" id="select_items" multiple onchange="populate()">
<option disabled selected>-- Select Product --</option>
<option value="foo1">foo1</option>
<option value="foo2">foo2</option>
<option value="foo3">foo3</option>
<option value="foo4">foo4</option>
<option value="foo5">foo5</option>
</select>
<div id="selected-quantity">
</div>
</div>
<form>

Multiple Values in Valvalue?

I am new in jquery and I got a very few knowledge I created an input field in which jquery grab a dropdown selected values if I put only one value in setting value field its working fine as I want to grab all var value in a single //Setting Value and also want only first two letters of the selected value: like if I choose dropdown value as Morning Class I want only "MO" and same for the rest variables as Section XI Class I am looking for only XI my code is given below:
Html Code
<form id="form1" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
<select id="section_id" name="section_id" class="form-control" >
<option value="XI Class">XI Class</option>
<option value="XII Class">XII Class</option>
</select>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<input id="input" name="input" placeholder=""
type="text" class="form-control " value="" /></div></div>
</div>
</form>
jquery Code
$("#class_id,section_id").on("change",function(){
//Getting Value
var selValue = $("#class_id :selected").text();
var selValue1 = $("#section_id :selected").text();
//Setting Value
$("#input").val(selValue,selValue1);
});

How to use ajax to populate input with select option with data from database?

The question I've got in my test goes like so.
You have 1 select with 2 options(item number1 and item number2) and 2 input fields(price,weight). How would you make the input fields change without writing in them?
So after a long time of searching and trying stuff out (without much luck) I've learned that I need to use ajax for this to work. so I have tried a bunch and this is the code I've tried edit so it would work.
getAllproduct is just a select that fetches all the data inside my table with products. this is id, name, item_number, price, weight. anyhow here is my code
<?php
$sth = $db->prepare("SELECT `price`,`weight` FROM product");
$sth->execute();
$row = $sth->fetch(PDO::FETCH_ASSOC);
$row = array();
json_encode($row);
?>
product.php
<div class="form-group col-2">
<label for="product">Item number</label>
<?=#$error['product']?>
<select class="form-control" name="product" id="product" onChange="getproduct(this.value)">
<?php foreach ($csv->getAllproduct() as $csv) { ?>
<option value="<?= #$csv->id ?>" selected><?= #$csv->product?></option>
<?php } ?>
</select>
</div>
<div class="form-group col-2">
<label for="weight">weight</label>
<?=#$error['weight']?>
<input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
<label for="price">price</label>
<?=#$error['price']?>
<input type="text" name="price" id="price" class="form-control">
</div>
<div class="input-group">
<button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>
<script>
function getproduct(val){
$.ajax({
type:"POST",
url:"pages\call.php",
data: 'product='+val,
success: function(response){
var result = JSON.parse(response);
if (result.response == true) {
var data = result.rows;
$("#weight").val(data[0].weight);
$("#price").val(data[0].price);
}else if (result.response == false) {
$('#product').append('<option>No products were found!</option>');
}
}
});
}
</script>
What I expect to be able to do is select an item number and it will automatically populate the inputfields price and weight with the data inside the database from the item number.
I haven't learned a lot of Ajax/js so Any help is appreciated.
Attempt: on other project using this code. havent gotten it to work yet.
<form class="row" method="POST" >
<div style="border-color:#dddddd;" class="dropdown-divider col-12"></div>
<script>$('#Varenummer').on('change', function() {
var selectedOption = $(this).find('option:selected');
$('#Tolminus').val(selectedOption[0].dataset.Tolminus);
$('#Tolplus').val(selectedOption[0].dataset.Tolplus);
});
</script>
<div class="form-group col-2">
<label for="Varenummer">Varenummer</label>
<?= #$error['Varenummer'] ?>
<select class="form-control" name="Varenummer" id="Varenummer">
<?php
foreach ($csv->getAllVarenummer() as $csv) {?>
<option value="<?= #$csv->id ?>" data-Tolminus="<?= #$csv->Tolminus ?>"
data-Tolplus="<?= #$csv->Tolplus ?>"><?= #$csv->Varenummer ?></option>
<?php }?>
</select>
</div>
<div class="form-group col-2">
<label for="Tolminus">Tol -</label>
<?= #$error['Tolminus'] ?>
<input type="text" name="Tolminus" id="Tolminus" class="form-control" value="">
</div>
<div class="form-group col-2">
<label for="Tolplus">Tol +</label>
<?= #$error['Tolplus'] ?>
<input type="text" name="Tolplus" id="Tolplus" class="form-control" value="">
</div>
<div class="input-group">
<button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>
the jquery scrips and others are added in the footer.

As you asked above in comments: i need it to the input to change when i select an option. can i still only use php?...
Yes.
You might not need ajax at all. For your task I'd recommend to preload weight and price values into data- attributes of corresponding option elements. Then, on the select change, just get those values and paste them to inputs.
$('#product').on('change', function() {
var selectedOption = $(this).find('option:selected');
$('#weight').val(selectedOption[0].dataset.weight);
$('#price').val(selectedOption[0].dataset.price);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-2">
<label for="product">Item number</label>
<select class="form-control" name="product" id="product">
<option disabled selected>Choose product...</option>
<option value="1" data-weight="100" data-price="1000">Product 1</option>
<option value="2" data-weight="50" data-price="200">Product 2</option>
<option value="3" data-weight="25" data-price="115">Product 3</option>
</select>
</div>
<div class="form-group col-2">
<label for="weight">weight</label>
<input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
<label for="price">price</label>
<input type="text" name="price" id="price" class="form-control">
</div>
<div class="input-group">
<button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>
For the PHP generated select (assuming the getAllproduct method returns weight and price properties):
...
<div class="form-group col-2">
<label for="product">Item number</label>
<?=#$error['product']?>
<select class="form-control" name="product" id="product">
<?php foreach ($csv->getAllproduct() as $csv) { ?>
<option value="<?= #$csv->id ?>" data-weight="<?= #$csv->weight ?>" data-price="<?= #$csv->price ?>"><?= #$csv->product?></option>
<?php } ?>
</select>
</div>
...

dropdown in a foreach loop

I have a list in a foreach loop and in each one there is an option to edit from a dropdown select box however when adding more than one of these select boxes the whole thing stops working when clicking the service and dropping the options down.
This is the code:
<select id="aroptions" name="aroptions" data-id="<?php echo $get['id'];?>">
<option value="none">Please Select your service</option>
<option class="tw" value="artw">Option 1</option>
<option class="aiop" value="araiop">Option 2</option>
<option class="rr" value="rr">Option 3</option>
<option class="aw" value="aw">Option 4</option>
<option class="gr" value="gr">Option 5</option>
</select>
<div class="twsettings" data-id="<?php echo $get['id'];?>" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Username:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;"
name="twusername" id="twusername" size="45" />
</div>
<br><br>
<label for="username" class="col-sm-4 col-form-label">
Series Name:
</label>
<div class="col-sm-8">
<input type="text" data-id="<?php echo $get['id'];?>" class="form-control-plaintext input-lg" style="height: 39px; width:100%;"
name="twseries" id="twseries" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_tw" data-id="<?php echo $get['id'];?>" style="width: 5%;height: 34px;" value="Yes"/><br>
</div>
</div>
</div>
The non working js is below
$('select').change(function(){
if ($(this).val() == "tw"){
$(this).closest('.twsettings').css("display", "none");
$(this).closest('.twsettings').removeClass("show");
} });
`Now i understand that for this to work each dropdown selection has to have a unique id otherwise they will all dropdown at the same time hence the data-id value but for the life of me i cannot remember how to do it.
Any help would be appreciated :)
I've created a fiddle for you to play around with. Note: The data-setting-id is different in each iteration of the loop. JSFiddle]1 (currently the dropdown will only function on the first option as the others are not added in the fiddle)

The first change that I'd make is to make your select elements have unique IDs:
<select id="aroptions<?php echo $get['id'];?>" name="aroptions" data-id="<?php echo $get['id'];?>">
That alone isn't going to do a whole lot for you though. First, you need to make sure that you're hiding all the divs before you show any of them. Then you need to make sure that when you're selecting an option, you use both the selected value and the select element's ID to determine which div to show.
For the hiding, I've given each settings div a class of option-group and in the Javascript we will run $(".option-group").hide();.
To show the correct settings div, we'll concatenate the corresponding option value with the select element ID to create the div's data-setting-id such as data-setting-id="artw<?php echo $get['id'];?>" and data-setting-id="araiop<?php echo $get['id'];?>" You will need to follow this pattern for each option group div.
Then in the Javascript, we do the same and concatenate the selected option with the element ID: var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
Here's how I updated the output that you provided in the fiddle.
<select id="aroptions123" name="aroptions" data-id="123">
<option value="none">Please Select your service</option>
<option class="tw" value="artw">Option 1</option>
<option class="aiop" value="araiop">Option 2</option>
<option class="rr" value="rr">Option 3</option>
<option class="aw" value="aw">Option 4</option>
<option class="gr" value="gr">Option 5</option>
</select>
<div class="option-group twsettings" data-setting-id="artw123" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Username:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twusername" id="twusername" size="45" />
</div>
<br><br>
<label for="username" class="col-sm-4 col-form-label">
Series Name:
</label>
<div class="col-sm-8">
<input type="text" data-id="123" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="twseries" id="twseries" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_tw" data-id="123" style="width: 5%;height: 34px;" value="Yes" /><br>
</div>
</div>
</div>
<div class="option-group aiopsettings" data-setting-id="araiop123" style="display:none">
<div class="form-group row" style="padding: 10px;">
<label for="username" class="col-sm-4 col-form-label">
Campaign ID:
</label>
<div class="col-sm-8">
<input type="text" class="form-control-plaintext input-lg" style="height: 39px; width:100%;" name="aiopid" id="aiopid" size="45" />
</div>
<br><br>
<label for="default" class="col-sm-4 col-form-label">
Set as Default:
</label>
<div class="col-sm-8">
<input type="checkbox" name="main_ar_aiop" style="width: 5%;height: 34px;" value="Yes" /><br>
</div>
</div>
</div>
Javascript:
$('select').change(function() {
var dataId = $(this).attr('data-id');
var selectedOpt = $(this).val();
// This is the settings div. Do whatever you want
var $elm = $('*[data-setting-id="' + selectedOpt + dataId + '"]');
$(".option-group").hide();
$elm.show();
//$elm.removeClass("show");
})
Here's the updated fiddle
Note that there are really a number of different ways that you could accomplish this. What I'm giving you here may not be the best or most efficient. I'm just giving you a quick answer using as much of your provided code as possible.

Based on selection how can I move to another page in vue js html?

This is my html code(1st TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
So, based on the dropdown, If I select a particular value, I need to move to the recorddetails page with its docId.
When I try this code it is not working.
I also tried the following code(2nd TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="" #change="orCost()">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
My vue js code is
methods:{
orCost: function(e) {
var vm = this;
data = {};
data['or'] = this.or;
$.ajax({
url: '/recorddetails/'+this.or,
data: data,
type: "GET",
dataType: 'json',
success: function(e) {
if (e.status)
{
}
else {
}
}
});
return false;
},
},
The problem is I am not able to redirect to the recorddetails page.
Please help me to redirect to the recorddetails page. I am able to get the docId value and all in the orCost(), but they are not redirecting. Please help me to redirect

You are trying too complicated I guess. Just try this
I have included a form also added a name as no.
<form method="post" action="/recorddetails/" name="myform" class=" form-inline" >
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select Or No</label>
<select class="form-control" name="no" v-model="or" required="" >
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:value="aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
<button class="btn search-btn" type="submit"><i class="fa fa-search"></i></button>
</form>