I have form with 2 radio buttons but both of the radio buttons can be selected,
<form class="descriptions" id="collection" method="post" action="">
<table width="200">
<tr>
<td>
<label>Collection</label>
<input type="radio" value="collection" />
</td>
<td>
<label>Delivery</label>
<input type="radio" value="delivery" />
</td>
</tr>
</table>
</form>
I know this is very easy but I can't seem to find the answer,
any help would be appreciated.
Give them the same name.
Description of the radio button control type in the HTML 4.01 specification:
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
<form class="descriptions" id="collection" method="post" action="">
<table width="200">
<tr>
<td>
<label>Collection</label>
<input type="radio" name="samename" value="collection" />
</td>
<td>
<label>Delivery</label>
<input type="radio" name="samename" value="delivery" />
</td>
</tr>
</table>
</form>
// this is the correct answer for ur following problem //
Related
I'm trying to check a checkbox using <label> but by clicking a row / <tr> of <table>. Is this possible??
I have tried to use jQuery, but I'm not quite satisfied with the result, because, I'll eventually select the texts inside the row, which isn't very user friendly
I also have tried to test it in HTML on Chrome
<table border="1">
<label>
<!-- This label is expected to be used to check on the checkbox by
clicking anywhere on the table row -->
<tr>
<td><input type="checkbox" /> Foo</td>
<td>Bar</td>
</tr>
</label>
</table>
I expected when I click bar the checkbox would be checked, but it didn't
Note:
Since this is impossible to be aquired through basic HTML, I'm going to close this question
Please set label for attribute to do this, below code will help you.
<table border="1">
<tr>
<td><input type="checkbox" id="mycheckbox" /> Foo</td>
<td><label for="mycheckbox">Bar</label></td>
</tr>
</table>
$('.checkBoxChecked').on('click', function(){
var checkbox = $(this).find('.Aps_checkbox');
checkbox.prop("checked", !checkbox.prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox" class="Aps_checkbox"/> Foo</td>
<td>Bar</td>
</tr>
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox2" class="Aps_checkbox"/> Foo2</td>
<td>Bar2</td>
</tr>
</table>
<!-- begin snippet: js hide: false console: true babel: false -->
It's not possible to achieve this by basic HTML as of now...
Based on W3, it said that <label> can only affect on one level of container only
Something like this:
Legal:
<label>
<div> AAAA</div>
<input type="checkbox">
Some text
</label>
Illegal:
<label>
<div> AAAA
<input type="checkbox">
</div>
Some text
</label>
So since my question is involving more than one level of containers, It can't be achieved by normal means
Reference:
Mozila Web Reference
Multiple labels can be associated with the same form control.
Clicking on any of the labels associated with an input element toggles the checked state of that input element.
To check a checkbox by clicking a table row, you can create a table where the first td element of each table row contains an input element, and the subsequent td elements contain labels for that input element, like so:
<table>
<tr>
<td>
<input id="foo" type="checkbox" />
</td>
<td>
<label for="foo">Foo Label 1</label>
</td>
<td>
<label for="foo">Foo Label 2</label>
</td>
</tr>
<tr>
<td>
<input id="bar" type="checkbox" />
</td>
<td>
<label for="bar">Bar Label 1</label>
</td>
<td>
<label for="bar">Bar Label 2</label>
</td>
</tr>
</table>
To maximize the clickable area of each table row, you can make each label element fill the width of its parent td element like so:
table td label {
display: block;
}
I've two forms in different divs. One is search form and another is login form.
Here is my problem: When I click search bar, type something and hit enter, form submits.
But when I enter my login information and press enter, nothing happens.
Here is the HTML code:
<div id="xxxx">
<form action="xxxxx.php" method="get" name="xxxxx">
<table>
<tr>
<td><input type="text" size="xxx" maxlength="xxxx" name="xxxx" id="xxxx"></td>
<td><input type="button" value="Ara"></td>
</tr>
</table>
</form>
</div>
<div id="xxxxxxx"><form name="xx" action="xxxxxx.php" method="post">
<table>
<tr>
<td>Kullanıcı Adı:</td>
<td><input type="text" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td>Şifre:</td>
<td><input type="password" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td><input type="button" name="xxxx" id="xxx" value="Oturum Aç"></td>
</tr>
</table>
</form></div>
Don't mind the xxx's
EDIT:
I'm calling a simple JS function to submit so I can't use input type submit.
Here is JS
function tik()
{
//after a few controls
document.forms["formName"].submit();
}
Of course formname changes for different forms
You have to simply change your <input type="button" ../> to <input type="submit" .../> and everything should works
I think it should work with <input type="submit"/>, initialize onsubmit attribute to call tik()
<div id="xxxx">
<form action="xxxxx.php" method="get" name="xxxxx" onsubmit="tik()">
<table>
<tr>
<td>
<input type="text" size="xxx" maxlength="xxxx" name="xxxx" id="xxxx">
</td>
<td>
<input type="submit" value="Ara">
</td>
</tr>
</table>
</form>
</div>
<div id="xxxxxxx">
<form name="xx" action="xxxxxx.php" method="post" onsubmit="tik()">
<table>
<tr>
<td>Kullanıcı Adı:</td>
<td><input type="text" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td>Şifre:</td>
<td><input type="password" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td><input type="submit" name="xxxx" id="xxx" value="Oturum Aç"></td>
</tr>
</table>
</form>
</div>
edit
Make sure to utilize <input type="submit">
Also:
Make sure the ID of your two buttons are different. Looks like in the first button you don't have an ID set.
make sure the "xxx.php" actions on the forms are not mixed up.
and lastly, make sure your form names are different (looks like they are given the amount of x's in each name value).
<TR>
<TD VALIGN="top">
<LABEL FOR="disabilities">5. Do you have any disability which may limit your-----------
<BR>
ability to perform the essential functions of the job
<BR>
for which you are applying?<FONT COLOR="#FF0000"><SUP>*</SUP></FONT>
</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="disabilities" MAXLENGTH="3" SIZE="6" onFocus="javascript:toggleMsg('msg-23')" onBlur="javascript:toggleMsg('msg-23')" MAXLENGTH="20">
<SPAN ID="msg-23" CLASS="msg" STYLE="visibility:hidden;">Yes or no</SPAN><editcheck="req=Y=Please enter yes or no.">
</TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD VALIGN="top">
<LABEL FOR="ifyes">If yes, describe----------------------------------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="ifyes" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-24')" onBlur="javascript:toggleMsg('msg-24')" MAXLENGTH="20">
<SPAN ID="msg-24" CLASS="msg" STYLE="visibility:hidden;">If no, put N/A.</SPAN><editcheck="req=Y=Please enter descriptions of disabilities.">
</TD>
</TR>
<TR>
<TD VALIGN="top">
<LABEL FOR="accommodate">What can we do to accommodate you?---------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="accomodate" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-25')" onBlur="javascript:toggleMsg('msg-25')" MAXLENGTH="20">
<SPAN ID="msg-25" CLASS="msg" STYLE="visibility:hidden;">If none, type N/A</SPAN><editcheck="req=Y=Please enter accommodations.">
</TD>
</TR>
Ignoring the javascript since it doesn't work yet and is part of another question, How do I set this up so I have a checkbox next to disabilities. Click on yes, it shows "ifyes" and "accommodate" click on no, it doesn't show it. How do I do that?
You will need to put some javascript in to make it work. I have put together a real quick test for you. Feel free to modify it to suit your needs.
JavaScript
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.visibility = 'visible';
}
else document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
HTML
<label for="yesCheck">Yes</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label for="noCheck">No</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="visibility:hidden">
<label for="yes">If yes, explain:</label>
<input type='text' id='yes' name='yes'><br>
<label for="acc">What can we do to accommodate you?</label>
<input type='text' id='acc' name='acc'>
</div>
Demo - http://jsfiddle.net/QAaHP/
I am using radio buttons, but I am not sure how to align them how I want. I want them to be on the same line like this :
Option 1 o Option 2 o
But they appear like this :
Option 1 o
Option 2 o
Here is my HTML, can anybody advise?
<table>
<tr>
<td>
<label for="lblMeterName" />
</td>
</tr>
<tr>
<td>
Input/Output Group :
</td>
<td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
<input type="radio" name="rdoInput" value="No"/> No
</td>
</tr>
<tr>
<td>
<input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
Give your radio buttons and labels a class as follows:
<input type="radio" id="radioYes" class="inline-radio" name="radioGroup" value="Yes" />
<label for="radioYes" class="inline-radio">Yes</label>
<input type="radio" id="radioNo" class="inline-radio" name="radioGroup" value="No" />
<label for="radioNo" class="inline-radio">No</label>
Then apply the following CSS:
.inline-radio {
display: inline-block;
}
This is an improvement over the float method because float often requires additional semantics to prevent undesired rendering, whereas inline-block does not.
Put them in a table like this:
<td>
<table><tr><td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
</td><td>
<input type="radio" name="rdoInput" value="No"/> No
</td></tr></table>
</td>
This gives you the most flexibility concerning space in between or alignment with parent object.
You can wrap input and text into div and set float css property for div.
There are multiple solutions for this:
You could wrap another table around the radiobuttons and add each one to a table cell.
Add a <br/> after each option.
You could float the radiobuttons.
You could add a display:inline or display:inline-block to the radiobuttons.
I would prefer wrapping both the radiobutton and it's label in a <label> tag and applying float, since this would make the label clickable as well and provide you with more flexibility:
<label class="radio-label"><input type="radio" name="rdoInput" value="Yes"/> Yes</label>
<label class="radio-label"><input type="radio" name="rdoInput" value="No"/> No</label>
And the CSS:
label.radio-label {
float: left;
margin-right: 10px;
}
Add non-breaking spaces between radio buttons;
Use this:
<table>
<tr>
<td><input type="radio" name="rdoInput" value="Yes"/> Yes</td>
<td><input type="radio" name="rdoInput" value="No"/> No</td>
</tr>
<tr>
<td colspan=2><input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
I'd like to be able to do something like this in HTML. It isn't valid HTML, but the intent is there:
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
Obviously, I can't do this because I must not have a form tag immediately inside of of a <tr> element. The only alternatives I can see are to use nasty javascript or to change the behavior of my program.
What might be a solution that would allow me to have a form that spans multiple columns like this?
One option is to combine the columns with colspans like this:
<table>
<tr>
<th>
Name
</th>
<th>
Favorite Color
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input name="name" value="John"/>
<input name="favorite_color" value="Green"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input name="name" value="Sally"/>
<input name="favorite_color" value="Blue"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
And style the form element's layout with CSS. Or you can go with a pure DIV based layout.
I'd vote for the nasty Javascript. It would allow to keep the layout as it is.
Use table-less design with Div's and CSS.
Eg.
<html>
<head>
<style type="text/css">
#wrapper
{
width: 600px;
}
#header
{
width: 600px;
height:30px;
}
#person
{
clear:both;
width:600px; }
.name
{
clear:both;
width: 200px;
float: left;
text-align: center;
}
.color
{
width: 200px;
float: left;
text-align: center;
}
.submit
{
width: 200px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="name">
<b>Name</b></div>
<div class="color">
<b>Favorite Color</b></div>
</div>
<div id="Person">
<form action="/updatePerson" method="post">
<div class="name">
<input name="name" value="John" /></div>
<div class="color">
<input name="favorite_color" value="Green" /></div>
<div class="submit">
<input type="submit" value="Edit Person" /></div>
</form>
</div>
</div>
</body>
</html>
Old posting I know, but for anyone else looking this up...
It seems to be that all responses to now are so determined to answer your question, that they're forgetting to consider there might be a much simpler way.
There may be that hidden behind your question, there's a reason you can't do this. But the "correct" HTML-valid way to do what you're trying to do is to place the entire table inside a single form. Why do you need one form to edit, and another to delete?
<form action="/updatePerson" method="post">
<table>
<thead>
<tr><th>Person Name</th><th>Fave Color</th><th> </th><th> </th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="30" value="John" name="name_1"></td>
<td><input name="favorite_color_1" value="Green"/></td>
<td><input type="submit" value="Update" name="submit_update_1"></td>
<td><input type="submit" value="Delete" name="submit_delete_1"></td>
</tr><tr>
<td><input type="text" size="30" value="James" name="name_2"></td>
<td><input name="favorite_color_2" value="Orange"/></td>
<td><input type="submit" value="Update" name="submit_update_2"></td>
<td><input type="submit" value="Delete" name="submit_delete_2"></td>
</tr>
</tbody>
</table>
</form>
You need a bit of logic in your ASP/PHP/server-code to calculate which button-name was pushed, but you need that anyway using your proposed solution.
One solution would be if your multiple columns were actually created in DIVs instead of tables.
You could
a) combine entire table row in one form and handle it with one server-side script.
or
b) set form.action with javascript.
Nope, there isn't such form.
But, in many browsers, your usage is working like you expected, except for when you dynamicly creat DOM elements with such structure in FireFox.
Maybe you can throw away the <form> tag, use javascript to do the submit;
Or you can use <div> to do the table layout thing.
If you are using jQuery, you can do this:
<script type="text/javascript">
$(function() {
$('.rowForm').submit(function() {
//console.log($(':input',$(this).closest('tr')));
//Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit
var rowFormContent = $('.rowFormContent',$(this));
rowFormContent.html(''); //Clear out anything that may be in here
$(':input',$(this).closest('tr')).clone().appendTo(rowFormContent);
return true;
});
});
</script>
<tr>
...
<td>
<form action="/cool" method="post" class="rowForm" id="form_row_1">
<div class="rowFormContent" style="display: none;"></div>
<input type="submit" value="save">
</form>
</td>
</tr>
The side effect is you'll get an extra submit input type in your form, but it will be hidden and should not hurt anything. A subtle note here, is the use of ':input'. This is jQuery shorthand for all input types (select,textarea etc). Watch out for select vals not being copied. You'll have to do some trickery (hidden field) to submit the current selected val of a clone()d select.
I've tried numerous ways to solve the same issue; multiple forms within a single html table. FF & Chrome will automagically close if is placed before or within a or because its not semantically correct html. I appreciate based layout would solve the problem but if you 'need' to stick with the table based layout you'll need to use multiple tables and wrap the & immediately before and after the & tags. In my case I then made some small inline CSS adjustments to remove a border or two and then the table butts up against each other as if they were rows.
Example at: http://jsfiddle.net/chopstik/ve9FP/
I encountered the same issue, solved it using Javascript/jQuery.
The problem here is that form can't stretch across multiple columns in a table, however if the form has id <form id="unique_per_page"...></form> each of the stand-alone form elements like input, select or even textarea can be assigned to that form using form attribute <input type="text" name="userName" form="specific_form_id">
The jquery/javascript to assign these things will need to have a random string generator, which I grabbed from the following Stackoverflow answer
So overall the code will look like this:
$("table tr").each(function(i, el){
if(!$(el).find("form[name='updatePerson']").attr("id"))
{ //if the form does not have id attribute yet, assign a 10-character random string
var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
$(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form
$(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line
$(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form
}
});
The HTML code you included will need to be updated with the proper name attributes for the forms
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
The way I've always done it is:
<tr>
<td><form><input name=1></td>
<td><input name=2></td>
<td><input type=submit></form></td>
</tr>
Include the form inside the first and last td, so it's in an actual text area. It's possible that really old browsers will close the form at the /td, but none today.
With your example:
<tr>
<td>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
</td>
<td> <input name="name" value="John"/></td>
<td> <input name="favorite_color" value="Green"/></td>
<td>
<input type="submit" value="Edit Person"/>
</form>
</td>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>