checkboxes select choices at the same time - html

i have this code where you can select the date you like to attend the meeting.
How can I have this possible to select 2 dates at the same time?
Because in this code, one can only select 1 date. What should I add in here?
<div style="background-color:#aaa">
<form method="post" action="[~[*id*]~]">
<input type="hidden" name="formid" value="registrationForm" />
<p>
<table>
<tr>
<td><label for="workshop" style="margin:0.5em">Termine:</label>
<td>
<input type="checkbox" name="termine1" value="Montag 4. Oktober 2010" eform="Termine::1"/> Montag 4. Oktober 2010 <br/>
<input type="checkbox" name="termine2" value="Mittwoch 13. Oktober 2010" /> Mittwoch 13. Oktober 2010 <br/>
<input type="checkbox" name="termine3" value="Freitag 22. Oktober 2010" /> Freitag 22. Oktober 2010 <br/>
</td>
</tr>
<tr>
<td><label for="email" style="margin:0.5em">Email:</label></td>
<td><input type="text" name="email" size="60" maxlength="60" eform="Email:email:1" /><td>
</tr>
<tr>
<td><label style="margin:0.5em; display:block" for="kopieren" >Bitte kopieren Sie den Anti-Spam Code ein: </label>
<img src="[+verimageurl+]" alt="verification code" border="1" style="margin:0.5em"/></td>
<td valign="top"><input type="text" name="vericode" size="20" />
</tr>
<tr>
<td rowspan="3" valign="right">
<input align="right" type="submit" name="submit" style="margin:0.5em" value="Register" />
</td>
</tr>
</table>
=========
This would be the other form look like, do I need to add here for the other dates?
<h3>Registration</h3>
<table>
<tr valign="top"><td>Termine</td><td>[+termine1+]</td></tr>
<tr valign="top"><td>Termine</td><td>[+termine2+]</td></tr>
<tr valign="top"><td>Termine</td><td>[+termine3+]</td></tr>
<tr valign="top"><td>Email</td><td>[+email+]</td></tr>
</table>

Make them Checkboxes instead?
<input type="checkbox" name="workshop1" value="morning-with-visit" eform="Selected Dates::1"/> 18 August 2010<br/>
<input type="checkbox" name="workshop2" value="morning-without-visit" /> 19 August 2010<br/>
<input type="checkbox" name="workshop3" value="afternoon-with-visit" /> 20 August 2010 (12h50)<br/>
Try it out here.

Change the inputs to type="checkbox". You will likely need to change the name attribute to correctly process server-side, assuming that's what you're doing.

I agree with the three answers supplied that you should use checkboxes, thus:
<input type="checkbox" name="morning-with-visit" eform="Selected Dates::1"/> 18 August 2010<br/>
<input type="radio" name="morning-without-visit" /> 19 August 2010<br/>
<input type="radio" name="afternoon-with-visit" /> 20 August 2010 (12h50)<br/>
On the server-side, you will only receive back the boxes that were ticked. Here is a PHP example...
if (isset($_POST['morning-with-visit'])) {
echo 'They selected "morning-with-visit"';
}
You can make radio inputs multi-selectable, but by putting each in its own name... like this example (I only mention it to say that is IS possible).
<input type="radio" name="workshop1" value="morning-with-visit" eform="Selected Dates::1"/> 18 August 2010<br/>
<input type="radio" name="workshop2" value="morning-without-visit" /> 19 August 2010<br/>
<input type="radio" name="workshop3" value="afternoon-with-visit" /> 20 August 2010 (12h50)<br/>
Note that if you do this, you can't actually "un-select" anything, which is bad. So many people use yes-no groups (although checkboxes are more natural for this).

You can't have multiple selections in a radio group. You need to use something like chekboxes and perform the validation yourself, to make sure that 2 values are selected. This can be done using javascript to get client-side validation before posting the values to the server.

Related

HTML Form not outputting anything. Getting NaN

I'm trying to get a form to output a number value based on the outcome of two fields. A value input and a radio selection but I can't seem to get it to work.
<form oninput="retVal.value=parseInt(pavVal.value)-(parseInt(pavVal.value)*parseInt(pavCAT.value))">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input type="number" id="pavVal">
</td>
</tr>
<tr>
<td>
<label for="pavCAT" ><b>CAT:</b></label>
<td>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="checkbox" name="pavCAT" id="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Anyone able to tell me where I'm going wrong>
Ids must be unique -- there were three #pavCAT. When the browser is told to do anything with #pavCAT, it will find the first #pavCAT do whatever it was supposed to do then quit, leaving the other 2 #pavCATs untouched as if they never existed. The easiest solution is to suffix each id with a number.
The rest of the code should work since in this case the id #pavCAT is just as accessible as the name [name="pavCAT"].
Also, the HTML had checkmarks not radios.
The inline event handler is now streamlined:
oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)"
Note that parseInt() isn't used to convert the string values into numbers. That's because the strings are being coerced into numbers by the use of these operators: - and *.
<form id='calc' oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)">
<table>
<tr>
<td>
<label for="pavVal"><b>PAV:</b></label>
</td>
<td>
<input id="pavVal" type="number">
</td>
</tr>
<tr>
<td>
<label for="pavCAT"><b>CAT:</b></label>
</td>
<td>
<input id="pavCAT3" name="pavCAT" type="radio" value="0.3">
<label for="pavCAT3"> N (30%)</label>
<input id="pavCAT2" name="pavCAT" type="radio" value="0.2">
<label for="pavCAT2"> S (20%)</label>
<input id="pavCAT1" name="pavCAT" type="radio" value="0.1">
<label for="pavCAT1"> B (10%)</label>
</td>
</tr>
<tr>
<td>
<label for="retVal"><b>Retention Value:</b></label>
</td>
<td>
<output name="retVal" for="pavVal pavCAT"></output>
</td>
</tr>
</table>
</form>
Your formula is working, but you assigned the same ID for the pavCat checkbox elements, thus returning NaN and not the correctly assigned value - try it yourself with removing/commenting out two ot the pavCAT elements.
imho is a checkbox the wrong UI element - go for a single select dropdown or even better a radio input.
Also parseInt should be parseFloat instead for pavCat. Anyways it's a little bit over the top in this situation and you could totally remove it in this simple example - maybe you have more context to justify parsing it.
<input type="radio" id="pavCat1" name="pavCAT" value="0.3">
<label for="0.3" > N (30%)</label>
<input type="radio" id="pavCat2" name="pavCAT" value="0.2">
<label for="0.2" > S (20%)</label>
<input type="radio" id="pavCat3" name="pavCAT" value="0.1">
<label for="0.1"> B (10%)</label>
https://jsfiddle.net/p9v1f53w/16/

How to fix HTML with drop down values and email send bottom

I am setting up my menu and want to use drop down options for customers to select items and place email orders.
The following is what I have done so far but when I send the email it goes no where. Just want you to know I have no clue about html coding, I am learning because I would like to use this on my website.
<form>
<form method="post" action="mailto:myemail#gmail.com">
Name:<br>
<input type="text" name="name"><br> E-mail:
<br>
<input type="text" name="email"><br>
<table>
<tr>
<td><input type="hidden" name="on0" value="Fries">Fries</td>
</tr>
<tr>
<td>
<select name="os0">
<option value=>Small
<tr>
<td><input type="hidden" name="on0" value="Flavors">Flavors</td>
</tr>
<tr>
<td>
<select name="os0">
<option value=>Garlic Parmesan
<input type="submit" value="Send Email" />
<input type="reset" value="Reset">
</form>
I would like to receive via email orders from customers that reflect the options above. This is just one item but if I can get it to work I will applied the html code to all the items on my menu.

How to replace numeric suffix of a value 3 times, increment suffix, and repeat with Text Pastry?

I need to create 210 checkboxes each with unique names, id's and label for values.
The checkboxes reside in tables, where there are 6 checkboxes to a table.
I've manually done this for 54 checkboxes (9 tables), and want to automate the creation of the last 156 checkboxes (26 tables).
I therefore want to automate the incrementation of:
name
id
label for value
This is the simplest way I can see to do it:
Create the base structure for 26 tables (see below).
Use the Text Pastry plugin for Sublime Text.
Use a variant of this example:
https://github.com/duydao/Text-Pastry/wiki/Examples#insert-nums-syntax
With the instructions to:
Find "checkbox00"
Replace with "checkbox55"
Do this for 3 instances
Increment the number used in the replacement text and repeat for the remaining instances.
Is this the sort of thing that Text Pastry was designed to do?
If so, and it's not too large a task to explain, specific directions would be appreciated.
<!-- BEGIN table 10 -->
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox" />
<label for="checkbox00" class="css-label">custom_text_A</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox"/>
<label for="checkbox00" class="css-label">custom_text_B</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox" />
<label for="checkbox00" class="css-label">custom_text_C</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox" />
<label for="checkbox00" class="css-label">custom_text_D</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox"/>
<label for="checkbox00" class="css-label">custom_text_E</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox" />
<label for="checkbox00" class="css-label">custom_text_F</label>
</td>
</tr>
<!-- END table 10 -->
<!-- BEGIN table 11 -->
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox" />
<label for="checkbox00" class="css-label">custom_text_A</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox00" id="checkbox00" class="css-checkbox"/>
<label for="checkbox00" class="css-label">custom_text_B</label>
</td>
</tr>
<!-- ... etc, continue for 26 tables -->
Update/Solution
Here's a Python script I put together quickly that seems to do what I want it to do:
my_string = "<tr><td class=\"area_checkbox\"> \
<input type=\"checkbox\" name=\"checkbox00\" id=\"checkbox00\" class=\"css-checkbox\" /> \
<label for=\"checkbox00\" class=\"css-label\">custom_text_00</label> \
</td></tr>"
growing_string = ""
cb_suffix = 55
text_suffix = 1
for i in range(156):
if text_suffix <= 6:
temp_string = my_string.replace("checkbox00", "checkbox" + str(cb_suffix),3)
temp_string_2 = temp_string.replace("custom_text_00", "custom_text_0" + str(text_suffix))
growing_string += temp_string_2
cb_suffix += 1
text_suffix += 1
else:
text_suffix = 1
temp_string = my_string.replace("checkbox00", "checkbox" + str(cb_suffix),3)
temp_string_2 = temp_string.replace("custom_text_00", "custom_text_0" + str(text_suffix))
growing_string += temp_string_2
cb_suffix += 1
text_suffix += 1
print growing_string
Then I copied the output to JSFiddle and clicked TidyUp to format it :).
Sample Output:
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox55" id="checkbox55" class="css-checkbox" />
<label for="checkbox55" class="css-label">custom_text_01</label>
</td>
</tr>
<tr>
<td class="area_checkbox">
<input type="checkbox" name="checkbox56" id="checkbox56" class="css-checkbox" />
<label for="checkbox56" class="css-label">custom_text_02</label>
</td>
</tr>

Radio Buttons and Check Boxes not sent in query string or post body when blank form is submitted

I've following form
<form method="post" action="getParameterValuesServlet">
<table border="1">
<tr>
<td>User Name</td>
<td><input type="text" name="userName"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
</td>
</tr>
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="hobbies" value="cycling">Cycling<br>
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
<input type="checkbox" name="hobbies" value="treking">Treking<br>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="city" multiple>
<option value="mysore">Mysore</option>
<option value="pune">Pune</option>
<option value="chandigarh">Chandigarh</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Register"></td>
</tr>
</table>
</form>
When I submit this form without entering or selecting any values, I see only blank userName and password (text & password) in post body (same is the case with GET query string)
Why don't radio button, check box and drop down values get submitted with default values?
One more thing, if I remove "multiple" attribute from "select" tag, the first option gets submitted.
Would be thankful, if someone explains this behavior!!
FYI, I'm using Fiddler Web Debugger tool to trace the request and response and submitting this form to a Java Servlet
What default values do you imagine would be sent?
The only values that get sent are the selected options; since no options are selected, there's nothing to send.
That's in contrast to text and password controls, which always have a value, even if that value is the empty string.
You can use a hidden field with a fallback value, if a checkbox in a form is submitted unchecked:
<input type="hidden" name="hobbies" value="">
<input type="checkbox" name="hobbies" value="swimming">Swimming<br>
This seems to work also with radio buttons:
<input type="hidden" name="gender" value="">
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>

Some form checkbox combinations do not work

I have this code and can't figure out what seems to be the problem: if i select 1 & 2, 1 & 3 it's working.
But if I select 2 or 3 only then it's not working.
What seems to be the problem?
I would like to select multiple at the same time.
i think I need to put some if and else here?
But don't really know and sure how?
This is the code:
<div style="background-color:#CCDFED">
<form method="post" action="[~[*id*]~]">
<input type="hidden" name="formid" value="registrationForm" />
<table>
<tr>
<td>
<label for="termine" style="margin:0.5em">Termine:</label>
<td>
<td>
<input type="checkbox" name="termine1" value="Montag 4. Oktober 2010" eform="Termine::1"/> Montag 4. Oktober 2010 <br/>
<input type="checkbox" name="termine2" value="Mittwoch 13. Oktober 2010" /> Mittwoch 13. Oktober 2010 <br/>
<input type="checkbox" name="termine3" value="Freitag 22. Oktober 2010" /> Freitag 22. Oktober 2010 <br/>
</td>
</tr>
<tr>
<td><label for="email" style="margin:0.5em">Email:</label></td>
<td><input type="text" name="email" size="60" maxlength="60" eform="Email:email:1" /><td>
</tr>
<tr>
<td>
<label style="margin:0.5em; display:block" for="kopieren" >Bitte kopieren Sie den Anti-Spam Code ein: </label>
<img src="[+verimageurl+]" alt="verification code" border="1" style="margin:0.5em"/></td>
</td>
<td valign="top"><input type="text" name="vericode" size="20" /> </td>
</tr>
<tr>
<td rowspan="3" valign="right">
<input align="right" type="submit" name="submit" style="margin:0.5em" value="Register" />
</td>
</tr>
</table>
</form>
</div>
You are making them required by setting eform on all of them. Remove the ::1 eform if they are not required. I also added a validation message.
Try:
<input type="checkbox" id="termine1" name="termine[]" value="Montag 4. Oktober 2010" eform="Termine::1:Please select at least one box"/> Montag 4. Oktober 2010 <br/>
<input type="checkbox" id="termine2" name="termine[]" value="Mittwoch 13. Oktober 2010" /> Mittwoch 13. Oktober 2010 <br/>
<input type="checkbox" id="termine3" name="termine[]" value="Freitag 22. Oktober 2010" /> Freitag 22. Oktober 2010 <br/>
I am doing all of this blindly, so bear with me. Once you have submitted the form, you now need I no longer see your code for the confirmation page. All you need to change is in your report you need to use
[+termine+].
This might because of label is not attaching with your, checkbox, just provide Id to checkbox, please refer below
<input type="checkbox" id="termine1" name="termine1" value="Montag 4. Oktober 2010" eform="Termine::1" />
<label for="termine1"> Montag 4. Oktober 2010</label>
Hope this will resolve your issue.