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>
Related
I am a backend developer so I need help with this front end part.
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
when the button is clicked its already triggering something I have in JS. But what is the best way to pass "entered_value" & "entered_valuetwo" & "selected_value" all 3 at the same time to the button and they get passed to the js function thereafter.
just add this to your js
document.getElementById('send-data').addEventListener('click',buttonFunction)
function buttonFunction(){
let enteredValue = document.getElementById('entered_value').value
let enteredValue2 = document.getElementById('entered_valuetwo').value
let selectValue = document.getElementById('selected_value').value
console.log(enteredValue,enteredValue2,selectValue)
}
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value"> <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
If you want to put it into a databas i would use post request like this:
<form action="your url" method="Post">
<input id="entered_value" type="number" name="entered_value">
<input id="entered_valuetwo" type="text" name="entered_valuetwo">
<select id="selected_value" name="selected_value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" id="send-data">Click me</button>
</form>
But if you want to use it temporarylie use document.getElementby(𝗜𝗗) or better document.querySelector(#𝗜𝗗)
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>
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>
I am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">
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