I have a form that contains radio groups and checkboxe groups as well, each checkbox group / radio group has a unique name.
In my Servlet I tried to get all checked values for those radio groups and checkbox groups.
PrintWriter out = response.getWriter();
Enumeration<String> requestParameters = request.getParameterNames();
while (requestParameters.hasMoreElements()) {
String paramName = (String) requestParameters.nextElement();
out.println("Request Paramter Name: " + paramName
+ ", Value - " + request.getParameter(paramName));
}
When I select multiple checkboxs in a checkbox group I only get one value.
For example, I have this checkbox group :
<ul class="data-list-2">
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Mise en page d’un texte" type="checkbox">
</div>
<label>Mise en page d’un texte</label>
</li>
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Compilation d’un texte" type="checkbox">
</div>
<label>Compilation d’un texte</label>
</li>
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Présentation d’un texte sous forme de diaporama" type="checkbox">
</div>
<label>Présentation d’un texte sous forme de diaporama</label>
</li>
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Edition d’un texte" type="checkbox">
</div>
<label>Edition d’un texte</label>
</li>
</ul>
And I checked the last three checkboxs, I only get one value as the following :
Request Paramter Name: question_1, Value - Compilation d'un texte
I googled about this, and I found that I must add a [] after the name of each checkbox group, but when I tried that, this is what I got :
Request Paramter Name: question_1[], Value - Compilation d'un texte
How can I solve this ?
Checking multiple checkbox in form will give you values in String array form. You will have to use request.getParameterValues() inorder to get all values that you have selected in an String array.
Your sample could be like:
String[] questions = request.getParameterValues("question_1");
for(int i=0;i<questions.length;i++){
out.println(questions[i]);
}
Related
Is there a way to validate the numerical value of input field using template driven forms in Angular 11?
To give a bit of context, I'm building a memory card game using Angular 11 and I'd like to make sure that the player can't select a maxFlipCount that is inferior to the number of cards. I have been struggling to make this work using the min attribute on an input tag. Maybe there's another that I don't know of that doesn't use the min attribute.
How could I achieve this?
I'm trying to apply this validation to the last input tag, before the submit button in my template code. This is what I have so far:
<form #gameOptionsForm="ngForm" (ngSubmit)="startGame()" novalidate>
<!-- mode de jeu -->
<div class="field">
<label class="label">Mode de jeu</label>
<div class="control">
<div class="select" [class.is-danger]="
gameMode.invalid && (gameMode.dirty || gameMode.touched)
">
<select name="gameMode" [(ngModel)]="optionsForm.gameMode" #gameMode="ngModel" required>
<option value="1">1 joueur</option>
<option value="2">2 joueurs</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gameMode.invalid && (gameMode.dirty || gameMode.touched)">
Vous devez choisir un mode jeu
</p>
</div>
<!-- nom du premier joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 1 || optionsForm.gameMode == 2">
<label class="label">Nom du joueur 1</label>
<div class="control">
<input [class.is-danger]="
player1.invalid && (player1.dirty || player1.touched)
" class="input" type="text" name="player1" placeholder="Joueur 1" #player1="ngModel" [(ngModel)]="optionsForm.player1" required />
</div>
<p class="help is-danger" *ngIf="player1.invalid && (player1.dirty || player1.touched)">
Veuillez entrer un nom pour le joueur 1
</p>
</div>
<!-- nom du deuxieme joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 2">
<label class="label">Nom du joueur 2</label>
<div class="control">
<input [class.is-danger]="
player2.invalid && (player2.dirty || player2.touched)
" class="input" type="text" name="player2" placeholder="Joueur 2" #player2="ngModel" [(ngModel)]="optionsForm.player2" required />
</div>
<p class="help is-danger" *ngIf="player2.invalid && (player2.dirty || player2.touched)">
Veuillez entrer un nom pour le joueur 2
</p>
</div>
<!-- taille de la grille -->
<div class="field">
<label class="label">Nombre de cartes</label>
<div class="control">
<div class="select" [class.is-danger]="
gridSize.invalid && (gridSize.dirty || gridSize.touched)
">
<select name="gridSize" [(ngModel)]="optionsForm.gridSize" #gridSize="ngModel" required>
<option value="4">4</option>
<option value="16">16</option>
<option value="36">36</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gridSize.invalid && (gridSize.dirty || gridSize.touched)">
Vous devez choisir un nombre de cartes
</p>
</div>
<!-- nombre maximal de coups -->
<div class="field">
<label class="label">Nombre maximal de coups</label>
<div class="control">
<input [class.is-danger]="
maxFlipCount.invalid && (maxFlipCount.dirty || maxFlipCount.touched)
" class="input" type="number" name="maxFlipCount" #maxFlipCount="ngModel" [(ngModel)]="optionsForm.maxFlipCount" required min="{{ optionsForm.gridSize }}" />
</div>
<p class="help is-danger" *ngIf="
maxFlipCount.invalid &&
(maxFlipCount.dirty || maxFlipCount.touched) &&
maxFlipCount.errors.required
">
Veuillez entrer un nombre maximal de coups
</p>
<p class="help is-danger" *ngIf="maxFlipCount.errors?.min">
Veuillez entrer un nombre supérieur ou égal à {{ optionsForm.gridSize }}
</p>
</div>
<button type="submit" [disabled]="!gameOptionsForm.form.valid">
Commencer
</button>
</form>
The min attribute does actually do it's job when I use the little arrows (automatically put there by the browser) on the side to increase/decrease the value, however the problem is when I type a value in manually, the field value can be whatever I want and it will not appear as being invalid.
Thank you for reading through this and suggesting any ideas.
I ended up finding the answer to my question. So, I used a custom directive to check that the value of the field was what I wanted.
This article explains it quite well: https://www.digitalocean.com/community/tutorials/angular-custom-validation
I have the following code
<div>Yes or no?</div>
<input type="radio" id="Nein" name="isUsedFor [(ngValue)]="isNotUsedFor" [(ngModel)]="isNotUsedFor">
<label for="no">Nein</label><br>
<input type="radio" id="Ja" name="isUsedFor" [(ngValue)]="isUsedFor" [(ngModel)]="isUsedFor">
<label for="yes">Ja</label>
</div>
My problem is, when I click on Nein, then Ja will be selected and not the Nein, and when I click on Ja then the Nein will be selected.
Here for example I have clicked on Nein and Ja will be selected and when I submit, then Ja will be submitted.
Do you have a idea to solve my inconvenience?
Thank you in advance.
Here is my .ts file:
public isNotUsedFor: string = "Nein";
public isUsedFor: string = "Ja";
Demo
You should use one model for both input and give value to input elements.
<div>Yes or no?</div>
<input type="radio" id="Nein" name="isUsedFor" value="Nein" [(ngModel)]="isUsedFor"/>
<label for="no">Nein</label><br>
<input type="radio" id="Ja" name="isUsedFor" value="Ja" [(ngModel)]="isUsedFor"/>
<label for="yes">Ja</label>
<br>
{{isUsedFor}}
in component
isUsedFor: string = "Ja";
i'm trying to have a dynamic part of my form starting from a value i get from a http call (and later a select).
The form is supposed to be required. That means every single input should be required. Of course, if the value i check on is not the "right" one, a part of the form should be hided and the inputs should be set as non-required (otherwise I can't save the data).
I already did it when the first value arrives (from the http, i just check the value and change the show/hide & required/not required part), but I can't do it on a select (the http value and the select are quite similar, but the select should be full dynamic).
I just don't understand why, the mechanic should be exactly the same.
Here the html part:
This is the static value (from http call)
<div class="form-group col-sm-12">
<label class="form-control-label">Classificazione 1</label>
<br />
{{picture.PictureClass.Class}}
</div>
And the rest
<span id="showDiv" ng-show = "false">
<div class="row">
<div class="form-group col-sm-12" ng-class="{ 'has-error' : formPicture.ReportingDetail.$invalid && formPicture.ReportingDetail.$touched}">
<label for="ReportingDetail" class="form-control-label">Analisi Segnalazione</label>
<select ng-disabled="accessLevelStatus() < 2"
class="form-control" name="ReportingDetail"
id="ReportingDetail" placeholder="ReportingDetail"
ng-model="picture.ReportingDetail">
<option value=""></option>
<option value="Segnalazione ambientale">Segnalazione ambientale</option>
<option value="Segnalazione di sicurezza">Segnalazione di sicurezza</option>
<option value="Segnalazione strutturale">Segnalazione strutturale</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12" ng-class="{ 'has-error' : formPicture.Reason.$invalid && formPicture.Reason.$touched}">
<label for="Reason" class="form-control-label">Motivazioni</label>
<textarea ng-disabled="accessLevelStatus() < 2" id="Reason"
class="form-control" name="Reason"
ng-model="picture.Reason">
</textarea>
</div>
</div>
</span>
This is how i manage it
$scope.picture = ReportingPictureService.pictures.get({id: $stateParams.id}, function (picture) {
$scope.title = 'Modifica segnalazione';
$scope.picture.PictureDate = new Date($scope.picture.PictureDate);
//Se la Classificazione 1 >= 3 (Segnalazione/Segnalazione urgente), allora mostro i campi associati alla segnalazione
var div = angular.element('#showDiv');
var reportingDetailInput = angular.element('#ReportingDetail');
var reasonInput = angular.element('#Reason');
//Se Classificazione 1 >= 3, allora gli input sono visibili e sono tutti required
if($scope.picture.PictureClass_ID >= 3) {
div.attr('ng-show',"true");
reportingDetailInput.attr('required',"required");
reasonInput.attr('required',"required");
}
else {
div.attr('ng-show',"false");
reportingDetailInput.attr('required',"false");
reasonInput.attr('required',"false");
}
//Tengo conto anche di Classificazione 2 e uso le seguenti funzioni per modificare gli attributi degli input e dello span (show and hide)
$scope.changeClass2 = function() {
if(picture.PictureClass2_ID >= 3) {
div.attr('ng-show',"true");
reportingDetailInput.attr('required',"required");
reasonInput.attr('required',"required");
}
else {
div.attr('ng-show',"false");
reportingDetailInput.attr('required',"false");
reasonInput.attr('required',"false");
}
}
//Funzione che gestisce lo show/hide dei due input
$scope = div.scope();
$injector = div.injector();
$injector.invoke(function($compile) {
$compile(div)($scope)
});
//Funzione che gestisce il required = true/false del campo Analisi Segnalazioni
$scope = reportingDetailInput.scope();
$injector = reportingDetailInput.injector();
$injector.invoke(function($compile) {
$compile(reportingDetailInput)($scope)
});
//Funzione che gestisce il required = true/false del campo Motivazioni
$scope = reasonInput.scope();
$injector = reasonInput.injector();
$injector.invoke(function($compile) {
$compile(reasonInput)($scope)
});
downloadImage($scope.picture);
})
The span part (the show/hide part, http static value) should be visible (and required) when $scope.picture.PictureClass_ID >= 3. Of course it should be hided (and not required) when $scope.picture.PictureClass_ID < 3.
The $scope.picture.PictureClass2_ID is the same, but it should be changing dynamically with the select function.
The first part works well, but the select part is not working.
Any idea on how this is not working?
Instead of manipulating DOM attributes with the controller, use the ng-show and ng-required directives:
<select ng-disabled="accessLevelStatus() < 2"
class="form-control" name="ReportingDetail"
id="ReportingDetail" placeholder="ReportingDetail"
ng-model="picture.ReportingDetail"
ng-show="picture.PictureClass_ID >= 3"
ng-required="picture.PictureClass_ID >= 3" >
<option value=""></option>
<option value="Segnalazione ambientale">Segnalazione ambientale</option>
<option value="Segnalazione di sicurezza">Segnalazione di sicurezza</option>
<option value="Segnalazione strutturale">Segnalazione strutturale</option>
</select>
For more information, see
AngularJS ng-required Directive API Reference
I am creating an HTML page which will accept user inputs and queries a database at the backend. To start off I am just trying to take user's output and display how the query will look like on the same page.
It has two radio buttons.
I am able to display the user selections, but right now its shows text for all buttons instead of the radio button selection. How can I restrict the display of text based only on the radio button which is selected? Here is my code -
<form id="data" method="post">
<input type="radio" id="Name" > Name
<input type = "text" id="value1"> <br>
<input type="radio" id="Last"> Lastname
<input type = "text" id="value2"> <br>
<input type="submit" onclick="return query()" value="Get Total">
<p style="font-size:80%;"> <span id='boldStuff1'> </span> <br> <span id='boldStuff2' > </span> </p>
</form>
<div id="display" style="height: 50px; width: 100%;"></div>
function query(){
var a = document.forms["data"]["value1"].value;
var b = document.forms["data"]["value2"].value;
var display=document.getElementById("display")
document.getElementById('boldStuff1').innerHTML= " SELECT * FROM table WHERE Name = " + a ;
document.getElementById('boldStuff2').innerHTML= " SELECT * FROM table WHERE Last = " + b ;
return false;
}
Here is how query looks like right now -
http://jsfiddle.net/mw6FB/104/
Thanks!
This will work,
function query(){
//var a = document.forms["data"]["value1"].value;
//var b = document.forms["data"]["value2"].value;
//var display=document.getElementById("display")
//document.getElementById('boldStuff1').innerHTML= " SELECT * FROM table WHERE Name = " + a ;
//document.getElementById('boldStuff2').innerHTML= " SELECT * FROM table WHERE Last = " + b ;
var nameDisplay = document.getElementById('boldStuff1');
var lastNameDisplay = document.getElementById('boldStuff2');
if(document.getElementById('Name').checked) {
var a = document.forms["data"]["value1"].value;
nameDisplay.innerHTML= " SELECT * FROM table WHERE Name = '" + a + "'";
lastNameDisplay.innerHTML= "";
} else if(document.getElementById('Last').checked) {
var b = document.forms["data"]["value2"].value;
lastNameDisplay.innerHTML= " SELECT * FROM table WHERE Last = '" + b + "'";
nameDisplay.innerHTML= "";
}
return false;
}
<form id="data" method="post">
<input type="radio" id="Name" name="radioQuery" checked > Name
<input type = "text" id="value1"> <br>
<input type="radio" id="Last" name="radioQuery"> Lastname
<input type = "text" id="value2"> <br>
<input type="submit" onclick="return query()" value="Get Total">
<p style="font-size:80%;"> <span id='boldStuff1'> </span> <br> <span id='boldStuff2' > </span> </p>
</form>
<div id="display" style="height: 50px; width: 100%;"></div>
You're not doing anything with the radio buttons. Find out which one is selected (if any), and only assign the innerHtml of the selected one. You may want to clear the other one as well. You can do this with a simple if().
See for example How to get value of selected radio button?.
Also, if you want to be able to actually submit this form and read its values, you'll want to name your input elements.
I'm on a project using ASP.NET MVC5 with Razor.
I have a table in a View that it regroups some information who compose an historic.
This historic is on many year and I don't want the user seen all year when user go on this page, it's so many information in the same time. So I develop a system where the user can select year of his choice, and he can select all years.
But this system doesn't work...
I have a dynamic list of radio buttons:
foreach (var item in #ViewBag.annees)
{
if (#item == #ViewBag.selectAnnee)
{
<label class="reset-this" for="#i">
<input id="#i" type="radio" name="annee" value="#item" checked="checked">
#item
</label>
}
else
{
<label class="reset-this" for="#i">
<input id="#i" type="radio" name="annee" value="#item ">
#item
</label>
}
i++;
}
if (#ViewBag.selectAnnee == 0)
{
<label class="reset-this" for="0">
<input id="0" type="radio" name="annee" value="0" checked="checked">
Toutes les années
</label>
}
else
{
<label class="reset-this" for="0">
<input id="0" type="radio" name="annee" value="0">
Toutes les années
</label>
}
The zero is for all years.
I want to add a link that call the good method like this :
#Html.ActionLink("Historique formateur", "../Histo/IndexHistoFormateur",
new { id = Model.sId, annee = #dateEnCour })
But I don't know how get the value of the selected radio button to put in my link.