Getting multiple data from multiple select boxes' - javascript

I've got next situation:
I have multiple select boxes (that can select multiple choices) and i need that in php to be processed.
A code is next:
<select name="selectusers[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<select name="selectusers[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input type="submit" value="Send" />
So now, in PHP I do the general foreach
<?php
foreach($select_users as $users){
...
}
?>
But each time I do foreach loop, and i print_r($select_users); inside of foreach, it gives me same result like:
Array([0]=>Array([0]=>30)[1]=>Array([0]=>33))
Array([0]=>Array([0]=>30)[1]=>Array([0]=>33))
What should I do?
Thank you.

You need to change the name of your select:
<select name="selectusers[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<select name="selectusers2[]" multiple>
<option value="1">John</option>
<option value="2">Smith</option>
</select>
<input type="submit" value="Send" />
Try this.

Related

How to get select value for AJAX using JavaScript

I have 2 HTML drop down menus.
<div class="bar-option">
<label>Filter:</label>
<form>
<select name="retreat_locations" onchange="filterRetreats(this.value, 'count(reviews.retreat_id)')">
<option value="alllocations" selected="selected">All Locations</option>
<?php foreach ($this->locations as $location) {?>
<option value="<?=htmlentities($location->retreat_location);?>">
<?=htmlentities($location->retreat_location);?> </option>
<?php }?>
</select>
</form>
</div>
<div class="bar-option">
<label>Sort by:</label>
<select onchange="filterRetreats('alllocations', this.value)">
<option selected='selected' value='retreat_number_of_reviews'>Popularity</option>
<option value='retreat_founded_in'>Age</option>
<option value='total_review_cost'>Cost</option>
</select>
</div>
As you can see from the above, the second select uses the static value 'alllocations' as the first parameter for the onchange function.
How can I replace this static value with the selected option of the first dropdown (retreat_locations)?
I tried retreat_locations.value but it didn't work.
Any help appreciated.
You can use:
document.querySelector('[name=retreat_locations]').value
Your code will become:
filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)
Demo:
function filterRetreats(value1, value2) {
console.log(value1, value2);
}
<div class="bar-option">
<label>Filter:</label>
<form>
<select name="retreat_locations" onchange="filterRetreats(this.value, 'count(reviews.retreat_id)')">
<option value="alllocations" selected="selected">All Locations</option>
<option value="2">2</option>
</select>
</form>
</div>
<div class="bar-option">
<label>Sort by:</label>
<select onchange="filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)">
<option selected='selected' value='retreat_number_of_reviews'>Popularity</option>
<option value='retreat_founded_in'>Age</option>
<option value='total_review_cost'>Cost</option>
</select>
</div>
Other -old school- option is to add an id tag to the first select, e.g. id="retreat_locations" and use document.getElementById('retreat_locations').value.

How to capture html form input with flask using jquery chosen multiple select

I have an HTML form with jquery-chosen multiple selection of countries. I want to send this input to Flask through the POST request. The problem is that Flask does not capture the selections.
When I do not use js chosen, it works:
<div class = "webform">
<form method="POST" action = "/monthly_active" name = "countries">
<p>Select countries</p>
<select multiple id="Country" name="Country">
<option>Select...</option>
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="RU">RU</option>
<option name="PL">PL</option>
<option name="IT">IT</option>
<option name="GB">GB</option>
<option name="BR">BR</option>
</select>
<input type="submit" value="Submit">
</form>
But with js chosen it does not work:
<form method="POST" action = "/monthly_active" name = "chart_options" >
<p>Select countries</p>
<select name = "countries[]" data-placeholder="Countries" multiple class="chosen-select" tabindex="8">
<option value="AT">AT</option>
<option value="GB">GB</option>
<option value="RU">RU</option>
<option selected>DE</option>
<option disabled>Sun Bear</option>
<option selected>ES</option>
<option disabled>Spectacled Bear</option>
</select>
<script> $(".chosen-select").chosen(); </script>
<input type="submit" value="Submit">
</form>
In Flask I use request.form.getlist() to get the input list.
The thing is I very very basic with HTML and javascript, thus, I am stuck how to manage this problem.
Solved:
My mistake was in request.form.getlist('chart_options'):
I passed the name of the form there whereas I had to pass the name of the <select>
This worked:
target_countries = request.form.getlist('countries[]')

populate multiple select from mysql database prestashop

I want to create a multiple select with add/remove button and the values in that multiple select i want to fetch from mysql query. my question is how will i populate the result of query in to select lists value?
my code is as follows: Product.tpl
<form>
<fieldset>
<form name="formName1">
<select name="selectfrom" id="select-from" multiple size="5" >
<option value="1?>">Item1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
</select>
Add »
« Remove
<select name="selectto" id="select-to" multiple size="5">
<option value="5">Item 5</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
</select>
<input type="button" onClick="myFunction()" value="Submit form">
</fieldset>
</form>
and my php file code is :
public function products_configure($url){
$productsel = "Select id_product,name from ". _DB_PREFIX_ ."product_lang";
$products = Db::getInstance()->executeS($productsel);
foreach($products as $product){
$productintid = $product['id_product'];
$productintname = $product['name'];
}
$this->context->smarty->assign(array(
'url' => $url
));
return $this->fetchTemplate('/views/templates/back/products.tpl');
}
can anyone pls tell how will i use $productintname to option value in tpl file.

Using onchange to enter data in second field javascript

I am trying to put two forms on one page, but to have only one main display area where selections can be made. My page would look something like this:
Sequence ID---Select Processor---Select Reviewer
1-------------------A------------------------B---------------Action Button
2-------------------A------------------------B---------------Action Button
3-------------------A------------------------B---------------Action Button
Where A and B are drown-down lists the users can select.
Then, in a separate part of the page and in a separate form, the A and B which are selected above will be populated in separate text fields. The issue is the way the two forms are process. The "Action Button" above does not use the A and B drop-down information AT ALL. But to make the display more concise, I don't want to make the user scroll to various parts of the page for different actions. Too confusing.
Here is the kicker. The total numbers in the sequence will different depending on the form. So, I need to create an array for the fields. I know that is not making much sense, so I here is my code:
<script type="text/javascript">
function myFunction() {
document.proc[1].value = f.processor[1].value;
document.write.getElementById("proc[1]").value;
document.rev[1].value = f.reviewer[1].value;
document.write.getElementById("rev[1]").value;
document.proc[2].value = f.processor[2].value;
document.write.getElementById("proc[2]").value;
document.rev[2].value = f.reviewer[2].value;
document.write.getElementById("rev[2]").value;
document.proc[3].value = f.processor[3].value;
document.write.getElementById("proc[3]").value;
document.rev[3].value = f.reviewer[3].value;
document.write.getElementById("rev[3]").value;
}
</script>
<form id="form" action="thispage.php" method="post">
<select name="processor[1]" onchange="myFunction(this.document)" id="processor[1]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[1]" onchange="myFunction(this.document)" id="reviewer[1]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="processor[2]" onchange="myFunction(this.document)" id="processor[2]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[2]" onchange="myFunction(this.document)" id="reviewer[2]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="processor[3" onchange="myFunction(this.document)" id="processor[3]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[3]" onchange="myFunction(this.document)" id="reviewer[3]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="submit" name="action" value="Action Button">
</form>
<form id="newForm" action="thisform.php" method="post">
<input type="text" name="proc[1]" id="proc[1]">
<input type="text" name="rev[1]" id="rev[1]">
<input type="text" name="proc[2]" id="proc[2]">
<input type="text" name="rev[2]" id="rev[2]">
<input type="text" name="proc[3]" id="proc[3]">
<input type="text" name="rev[3]" id="rev[3]">
</form>
When I make the selection, the data is not entered into the text fields in the newForm, which is what I would like to happen.
Any advice anyone could offer would be greatly appreciated.
Answer to why the selection doesn't get transferred:
Having <input type="text" name="proc[1]" id="proc[1]"> doesn't allow you to reference it by document.proc[1]. The document object model just isn't that magical.
Other notes:
There are a lot of other issues with this code, e.g. this.document and document.write.getElementById(...).value. You should probably spend some time learning JavaScript and the document object model and finding the approach that's right for this application.

Load page on select menu option being chosen

i have a form like so:
<form>
<select onchange="this.form.submit()">
<option>Today</option>
<option>Last Week</option>
<option>Last Month</option>
<option>Lifetime</option>
</select>
</form>
I need to do some basic filtering of results and the aim is that when a user changes the drop down the user is sent to page/?date=THEIROPTION
I a using the javascript on change so i dont have to have a button.
Any help?
P.S i have tried having the option value as the URL but no luck.
This works.
ONCHANGE="location = this.options[this.selectedIndex].value;"
This too.
<form name="filter_form">
<select name="filter" onchange="document.forms.filter_form.submit();">
<option value=""></option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
</select>
</form>
You may try something like this
HTML:
<select onchange="loadPage(this.value)">
<option value="page?date=today">Today</option>
<option value="page?date=last_week">Last Week</option>
</select>
JS:
function loadPage(url)
{
location.href = url;
}

Categories

Resources