how to save a list of data on playframework - html

add.html
#{form id:'addUserForm', action:#Users.Submit()}
#{field 'user.firstName'}
<div class="field">
<label for="${field.id}">First name : </label>
<input id="${field.id}" type="text" name="${field.name}" size="30" value="${field.value}" class="${field.errorClass}" /><span class="error">${field.error}</span>
</div>
#{/field}
this works
#{list user.department, as:'dep'}
#{field 'dep.id'}
<strong>Name: ${dep.name} </strong>
<input type="radio" name="${field.number}" value="0" checked>
<input type="radio" name="${field.number}" value="1">
#{/field}
#{/list }
this does not work :(
my problem is how to save a list in to the database
thanks

Related

How to stop fieldset in form from causing a double scroll on the page?

I have a form on a page in which the fieldsets create another scrollbar in the page, and makes the form scrollable. This is so weird, and its even weirder that I cant find any sort of information or solution on this anywhere. It should just continue on in the page, I have no size restriction for the form.
Here is my HTML for the form
<form>
<fieldset>
<legend>Customer Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="area">Please describe your concern:</label><br>
<textarea name="area" id="area" rows="5" cols="30"></textarea><br><br>
</fieldset><br>
<fieldset>
<legend>Product Information:</legend>
<label for="pname">Product name:</label>
<input type="text" id="pname" name="pname"><br><br>
<label for="date">Date of Purchase:</label>
<input type="date" id="date" name="date"><br><br>
<label>Select your warranty plan:</label> <br>
<input type="radio" id="none" name="plan" value="none">
<label for="none">None</label><br>
<input type="radio" id="six" name="plan" value="six">
<label for="css">6 Months</label><br>
<input type="radio" id="twelve" name="plan" value="twelve">
<label for="javascript">12 Months</label><br>
<input type="radio" id="eighteen" name="plan" value="eighteen">
<label for="css">18 Months</label><br>
<input type="radio" id="twentyfour" name="plan" value="twentyfour">
<label for="javascript">24 Months</label><br><br>
<label>Select which THE BOARD SHOP locations you have shopped at: </label><br>
<input type="checkbox" id="Toronto" name="Toronto" value="Toronto">
<label for="Toronto"> Toronto</label><br>
<input type="checkbox" id="Montreal" name="Montreal" value="Montreal">
<label for="Montreal"> Montreal</label><br>
<input type="checkbox" id="California" name="California" value="California">
<label for="California"> California</label><br>
<input type="checkbox" id="New York" name="New York" value="New York">
<label for="New York"> New York</label><br>
<input type="checkbox" id="Cairo" name="Cairo" value="Cairo">
<label for="Cairo"> Cairo</label><br>
</fieldset><br>
<input type="submit" value="Submit" id="submit">
</form>
and the CSS
form {
margin: 0 auto;
width: 50%;
}
textarea {
resize: none;
}
label,
legend,
input {
font-family: "Kanit", sans-serif;
}

HTML for multiple radio groups with the same name

What is the most accessible way to split a single radio form (same name) into groups? For example, choosing a time with the groups Today or Tomorrow?
Perhaps split them into two fieldsets?
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend>Today</legend>
<input type="radio" name="phone" id="a" value="a"/>
<label for="a">9am</label>
<input type="radio" name="phone" id="b" value="b"/>
<label for="b">12pm</label>
<input type="radio" name="phone" id="c" value="c"/>
<label for="c">5pm</label>
</fieldset>
<fieldset>
<legend>Tomorrow</legend>
<input type="radio" name="phone" id="d" value="d"/>
<label for="d">9am</label>
<input type="radio" name="phone" id="e" value="e"/>
<label for="e">12pm</label>
<input type="radio" name="phone" id="f" value="f"/>
<label for="f">5pm</label>
</fieldset>
</form>
The best approach seems to be using multiple fieldsets and in this particular example we want to clarify the legends as Graham Ritchie suggested. VoiceOver repeats the legend on each radio so it was redundant to add it to the label as well.
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend><span class="visually-hidden">Call me</span> Today</legend>
<input type="radio" name="phone" id="a" value="a"/>
<label for="a">9am</label>
<input type="radio" name="phone" id="b" value="b"/>
<label for="b">12pm</label>
</fieldset>
<fieldset>
<legend><span class="visually-hidden">Call me</span> Tomorrow</legend>
<input type="radio" name="phone" id="d" value="d"/>
<label for="d">9am</label>
<input type="radio" name="phone" id="e" value="e"/>
<label for="e">12pm</label>
</fieldset>
</form>
I updated the answer. Not sure you can do this with radio buttons but checkboxes and some javascript should do the trick.
function group1(e){
var id = e.target.id;
var boxes = document.getElementsByTagName('input');
for(let i=0;i<3;i++){
if (boxes[i].id != id)boxes[i].checked=false;
}
}
function group2(e){
var id = e.target.id;
var boxes = document.getElementsByTagName('input');
for(let i=3;i<6;i++){
if (boxes[i].id != id)boxes[i].checked=false;
}
}
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend>Today</legend>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="a" value="a"/>
<label for="a">9am</label>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="b" value="b"/>
<label for="b">12pm</label>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="c" value="c"/>
<label for="c">5pm</label>
</fieldset>
<fieldset>
<legend>Tomorrow</legend>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="d" value="d"/>
<label for="d">9am</label>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="e" value="e"/>
<label for="e">12pm</label>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="f" value="f"/>
<label for="f">5pm</label>
</fieldset>
</form>

checkboxes in html form wont check when clicked even with labels : Here's the whole form

Some of the checkboxes in my form are not checking when clicked
I've tried wrapping them with the label as this usually does the trick for people but this hasn't changed anything for me, even if I get rid of the text for each checkbox it still doesn't check. I'm not sure what else it could be.
<div class = "register">
<form action="register.php" method="post">
<input type="text" name="username" value="" placeholder="Username ..."><p />
<input type="password" name="password" value="" placeholder="Password ..."><p />
<input type="email" name="email" value="" placeholder="someone#somesite.com"><p />
<input type="gender" name="gender" value="" placeholder="Male or Female ..."><p />
<input type="sport" name="sport" value="" placeholder="Favorite Sport..."><p />
<input type="age" name="age" value="" placeholder="Age ..."><p />
<h1 class="h4">Favorite Player</h2>
<br><br>
<label><input type='checkbox' name='response1' value='response1'>Ronaldo</label>
<label><input type='checkbox' name='response2' value='response2'>Messi</label>
<label><input type='checkbox' name='response3' value='response3'>Ibra</label>
<label><input type='checkbox' name='response4' value='response4'>Me</label>
<br><br>
<h1 class="h4">Favorite Color</h2>
<br><br>
<label><input type='checkbox' name='noise1' value='noise1'>Red</label>
<label><input type='checkbox' name='noise2' value='noise2'>Blue</label>
<label><input type='checkbox' name='noise3' value='noise3'>ME!</label>
<br><br>
<h1 class="h4">Level of Cleanliness/Organization Preference </h1><br><br><br><br>
<input type='checkbox' name='room1' value='room1' class='heads'><img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1446151328/miami-header-dg1015.jpg?itok=eIwFd7q_" width="250" height="250" /><br>
<input type='checkbox' name='room2' value='room2' class='heads'><img src="https://images.musement.com/cover/0002/49/thumb_148242_cover_header.jpeg?w=1200&h=630&q=60&fit=crop" width="250" height="250" /> <br>
<input type='checkbox' name='room3' value='room3' class='heads'><img src="place.jpg" width="250" height="250" />
<h1 class="h4">Do you want a account?</h2>
<br><br><br><br>
<label><input type='checkbox' name='r1' value='r1'>Yes</label>
<label><input type='checkbox' name='r2' value='r2'>No</label>
<br><br>
<h1 class="h4">Do you need a account?</h2>
<br><br>
<label><input type='checkbox' name='r3' value='r3'>Yes</label>
<label><input type='checkbox' name='r4' value='r4'>No</label>
<br><br>
<br><br>
br><br>
<?php
if(isset($_POST['r3']))
{
echo ' <h1 class = "h4">How did you find us?</h2><br><br> <input type="location" name="location" value="" placeholder="Zip Code or Full address"><p />';
}
?>
<br><br>
<input type="submit" name="createaccount" value="Create Account">
</form>
</div class = "register">
To have the checkboxes check when clicked
I was able to check the boxes when running the code snippet included with your question.
As a possible solution for your environment, instead of:
<input type='checkbox' name='response2' value='response2'>Messi</label>
Try the following:
<input type="checkbox" id="Messi" name="Messi"> <label for="Messi">Messi</label>

Radiobutton array (HTML)

If i have two inputs of type text with the same name, like this:
<input type="text" name="task" id="task1" value="begin">
<input type="text" name="task" id="task2" value="end">
When i submit the form task is automatically sent as an array (task[0]='begin', task[1]='end').
This is very useful for many reasons, for instance i don't have to worry about serializing the result, I can use a sortable to re-sort and when I submit it's already in the right order.
But if i want to use radio buttons, i have to use several inputs with the same name already.
Is there a way I could keep this functionality with radio buttons?
For instance:
<input type="text" name="task" id="task1" value="begin">
<input type="radio" name="time" id="time11" value="early" checked="checked">
<input type="radio" name="time" id="time12" value="noon">
<input type="radio" name="time" id="time13" value="late">
<input type="text" name="task" id="task2" value="end">
<input type="radio" name="time" id="time21" value="early">
<input type="radio" name="time" id="time22" value="noon" checked="checked">
<input type="radio" name="time" id="time23" value="late">
I want that when submitted i get time[0]='early' and time[1]='noon'
Try this:
<input type="text" name="task[0]" id="task1" value="begin">
<input type="radio" name="time[0]" id="time11" value="early" checked="checked">
<input type="radio" name="time[0]" id="time12" value="noon">
<input type="radio" name="time[0]" id="time13" value="late">
<input type="text" name="task[1]" id="task2" value="end">
<input type="radio" name="time[1]" id="time21" value="early">
<input type="radio" name="time[1]" id="time22" value="noon" checked="checked">
<input type="radio" name="time[1]" id="time23" value="late">
Then you'd get: task[0]=begin, time[0]=early, task[1]=end and time[1]=noon.

Two radio buttons on at the same time

Hello Can you tell why I am allowed to select two radio buttons in this code
<html>
<head><title>Survey</title>
<body>
<h3>Please Enter the following Information: </h3>
<form method= "post" action="/~fmccown/cgi-bin/printinfo.cgi">
<input type ="hidden" name="input-source" value="survey2.html" />
<p>
Name: <input type="text" name="name" size="30" />
</p><p>
Classification:
<select name="class">
<option>Freshman</option>
<option selected="selected">Sophomore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</p><p>
Gender:
<input type="radio" name="gender" value="M" checked="checked" />Male
<input type="radio" name="gender" value="F" />Female
</p><p>
Email address: <input type="text" name="email" size="30" />
</p><p>
Password: <input type="password" name="pword" />
</p><p>
What are your favorite computer classes?
<br />
<label>
<input type="checkbox" name="class-int" />Internet Development
</label>
<label>
<input type="checkbox" name="class-net" />Networking
</label>
<label>
<input type="checkbox" name="class-gui" />GUI
</label>
<label>
<input type="checkbox" name="class-oop" />OOP
</label>
</p><p>
Are you graduating this spring?
<label>
<input type="radio" name="grad-yes" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad-no" value="Yes" />No
</label>
</p><p>
<input type="submit" value="Submit Survey" />
<input type="reset" value="Clear Form" />
</p>
</form>
<p>
Thank You!
</p>
</body>
</html>
These two elements should probably have the same name:
<input type="radio" name="grad-yes" value="Yes" />
<input type="radio" name="grad-no" value="Yes" />
Radio buttons get grouped together if and only if they share a common name.
The first pair is called gender, so it works.
The second pair doesn't, since one is called grad-yes and the other grad-no.
The way to go would be:
<label>
<input type="radio" name="grad" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad" value="No" />No
</label>