I'd like to give three choices which are represented by words but are going to POST numbers:
<form method="POST">
{% csrf_token %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Low" value=1 autocomplete="off"> Pale
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Medium" value=5 autocomplete="off"> Medium
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="High" value=9 autocomplete="off"> Deep
</label>
</div>
</form>
But then in my view request.POST.get('intensity') is a string. Do I need to manually convert it or there's something I'm missing?
ps. I'm not using Django forms and I don't want to use it at the moment.
No. HTTP only deals with strings and the value of the string is left for the server to decide. You can convert the value using int() function in python.
Reference:
How to get int instead string from form?
Related
I hope you are good!
I built this piece of code, which results in the following design of a checklist, in which I am able to select multiple items from a list -
<!DOCTYPE html>
<html>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="item1" name="item1" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item2" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item3" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item4" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The checklist I get :
And when I choose some items and click submit [for this time I chose Jeans & Trousers], I get my response in this format : item2=Jeans&item4=Trousers. Unfortunately, I cannot further work with this kind of response format...
The format I need should be more like : Jeans , Trousers. No item-ids, and no = signs - just their display names... Is it possible to get a response like that?
Any help would be appreciated! Thanks a lot! 🙂
Edit : Here's the code I took inspiration from - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox
You can get an array of values in your backed using name format like myarrayName[]. The name attribute doesn't have to be unique. For example:
<form action="" method="post">
<input type="checkbox" id="item1" name="item[]" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item[]" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item[]" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item[]" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
I have a problem with sending posts in codeigniter, reading other posts I set the variable max_input_vars = 1000. but does not send the data.
the resulting in html is:
<form id="0" action="CO_controller" method="post">
<input id="idric_0" value="0.02508800 154401490122">
<input id="name_0" value="val0">
<input id="per_0" value="10">
<input id="unit_0" value="g">
<input id="ric_0" value="0.02508800 1544014901">
<input id="command0">
<input id="mod0" type="submit" value="Modific" onclick="document.getElementById('command0').value = 'modific';">
<input id="eli0" type="submit" value="Deleta" onclick="document.getElementById('command0').value = 'deleta';">
<input id="id_sal0" value="0.02508800 1544014901">
</form>
<form id="1" action="CO_controller" method="post">
<input id="idric_1" value="0.02508800 154401490122">
<input id="name_1" value="val0">
<input id="per_1" value="10">
<input id="unit_1" value="g">
<input id="ric_1" value="0.02508800 1544014901">
<input id="command1">
<input id="mod1" type="submit" value="Modific" onclick="document.getElementById('command1').value = 'modific';">
<input id="eli1" type="submit" value="Deleta" onclick="document.getElementById('command1').value = 'deleta';">
<input id="id_sal1" value="0.02508800 1544014901">
</form>
the operation is correct ie when I click the button, set the value of the command and submit.
in debug, I go to see the variable $ _POST and it is empty
As said in the comment, you should use name instead of id. By using id you are not passing the values correctly.
Unless you have a route defined so that CO_controller points to a method (and not just a controller) this is not going to work:
<form id="0" action="CO_controller" method="post">
Your form action should point directly to the method within the CO_controller controller which will process the form input.
Assuming the method within the controller is called process_form your form should point to:
<form id="0" action="CO_controller/process_form" method="post">
give it a go and let us know how it works
This question already has answers here:
<input type="number"/> is not showing a number keypad on iOS
(6 answers)
Closed 8 months ago.
When I set my input field type="time" or type="date" on my webapp, if I view the app in mobile device, I get nice UI such as the following when clicked on it
.
However, when I set type="number", I was expecting a number pad to pop up. However, I get a keyboard instead. If I set it to type="tel", would it cause a problem or is there a better solution?
The Number Input is another way to offer numbers for your users. The difference between the number input and the tel input is that also offers easy access to special characters and symbols. However, if you only need numbers entered, it’s best to stick with the tel input.
<label class="item item-input">
<span class="input-label">Number</span>
<input type="number">
</label>
The Tel Input is a very unknown and underused input type. It displays a full numeric keypad, which makes for a great user experience when all that is required from the user is numbers. Take advantage of this one!
<label class="item item-input">
<span class="input-label">Telephone</span>
<input type="tel">
</label>
For more information, read this article: http://ionicframework.com/html5-input-types/#number
Try something like this:
<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" />
if you want to input a number then input type="number" is there. But if u dont want to see mobile keypad then u can make your own keypad like this:
<html>
<head><title></title></head>
<body>
<script> function $(id) { return document.getElementById(id); } </script>
<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="←" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>
</body>
</html>
I have a button group in which I have tree inputs of type radio.
The reason I use these, is that in order to get the style template I have bought for my project working I must use the exact same elements.
The button group is controlling the size on a dynamic table, and I need an event fired when a button (input) is pressed
<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)" >
<label class="btn btn-success">
<input type="radio" name="options"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options"> 20
</label>
<label class="btn btn-success active">
<input type="radio" > 30
</label>
</div>
I am using Angular 2 so I have tried to bind the inputs with values (not shown) without luck...
Update
The answer marked as solved below only partially solved my problem as I could only press each input once. To solve this I did the following:
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10
</label>
<label class="btn btn-success">
<input type="radio" style="display:none" value="20" (change)="pageSizechanged($event.target)"> 20
</label>
<label class="btn btn-success">
<input type="radio" value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30
</label>
</div>
In the change event i pass the target along. I do this because i want to set checked to false:
pageSizechanged(target) {
this._pagesize = target.value;
target.checked = false;
...
}
Otherwise the inputs will remain checked and the change event will therefore not be fired. If someone have a better way to do this, please share :)
Not entirelly sure what you want to achieve, but if I understood correctly.
You can bind the radio buttons with ngModel and avoid the current click-events entirelly, and rather react to changes. The following template works, just define your tableSize variable in the component class.
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20
</label>
<label class="btn btn-success active" >
<input type="radio" [(ngModel)]="tableSize" value="30"> 30
</label>
</div>
Current tableSize: {{tableSize}}
If you need an event, you can add a (change)="myFunc($event.target.value)" to the input tags as well.
I don't think radio inputs are currently well supported in angular2. (you seem to have to make your own component).
I have used them with a simple event handler on the (click) event, like so:
<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']">
<input type="radio"
name="options"
(click)="selectedChoice = choice"
[checked]="choice === selectedChoice" >
No
</label>
<label>
<input type="radio"
name="options"
[checked]="choice === selectedChoice"
(click)="selectedChoice = choice >
Yes
</label>
So if we initialise with selectedChoice='Yes', the second radio button will be selected. The [checked] attribute makes sure the selected radio button is checked and the (click) directive triggers the model change.
I have checkboxes with values in HTML. The problem is that I want the values to store in the database and not a boolean. How do I do this?
HTML:
<div class="form-group" >
<label >Bachelor</label><br>
<input type="checkbox" id="ComputerScienceB" ng-model="vm.course.bachelor.computer" value="Computer Science"> Computer Science
<br>
<input type="checkbox" id="SystemsEngineeringB" ng-model="vm.course.bachelor.systems" value="Systems Engineering"> Systems Engineering
<br>
<input type="checkbox" id="EnvironmentalEngineeringB" ng-model="vm.course.bachelor.environmental" value="Environmental Engineering"> Environmental Engineering
<br>
<input type="checkbox" id="MechanicalEngineeringB" ng-model="vm.course.bachelor.mechanical" value="Mechanical Engineering"> Mechanical Engineering
<br>
<input type="checkbox" id="BiotechnologyB" ng-model="vm.course.bachelor.bio" value="Biotechnology"> Biotechnology
</div>
<br>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-click="vm.saveCourse()">Add Course</button>
</div>
</form>
The database inserts the hole vm.course. I am using the hole mean stack.
You need ng-true-value attribute. You can use it like this:
<input ng-true-value="Biotechnology"
type="checkbox"
id="BiotechnologyB"
ng-model="vm.course.bachelor.bio">
See angular docs on input[checkbox]