I would like to toggle selection between two different sets of radio buttons.
The condition that must be met is that if the user checks the button on one set (called in the example l1), it is unchecked in the other set (called in the example m1).
In other questions, it seems that it is only feasible solution is using Java scripts.
Below is the code:
<table border="0" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td style="width: 300px;"> </td>
<td style="width: 100px; text-align: center;">Least</td>
<td style="width: 100px; text-align: center;">Most</td>
</tr>
<tr>
<td>{{question1}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-1" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="1" /></td>
</tr>
<tr>
<td>{{question2}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-2" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="2" /></td>
</tr>
<tr>
<td>{{question3}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-3" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="3" /></td>
</tr>
<tr>
<td>{{question4}}</td>
<td style="text-align: center;"><input name="l1" type="radio" value="-4" /></td>
<td style="text-align: center;"><input name="m1" type="radio" value="4" /></td>
</tr>
</tbody>
Related
This is what i am trying in aspx page
group name is not same in html code how can i manage it pls suggest
i am trying with the radio button in side a repeater control
<asp:Repeater ID="rptGoogleCalenderList" runat="server">
<ItemTemplate>
<tr>
<td style="width: 10px;">
<asp:RadioButton ID="radiocalenderList" CssClass="grpGoogleCalenderList" value="grpGoogleCalenderList" GroupName="GoogleCalenderList" runat="server" />
<%--<input id="" type="radio" name="" />--%>
</td>
<td colspan="3">
<asp:HiddenField ID="hfCalenderId" runat="server" Value='<%#Eval("CalenderId") %>' />
<%#Eval("CalenderName") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
this is what HTML generated for the above code
<tbody><tr>
<td style="width: 10px;">
<span class="grpGoogleCalenderList"><input id="Content_rptGoogleCalenderList_radiocalenderList_0" type="radio" name="ctl00$Content$rptGoogleCalenderList$ctl00$GoogleCalenderList" value="grpGoogleCalenderList"></span>
</td>
<td colspan="3">
<input type="hidden" name="ctl00$Content$rptGoogleCalenderList$ctl00$hfCalenderId" id="Content_rptGoogleCalenderList_hfCalenderId_0" value="omiai468mpv3ghgojvsgqnsiak#group.calendar.google.com">
my ct calender</td>
</tr>
<tr>
<td style="width: 10px;">
<span class="grpGoogleCalenderList"><input id="Content_rptGoogleCalenderList_radiocalenderList_1" type="radio" name="ctl00$Content$rptGoogleCalenderList$ctl01$GoogleCalenderList" value="grpGoogleCalenderList"></span>
</td>
<td colspan="3">
<input type="hidden" name="ctl00$Content$rptGoogleCalenderList$ctl01$hfCalenderId" id="Content_rptGoogleCalenderList_hfCalenderId_1" value="">
</td>
</tr>
<tr>
<td style="width: 10px;">
<span class="grpGoogleCalenderList"><input id="Content_rptGoogleCalenderList_radiocalenderList_2" type="radio" name="ctl00$Content$rptGoogleCalenderList$ctl02$GoogleCalenderList" value="grpGoogleCalenderList"></span>
</td>
<td colspan="3">
<input type="hidden" name="ctl00$Content$rptGoogleCalenderList$ctl02$hfCalenderId" id="Content_rptGoogleCalenderList_hfCalenderId_2" value="#contacts#group.v.calendar.google.com">
Birthdays</td>
</tr>
<tr>
<td style="width: 10px;">
<span class="grpGoogleCalenderList"><input id="Content_rptGoogleCalenderList_radiocalenderList_3" type="radio" name="ctl00$Content$rptGoogleCalenderList$ctl03$GoogleCalenderList" value="grpGoogleCalenderList"></span>
</td>
<td colspan="3">
<input type="hidden" name="ctl00$Content$rptGoogleCalenderList$ctl03$hfCalenderId" id="Content_rptGoogleCalenderList_hfCalenderId_3" value="en.indian#holiday#group.v.calendar.google.com">
Holidays in India</td>
</tr>
</tbody></table>
Use HTML radio button instead of ASP Radio button:-
<input type="radio" name="GoogleCalenderList" />
Unfortunately, asp radio button don't work inside repeater, so you need to do a work around either at client side or by using HTML control.
Thank you for taking the time to read/answer this.
First thing: my career page has a pre-made contact form that i turned into a job application. I have two layout questions:
1.) How do i get the 'checkbox' buttons to line up a little closer to each other. I tried td colspan="2" which is the case later in the form for 2 buttons (submit/reset 1 which i removed), but to no avail, "No" appears well to the right of "Yes." I'd like to have it relatively closer to "Yes."
2.) When you pull the drop down for "Experience" down, it forces the image below the form. Once you select your option, the image goes back to its place. Do i absolutely have to absolute position the graphic? Or can i add an overflow maybe to the dropdown? I can't figure it out.
FancyForm is the form i'm using.
Here is the HTML:
<form id="contact-form" name="contact-form" method="post" action="submit.php">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="15%"><label for="name">Name</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="address">Address</label></td>
<td width="70%"><input type="text" class="validate[required,custom[a-zA-Z\d\s\-\,\#\.\+]+]" name="address" id="address" value="<?=$_SESSION['post']['address']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="telephone">Telephone</label></td>
<td width="70%"><input type="text" class="validate[required,custom[onlyNumber]]" name="telephone" id="telephone" value="<?=$_SESSION['post']['telephone']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="email">Email</label></td>
<td width="70%"><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="citizenship">US Citizen</label></td>
<td width="35%"><input type="checkbox" name="citizen" value="yes">Yes</td>
<td width="35%"><input type="checkbox" name="citizen" value="no">No</td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="age">At Least 18</label></td>
<td width="35%"><input type="checkbox" name="age" value="yes">Yes</td>
<td width="35%"><input type="checkbox" name="age" value="no">No</td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="previousexp">Have you worked<br> with us before?</label></td>
<td width="35%"><input type="checkbox" name="previousexp" value="yes">Yes
<td width="35%"><input type="checkbox" name="previousexp" value="no">No</td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td width="15%"><label for="subject">Experience</label></td>
<td width="70%"><select name="subject" id="subject">
<option value="" selected="selected"> - Choose -</option>
<option value="0-5">0-5 Years</option>
<option value="6-10">6-10 Years</option>
<option value="11-15">11-15 Years</option>
<option value="16-20">16-20 Years</option>
</select></td>
<td width="15%" id="errOffset"> </td>
</tr>
<tr>
<td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
<td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2"><input type="submit" name="button" id="button" value="Submit" />
<?=$str?> <img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
</tr>
</table>
</form>
CSS:
#form-container{
padding:0px;
}
td{
white-space:nowrap;
}
h1{
color:#777777;
font-size:22px;
font-weight:normal;
text-transform:uppercase;
margin-bottom:5px;
}
h2{
font-weight:normal;
font-size:10px;
text-transform:uppercase;
color:#aaaaaa;
margin-bottom:15px;
border-bottom:1px solid #484848;
margin-bottom:15px;
}
label{
text-transform:uppercase;
font-size:10px;
font-family:Tahoma,Arial,Sans-serif;
}
textarea{
color:#404040;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
td > button{
text-indent:8px;
}
Don't specify static percentile widths on the check boxes in question.
Use the:
margin-left:15px;
/* & */
margin-right:15px;
CSS properties on the checkboxes... To do this I would recommend giving the checkboxes a class of:
class="chk-close"
...or something meaningful... then use the class declaration, declared with a '.' (period / full stop) adding the new CSS declaration into your external CSS file.
aka:
.chk-close
{
margin: 0px -15px 0px -15px;
/* Will do all top, right, bottom, left... margin amounts */
}
Please comment on this if you would like any further support!
My requirement is I want to align my radio button to left in table cell, but it is not happening with the below code:
My code
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h3>Action</h3>
<table class="tabledata" width="100%">
<tr>
<td class="td1">
<p>
<input id="Radio1" type="radio" value="Approve" /></p>
</td>
<td class="td2">Approve</td>
</tr>
<tr>
<td>
<input id="Radio2" type="radio" /></td>
<td class="td2">Reject</td>
</tr>
<tr>
<td>
<input id="Radio3" type="radio" />
</td>
<td class="td2">Send Back to Requestor</td>
</tr>
<tr>
<td>Amount Approved for Domestic sector : </td>
<td>
<input id="Text1" type="text" /></td>
</tr>
<tr>
<td>Remarks : </td>
<td>
<input id="Text2" type="text" /></td>
</tr>
<tr>
<td class="tabledata">
<input id="Button1" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
My CSS classes:
.td1 {
vertical-align:middle;
text-align:right;
}
.td2 {
text-align: left;
}
Actually I want to keep my radio button and its corresponding text in a table row by combining 2 columns and centre aligned and also submit button shoud be centre aligned in a table row since I am using jquery mobile datarole I guess it is not happening.Please help me to get the look.
After adding the script in head also I am getting below output:
Remove ui-radio class from each radio button.
$('[type=radio]').each(function () {
$(this).closest('div').removeClass('ui-radio');
});
and add class td1 to each radio button.
<tr>
<td class="td1">
<input id="Radio1" type="radio" value="Approve" />
</td>
<td class="td2">Approve</td>
</tr>
<tr>
<td class="td1">
<input id="Radio2" type="radio" />
</td>
<td class="td2">Reject</td>
</tr>
<tr>
<td class="td1">
<input id="Radio3" type="radio" />
</td>
<td class="td2">Send Back to Requestor</td>
</tr>
Demo
Alternative method: No jQuery code is required nor custom CSS styles. Read more about it here.
Why don't you use styled radio buttons, as in the below demo.
Alternative
new CSS:
tr td:nth-child(1) {
vertical-align:middle;
text-align:right;
}
http://jsfiddle.net/yHbdn/1/
My engine is Aspx.
I am currently having trouble editing one of my columns(Question Answer) in my table because it has html tags in it. Is there a way I can decode only that specific row/column in the value area?
<form id="updateFreqQuestionsUser" action="<%=Url.Action("SaveFreqQuestionsUser","Prod")%>" method="post">
<table>
<tr>
<td colspan="3" class="tableHeader">Freq Questions User Details <input type ="hidden" value="<%=freqQuestionsUser.freqQuestionsUserId%>" name="freqQuestionsUserId"/> </td>
</tr>
<tr>
<td colspan="2" class="label">Question Description:</td>
<td class="content">
<input type="text" maxlength="2000" name="QuestionDescription" value="<%=freqQuestionsUser.questionDescription%>" />
</td>
</tr>
<tr>
<td colspan="2" class="label">QuestionAnswer:</td>
<td class="content">
<input type="text" maxlength="2000" name="QuestionAnswer" value="<%=freqQuestionsUser.questionAnswer%>" />
</td>
</tr>
<tr>
<td colspan="3" class="tableFooter">
<br />
<a id="freqQuestionsUserUpdateButton" href="#" class="regularButton">Save</a>
Cancel
</td>
</tr>
</table>
Yes, you can do this:
<input type="text" maxlength="2000" name="QuestionAnswer"
value="<%=Server.HtmlDecode(freqQuestionsUser.questionAnswer)%>" />
Reference
I have the following table which sits inside an asp.net form. Im trying to process it using an onclick event on a button. but the elements are html text boxes and html check boxes all with names that are arrays
ive tried doing this
for(int i = 0; i < Request["pageimagesOrder"].Length; i++)
{
Response.Write(Request["pageimagesOrder"][i]);
}
but it just fell over. Im sure its something simple but like all things, there only simple if you know
thanks
<table>
<tr>
<td width="200"><img src="/CaptionImages/Thmbs/1.png" width="196" height="140" /></td>
<td width="300" valign="top">caption txt 1</td>
<td width="25" valign="top"><input style="width:20px;" type="text" name="pageimagesOrder[1]" value="1 "></td>
<td width="100" valign="top"><input type="checkbox" value="1" name="pageimagesDelete[]" /></td>
</tr>
<tr>
<td width="200"><img src="/CaptionImages/Thmbs/2.png" width="196" height="140" /></td>
<td width="300" valign="top">caption txt 1</td>
<td width="25" valign="top"><input style="width:20px;" type="text" name="pageimagesOrder[2]" value="2 "></td>
<td width="100" valign="top"><input type="checkbox" value="2" name="pageimagesDelete[]" /></td>
</tr>
<tr>
<td width="200"><img src="/CaptionImages/Thmbs/3.png" width="196" height="140" /></td>
<td width="300" valign="top">caption txt 1</td>
<td width="25" valign="top"><input style="width:20px;" type="text" name="pageimagesOrder[3]" value="3 "></td>
<td width="100" valign="top"><input type="checkbox" value="3" name="pageimagesDelete[]" /></td>
</tr>
<tr>
<td width="200"><img src="/CaptionImages/Thmbs/5.png" width="196" height="140" /></td>
<td width="300" valign="top">caption txt 1</td>
<td width="25" valign="top"><input style="width:20px;" type="text" name="pageimagesOrder[5]" value="4 "></td>
<td width="100" valign="top"><input type="checkbox" value="5" name="pageimagesDelete[]" /></td>
</tr>
<tr>
<td width="200"><img src="/CaptionImages/Thmbs/7.png" width="196" height="140" /></td>
<td width="300" valign="top">caption txt 2</td>
<td width="25" valign="top"><input style="width:20px;" type="text" name="pageimagesOrder[7]" value="5 "></td>
<td width="100" valign="top"><input type="checkbox" value="7" name="pageimagesDelete[]" /></td>
</tr>
</table>
You are actually naming them with the brackets []
If you write
Response.Write(Request["pageimagesOrder[1]"]) in code behind you will get a value.
You'll need to do:
Response.Write(Request["pageimagesOrder[" + i + "]"]);
That'll give you the correct naming :)