Pass Multiple Query String in Python - html

So, I'm building a web app using flask/jinja and I have a webpage that displays a list of data that includes date, and I currently have two drop down menus, one that controls the date range of data viewed and the other that sorts the data based on various parameters.
<form method='get' action=''>
<button class='btn btn-default'>View data from:</button>
<select name = "time_length">
<option value="0">All</option>
<option value="7">Week</option>
<option value="30">Month</option>
</select>
</form>
</div>
<div>
<form method='get' action=''>
<button class='btn btn-default'>sort:</button>
<select name = "sortby">
<option value="user">Name</option>
<option value="group">Project</option>
<option value="date">Date</option>
</select>
</form>
Individually, this works fine because the it just passes along ?time_length=7 or whatever to the url, but I can't figure out how to pass along both parameters. One ends up replacing the other in the link.

You need to have them sent from the same <form>.
<form method='get' action=''>
<button class='btn btn-default'>submit</button>
<select name = "time_length">
<option value="0">All</option>
<option value="7">Week</option>
<option value="30">Month</option>
</select>
<select name = "sortby">
<option value="user">Name</option>
<option value="group">Project</option>
<option value="date">Date</option>
</select>
</form>

Related

HTML form action : url format

I have a form that sends the input
diff=easy&know=high&lang=francais (example)
When I set form action to <form action="https://adressedetest.tumblr.com/tagged/">
The forms successfully sends you to the address https://adressedetest.tumblr.com/tagged/?diff=easy&know=high&lang=francais
How do I format the output of the code so that the output
diff=easy&know=high&lang=francais becomes the output
easy_high_francais ? I know oninput="diff.value_know.value_lang.value" formats it that way but it doesn't make the form send you on https://adressedetest.tumblr.com/tagged/?easy_high_francais, it's still the previous adress.
How do I make the code send you to https://adressedetest.tumblr.com/tagged/easy_high_francais instead of https://adressedetest.tumblr.com/tagged&easy_high_francais (nor https://adressedetest.tumblr.com/tagged/&easy_high_francais) ? I can't use the '&' like that because tumblr always then sends me 404.
Here is a version of the code I wrote, without its distracting visual formatting :
<!DOCTYPE html>
<html>
<body>
<div>
<form action="https://adressedetest.tumblr.com/tagged/" oninput="diff.value_know.value_lang.value">
<label for="diff">Difficulty</label>
<select id="diff" name="diff">
<option value="none">None</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="know">Knowledge</label>
<select id="know" name="know">
<option value="none">None</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="francais">Français</option>
<option value="english">English</option>
<option value="russian">Русский</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
You can do that using a bit of javascript.
What I do is extract the parameters values, join them with your desired _ character, and then re-construct a URL.
Hope it helps, otherwise get back to me in the comments.
// Somehow obtain a ref to the form. In this case it's the
// first and only one.
// (If you don't know what I'm talking about, you probably want
// to give the form an id and use `document.getElementById`)
const form = document.getElementsByTagName("form")[0];
form.addEventListener("submit", submitted);
function submitted(e) {
// Prevent the default request
e.preventDefault();
const data = new FormData(form);
const custom_path = Array.from(data)
// You might want to sort the values here first
.map(([_, value]) => value)
.join("_");
const url = new URL(`https://adressedetest.tumblr.com/tagged/${custom_path}`);
// Send your custom request here
console.log(String(url));
}
<!DOCTYPE html>
<html>
<body>
<div>
<form action="">
<label for="diff">Difficulty</label>
<select id="diff" name="diff">
<option value="none">None</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="know">Knowledge</label>
<select id="know" name="know">
<option value="none">None</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<label for="lang">Language</label>
<select id="lang" name="lang">
<option value="francais">Français</option>
<option value="english">English</option>
<option value="russian">Русский</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
First of all, why would you want to get rid of the "?" character ?
Maybe you should read about this : https://www.semrush.com/blog/url-parameters/
" ? " character identify url portion that contains the parameter, which are separated by " & " character. So this is just normal behaviour.

HTML submit form from select but comma separate values in GET

I have a simple HTML form that has a dropdown.
<form method="get">
<select name="category[]" multiple class="form-control">
<option value="1">First Value</option>
<option value="2">Second Value</option>
<option value="2">Third Value</option>
</select>
<input type="submit" value="Submit">
</form>
Upon submission of this form, it redirects to https://WEBSITE/?category[]=1&category[]=2. How do I have it redirect to https://WEBSITE/?category=1,2
I was looking for a simple solution instead of using jQuery to intercept the form submission, load in every submitted value, comma separate it, and use window.location.href to redirect.
<select multiple class="form-control" onclick="document.getElementById('cat').value=Object.values(this.options).filter(option=>option.selected).map(option=>option.value).join(',')">
<option value="1">First Value</option>
<option value="2">Second Value</option>
<option value="3">Third Value</option>
</select>
<form method="get">
<input id="cat" type="hidden" name="category" value="">
<input type="submit" value="Submit">
</form>

Bootstrap 4 form not sending contents of select box

I've written a simple bootstrap 4 form with a GET method, and it only sends the values in the Submit button, not in the tag above it.
This is eventually to be handled in a POST request, but I've changed it to GET to more easily see what data the form is sending.
Here is the form code:
<form action="/picknumbers" method="GET">
<div class="form-group">
<label for="numberselect">Select one or more numbers</label>
<select multiple class="form-control mb-3" id="numberselect" size="6">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<button name="submission" value="numberspicked" type="submit" class="btn btn-primary btn-block">Choose numbers</button>
</form>
The output in the browser address bar is simply: /picknumbers?submission=numberspicked, without including the numbers picked by the user. How do I get the submitted form to include them?
You need to give a value on the options also you need to give a name to the select. To clarify, see the code below:
<select multiple class="form-control mb-3" name="select-name" id="numberselect" size="6">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Your select options appear to be missing value attribute tags. It should look like the below:
<div class="form-group">
<label for="numberselect">Select one or more numbers</label>
<select multiple class="form-control mb-3" id="numberselect" size="6">
<option value="1">1</option>
<option value="2" selected>2</option>
...
</select>
</div>
<button name="submission" value="numberspicked" type="submit" class="btn btn-primary btn-block">Choose numbers</button>
</form>

Repeat code on button click with AngularJS

I want to create a page where you can add from 1 to n products dinamically.
I've been working with AngularJS for a couple of months but it's kind of difficult for me to think this.
The html code I tought about it's something like this:
https://plnkr.co/edit/2MYbkYeAf4lZSRIh2c8l?p=preview
Here it is the entire template:
<div class="container text-center">
<h1>Make a sale</h1>
<br>
<form>
<div class = "divedp">
<label for="idNumeroFactura" class="col-form-label" >Invoice number: </label>
<input name="inpNumeroFactura" id="idNumeroFactura" maxlength= "8" type="text" ng-model="numeroFactura" class= "form-control"/>
</div>
<h6 class="small">products</h6>
<div class = "divedp">
<label for="idProducto">Product: </label>
<select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
ng-model="producto" class="form-control input-sm" id="idProducto">
<option value="">-Choose the product-</option>
</select>
<br>
<label for= "idCantidad" >Quantity: </label>
<select ng-model="cantidad" id="idCantidad" class="form-control input-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"> Add another product</button>
</div>
<div ng-show="showDiv"> Here should appear the new product</div>
<button ng-click="guardarVenta()" class="btn btn-primary" type="submit">Save sale</button>
</form>
<span >{{mensaje}}</span> <br>
</div>
And this is the part I want to repeat:
<div class = "divedp">
<label for="idProducto">Product: </label>
<select name="sltProducto" ng-options ="producto.nombreProducto for producto in productos"
ng-model="producto" class="form-control input-sm" id="idProducto">
<option value="">-Choose the product-</option>
</select>
<br>
<label for= "idCantidad" >Quantity: </label>
<select ng-model="cantidad" id="idCantidad" class="form-control input-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<button ng-click="showDiv=true; agregarProducto()" class="btn btn-default" ng-hide="showDiv"> Add another product</button>
</div>
So when I click add another product button, all div code part should repeat below the first div. This way, the user can choose all products he want with the quantity he want.
I was thinking on creating a template, but this is already a template... I'm using ui-router to do the routering part, but I never repeated a template inside a template, and I never used a template inside a template at all.
Besides, this approach gives me some doubts:
How can I concatenate an attribute on a Json array? (I use Json to communicate between frontend and backend)
How can I avoid users to repeat the same product item? should I take this problem to an AngularJS controller or can I handle it with directives?
Thanks for reading.
Since you didn't show any controller, I can provide only abstract idea of solution. Here goes anyway.
Repeating
Simple looping over collection of data is done with ngRepeat. In your controller, you need to manipulate the collection and angular will propagate the change for you
<div ng-repeat="productBlock in productBlocks track by productBlock.id">
<!-- your repeated code here -->
<button ng-click="removeProductBlock(productBlock.id)"> remove </button>
</div>
<button ng-click="addProductBlock()"> add </button>
ngRepeat documentation
Prohibiting user from selecting duplicate product
You can achieve this, again, with manipulating a collection in your controller. This time, the collection would hold products still available to choose. Angular will help you with propagating the change from controller to your view with the ngOptions directive
<select
ng-options="product as product.label for product in productsAvailable track by product.id"
ng-change="selectProduct(product.id)">
</select>
The selectProduct method will be responsible for removing the product from productsAvailable collection.
Keep in mind that it also has to "put back" any products not being used on update.
ngOptions documentation

display corresponding number of a dropdownlist based on selection using jsp

i have 2 dropdown menus,one is with a list of car names and another one is with list of number.if i select the any one of the car names from 1st ddl the second one should show the corresponding number related to the selection.
<form method="post" action="sample2.jsp">
<select name="sel1">
<option value="Alto">Alto</option>
<option value="Esteem">Esteem</option>
<option value="Honda City">Honda City</option>
<option value="Chevrolet">Chevrolet</option>
</select>
<br>
<select name="sel2">
<option value="1.1">1.1</option>
<option value="1.2">1.2</option>
<option value="1.3">1.3</option>
<option value="1.4">1.4</option>
</select>
<input type="Submit" value="Submit">
</form>
example:
alto->1.1
You could it with jQuery as below:
$('#sel1').change(function(){
var index = $('#sel1').attr('selectedIndex');
$('#sel2').attr('selectedIndex', index);
});
See example at: http://jsfiddle.net/a2crA/1/