Develop Reference

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[]')

How to change the Input Name based on the dropdown selection in html form?

I have a HTML form which changes its form action based on the drop down selection but input name remains same.
Here is my HTML:
<form action="car.php" method="GET">
Select Your Option :
<select onChange="this.form.action=this.options[this.selectedIndex].value;">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="Value" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
If I select Car Name and enter Maruti then value is passed like this:
http://www.mywebsite.com/car.php?Value=Maruti
If I select Bike Name and enter Honda then value is passed like this :
http://www.mywebsite.com/bike.php?Value=Honda
My problem is I have to name the column as "Value" in all the 5 database which stores all the information regarding all this, which I want to avoid.
I want, If I select Car Name and enter Maruti then value should pass like this
http://www.mywebsite.com/car.php?car=Maruti
If I select Bike Name and enter Honda then value should pass like this
http://www.mywebsite.com/bike.php?bike=Honda
What changes should be made in the code to achieve this goal?
If this can also happen then its very nice otherwise no problem.
In the form it is written Enter your query. I want the same change to happen here. If I select Car Name then it should be Enter you car. If I select Bike Name then it should be Enter your bike... and so on.
UPDATE
Little modification I need. When selecting car, the input name is changing to car, the form action is changing to car.php and query to Enter your car. But If I want to change the name like this then what should I do? When I will select anything say bike then form action will be changed to bike.php, But I want input name to be different say USY and Enter your bike to Enter your Serial No. What should I do ?

I have updated the code now and got ur exact requirement now and i hope this will help you
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("#input1").attr("name",res[0]);
$(".title").html("Enter your "+res[0]+" Name."); // Add this below $("input").attr("name",res[0]);
if(res[0]=='bike')
{
var title2="XYZ";
var title3="Serial No";
}
else if(res[0]=='laptop')
{
var title2="ABC";
var title3="Model No";
}
else if(res[0]=='place')
{
var title2="KLM";
var title3="Area";
}
else if(res[0]=='mobile')
{
var title2="FGH";
var title3="Brand";
}
$("#input2").attr("name",title2);
$("#input3").attr("name",title3);
$(".title2").html("Enter your "+title3);
});
});
</script>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
<span class="title2">Enter your Color</span>
<input name="WER" id="input2" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>

I advise you to not use JavaScript embedded into HTML attributes. Other than that, you can change the name attribute in the same change handler where you're modifying the action.
document.getElementById('Type').addEventListener('change', function(evt) {
var type = this.selectedOptions[0].value;
console.dir(this);
document.getElementById('Value').setAttribute('name', type);
document.getElementById('QueryName').textContent = type;
this.form.action = type + ".php";
});
<form action="car.php" method="GET">
Select Your Option :
<select id="Type">
<option value='car' selected>Car Name</option>
<option value='bike'>Bike Name</option>
<option value='laptop'>Laptop Name</option>
<option value='place'>Place Name</option>
<option value='mobile'>Mobile Name</option>
</select>
Enter your <span id="QueryName">car</span>
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
EDIT: If you want everything to be different as said in comments, you can use an object to hold the values. For example,
var setup = {
car: {
action: 'mycar.php',
param: 'DFS',
query: 'color'
},
...
};
and then instead of directly using the option's value, pull from this object based on the selected option.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("input").attr("name",res[0]);
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
</html>
I have used jquery here some few changes in html try it out this one
<form action="car.php" method="GET">
Select Your Option :
<select value="car.php">
<option value='car.php'>Car Name</option>
<option value='bike.php'>Bike Name</option>
<option value='laptop.php'>Laptop Name</option>
<option value='place.php'>Place Name</option>
<option value='mobile.php'>Mobile Name</option>
</select>
Enter your query // I want to change this also
<input id="Value" name="car" type="text">
<button id="submit" type="submit" value="Submit">Submit Query</button>
</form>
And for Jquery you can use this one
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var str=$(this).val(); // On Change get the option value
$("form").attr("action",str);
var res=str.split(".");
$("input").attr("name",res[0]);
});
});
</script>
This works perfectly for me Enjoy :)

setting the HTML textbox value based on the selected option using Javascript function. But it seems to be not working

This is the javascript snippet which assigns the selected option value to a text box
function check() {
document.getElementById("inp").value=document.getElementById("id").value ;
}
this is the actual html code
<form>
<select id="id" onSelect="check( );">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp">
</form>
I Hope am done right ,but still am not able to get my solution

Here's your fix.
This one works
I guess the summary of it is that you should change onSelect to onChange.
<script>
function check() {
document.getElementById("inp").value=document.getElementById("id").value;
}
</script>
</head>
<body>
<form>
<select id="id" onChange="check();">
<option></option>
<option value=85.5>opt1</option>
<option value=95.5>opt2</option>
<option value=95.5>opt3</option>
<option value=95.5>opt4</option>
</select>
<input type=text name="input" id="inp" value="">
</form>
</body>

Assuming this html
<select id="id">
<option value="">Please select</option>
<option value="85.5">opt1</option>
<option value="95.5">opt2</option>
<option value="95.5">opt3</option>
<option value="95.5">opt4</option>
</select>
You can use unobtrusive JavaScript and add this to the head
Plain JS:
window.onload=function() {
document.getElementById("id").onchange=function() {
this.form.input.value=this.value;
}
}
Same in jQuery would be
$(function() {
$("#id").on("change",function() {
$("#inp").val($(this).val());
});
});
If you MUST do it inline, then
<select id="id" onchange="this.form.input.value=this.value;">

You HTML has multiple issues as well as your javascript
Your formatted HTML
<form>
<select id="id" onChange="check();">
<option></option>
<option value="85.5">opt1</option>
<option value="95.5">opt2</option>
<option value="95.5">opt3</option>
<option value="95.5">opt4</option>
</select>
<input type="text" name="input" id="inp" />
</form>
JS
function check() {
document.getElementById("inp").value = document.getElementById("id").value;
}
Working DEMO
Also you should enclose you values like value="". Besides this no major issues

Load page on selection from dropdown form

I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!

Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>​
What you were looking for was 'onchange' instead of 'onsubmit'

Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>

Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>

I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>

Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>

java script for getting total price based on selected value from drop dowv

I am trying to develop a code in js where i have three feilds in a form
one is the price that is dynamic and other is the drop down in which i had ten values from 1 to 10 I want whenever I select option from dropdown i should get the total price base on the unit price
any kind of help appreciated

i don't know if I exactly understand what you want, but i tried write some code. You can test is on jsfiddle
so html markup can look something like that:
<input type="text" id="priceId" value="5" />
<select id="priceTypeId" name="priceType">
<option value="1">1</option>
<option value="2">2</option>
...
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="text" id="resultId" />
and jQuery functions for this are:
$(document).ready(function() {
$('#priceTypeId').change(function() {
$('#resultId').val( $('#priceTypeId').val() * $('#priceId').val() );
});
});
If you have any question, I'll try to answer quickly.

Use some thig like these:
<script type='text/javascript'>
function FieldOnChange()
{
// put logic here use document.getElementByID('FieldID').value;
}
</script>
<form>
<select name='title' onchange='javascript:FieldOnChange();'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
...
</select>
<!-- rest of your form -->
</form>

You need to add an onchange to your drop down and have it call a javascript function that does the calculation and sets the new value of the field.
<script type="text/javascript">
function recalculate()
{
var f = document.forms.myform;
f.cost.value = f.price.value * f.qty.value;
}
</script>
<form action="doStuff" method="post" id="myform">
<p>Price<input type="text" id="price"/></p>
<p>Quantity
<select id="qty" onChange="recalculate()">
<option id="0">0</option>
<option id="1">1</option>
<option id="2">2</option>
</select>
<p>
<p>Cost<input type="text" id="cost"/></p>
</form>