How to change onclick attribute of a HTML Label in codebehind - asp.net

ok, i have this:
<div class="radio-toolbar">
<input type="checkbox" id="check1" name="checks" value="1">
<label for="check1">1</label>
<input type="checkbox" id="check2" name="checks" value="2">
<label for="check2">2</label>
<input type="checkbox" id="check3" name="checks" value="3">
<label for="check3">3</label>
</div>
and i'm looking for a way to set the "onclick" attribute of those labels with ASP.NET VB Codebehind, making the labels looks like:
<div class="radio-toolbar">
<input type="checkbox" id="check1" name="checks" value="1">
<label for="check1" onclick="some javascript">1</label>
<input type="checkbox" id="check2" name="checks" value="2">
<label for="check2" onclick="some javascript">2</label>
<input type="checkbox" id="check3" name="checks" value="3">
<label for="check3" onclick="some javascript">3</label>
</div>
so, is that possible?

Use a asp:Label.
<asp:Label ID="lblChk1" runat="server" AssociatedControlID="check1" Text="1">
</asp:Label>
Then in your code behind:
lblChk1.Attributes.Add("onclick","some javascript");
Edit: You could simply use asp:CheckBox and use its Text Property. Clicking the text would then fire the onclick event of your CheckBox.

Set the ID attribute and add runat=server for your labels. Then you can access the labels from your code-behind:
<div class="radio-toolbar">
<input type="checkbox" id="check1" name="checks" value="1">
<label ID="label1" runat="server" for="check1">1</label>
<input type="checkbox" id="check2" name="checks" value="2">
<label ID="label2" runat="server" for="check2">2</label>
<input type="checkbox" id="check3" name="checks" value="3">
<label ID="label2" runat="server" for="check3">3</label>
</div>

Instead of a html label i would use the ASP.NET Label control with AssociatedControlID attribute which is rendered as label for.
<asp:Label ID="Label1"
AssociatedControlID="check1"
onclick="somejavascript"
runat="server"
Text="1"></asp:Label>
You can also add the javascript from codebehind:
Label1.Attributes.Add("onclick","somejavascript");
From MSDN:
...
When the AssociatedControlID property is set, the Label control
renders as an HTML label element, with the for attribute set to the ID
property of the associated control. You can set other attributes of
the label element using the Label properties. For example, you can use
the Text and AccessKey properties to provide the caption and hot key
for an associated control.
`

Related

Submit form that posts to another site

I have an online banking login that I'm trying to take from an old client site and put on their new site. If I copy the form and paste it into my new site, it just reloads the page when submitted. I've tried to change it to an asp.net form using the appropriate and other applicable tags with the same result.
If I take the form and put it in a simple index.html file, it submits and takes me to the correct external site.
I was unable to set the ID & values with the asp.net form and that may be one of the issues.
Any help is appreciated.
Here is the HTML form version that works in .html page that needs to work in .aspx page:
<form action="some external site" method="POST" autocomplete="OFF" target="_top">
<input type="hidden" name="sssid" value="my value">
<input type="hidden" name="iid" value="another value">
<div class="field-container">
<label for="aid" id="aid-label">Access ID</label>
<input name="aid" id="aid" type="text" size="8" onFocus="toggle_label(this, 'focus');" onBlur="toggle_label(this,'blur');" />
</div>
<div class="field-container">
<label for="passcode" id="passcode-label">Passcode</label>
<input name="passcode" id="passcode" type="password" size="8" onFocus="toggle_label(this, 'focus');" onBlur="toggle_label(this,'blur');"/>
</div>
<div class="form-row">
<input type="submit" name="Submit" value="Go" class="button">
</div>
</form>
Here is my asp.net form version that I tried:
<form action="some external site" method="POST" autocomplete="OFF" target="_top">
<input type="hidden" name="sssid" value="some value">
<input type="hidden" name="iid" value="another value">
<asp:TextBox runat="server" ID="sssid" CssClass="form-control" type="hidden" ClientIDMode="Static"></asp:TextBox>
<asp:TextBox runat="server" ID="iid" CssClass="form-control" type="hidden" ClientIDMode="Static"></asp:TextBox>
<div class="form-group">
<asp:Label runat="server" id="lblAccessID"></asp:Label>
<asp:TextBox runat="server" ID="txtAccessID" CssClass="form-control"> </asp:TextBox>
</div>
<div class="form-group">
<asp:Label runat="server" id="lblPassCode"></asp:Label>
<asp:TextBox runat="server" ID="txtPasscode" CssClass="form-control" TextMode="Password"></asp:TextBox>
</div>
<button type="submit" class="btn btn-blue">GO
<img src="/Content/img/icon-sm-arrow.png" alt="" />
</button>
</form>
My asp.net form code behind:
protected void Page_Load(object sender, EventArgs e)
{
txtAccessID.Attributes.Add("placeholder", "Access ID");
txtPasscode.Attributes.Add("placeholder", "Passcode");
}
I had to use the following to post this correctly:
<asp:LinkButton runat="server" ID="btnSubmit" CssClass="btn btn-blue" PostBackUrl="urlhere" Text='GO <img src="/Content/img/icon-sm-arrow.png" alt="" />' />
set PostBackUrl property of Button control => https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.postbackurl(v=vs.110).aspx
the reason webforms always posting it 2 itself may be due to their __doPostBack script.

cant display inline in web forms app with bootstrap

I am customizing the account registration section of a new VS 2013 web application which comes with bootstrap css format. I am trying to build a form on a page and cannot get one section to display inline instead of block. Latest try is below.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlCountry" CssClass="col-md-2 control-label">Country</asp:Label>
<div class="col-md-10">
<asp:DropDownList runat="server" ID="ddlCountry" CssClass="form-control" Width="200" />
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbPostalCode" CssClass="col-md-2 control-label">Postal Code</asp:Label>
<div class="col-md-10-inline">
<asp:TextBox runat="server" ID="tbPostalCode" CssClass="form-control" Width="200" MaxLength="10" Height=" " />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCountry"
CssClass="text-danger" ErrorMessage="The country field is required." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbPostalCode"
CssClass="text-danger" ErrorMessage="The postal code field is required." />
</div>
</div>
</div>
</div>
This is how everything I try to get it to display inline ends up looking like
I want the Postal Code label and text box to display on same line as Country. Normally an easy task but bootstrap clearing getting in the way
what i did to achieve this is wrote each form controls in a separate row. ie,
<form role="form">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter email">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Enter Last Name">
</div>
</div>
</div>
</form>
In the above code, First Name and Last Name elements will be shown in a same line,
I don't know whether its right way or not but it worked for me.
check it here http://ezmotionq.com/registration

Parsing information between pages in ASP

What I want to happen is when the user chooses the amount they want they click on submit. Now that amount will be passed on to the next page.
The problem is I dont understand the code in the handler, does any know a simple bit of code i can get to make this happen?
Sorry but I am not clear with asp and asp.net
Thanks
<form id='sampleform' method='post' action='handler.asp' >
<p>
Name: <input type='text' name='Name' />
</p>
<p>
Email: <input type='text' name='Email' />
</p>
<input type="radio" name="subject" value="ten" /> £10
<input type="radio" name="subject" value="five" /> £5
<input type="radio" name="subject" value="three" /> £3
£<input type='text' name='donate-amount' />
<p>
<input type='submit' name='Submit' value='Submit' />
</p>
</form>
It would help if I could see the code in handler.asp. Try the following as your handler.asp page
<%=Request.Form("Name")%> <br />
<%=Request.Form("Email")%> <br />
<%=Request.Form("subject")%> <br />
<%=Request.Form("donate-amount")%> <br />

How can I get the value(s) of the selected item(s) of CheckBoxList using Jquery?

If I have the following CheckBoxList
<asp:CheckBoxList ID="typeCheckBoxList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0">Student</asp:ListItem>
<asp:ListItem Value="1">Parent</asp:ListItem>
<asp:ListItem Value="2">Educational</asp:ListItem>
<asp:ListItem Value="3">Specialist </asp:ListItem>
<asp:ListItem Value="5">Other</asp:ListItem>
</asp:CheckBoxList>
Using Jquery i want to get the values of the selected items, I use the following code
$('#<%= typeCheckBoxList.ClientID %> input:checked').each(function() {
alert($(this).val());
alert($(this).next('label').text());
});
$(this).val() always returns "on" and I can't return values such as 0 ,1, etc.
Is there any way to do that ?
EDIT : Rendered Markup:
<table id="RegisterationWUC1_typeCheckBoxList" class="listVertical" border="0">
<tr>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_0" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$0" />
<label for="RegisterationWUC1_typeCheckBoxList_0">Student</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_1" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$1" />
<label for="RegisterationWUC1_typeCheckBoxList_1">Parent</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_2" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$2" />
<label for="RegisterationWUC1_typeCheckBoxList_2">Educational</label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_3" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$3" />
<label for="RegisterationWUC1_typeCheckBoxList_3">Specialist </label>
</td>
<td>
<input id="RegisterationWUC1_typeCheckBoxList_4" type="checkbox" name="RegisterationWUC1$typeCheckBoxList$4" />
<label for="RegisterationWUC1_typeCheckBoxList_4">other</label>
</td>
</tr>
</table>
Since ASP.Net 2.0 doesn't render this appropriately (it's intended purpose is to get the values server-side) you can do a bit of hackery. In the code-behind, do something like this:
foreach (ListItem li in typeCheckBoxList.Items)
li.Attributes.Add("data-value", li.Value);
Then your markup will look like this (ignore the shorter names, my test wasn't in another named container, and it doesn't matter one bit for the question at hand):
<table id="typeCheckBoxList">
<tr>
<td>
<span data-value="0">
<input id="typeCheckBoxList_0" type="checkbox" name="H$M$typeCheckBoxList$0" />
<label for="typeCheckBoxList_0">Student</label>
</span>
</td>
<td>
<span data-value="1">
<input id="typeCheckBoxList_1" type="checkbox" name="H$M$typeCheckBoxList$1" />
<label for="typeCheckBoxList_1">Parent</label>
</span>
</td>
<td>
<span data-value="2">
<input id="typeCheckBoxList_2" type="checkbox" name="H$M$typeCheckBoxList$2" />
<label for="typeCheckBoxList_2">Educational</label>
</span>
</td>
<td>
<span data-value="3">
<input id="typeCheckBoxList_3" type="checkbox" name="H$M$typeCheckBoxList$3" />
<label for="typeCheckBoxList_3">Specialist </label>
</span>
</td>
<td>
<span data-value="5">
<input id="typeCheckBoxList_4" type="checkbox" name="H$M$typeCheckBoxList$4" />
<label for="typeCheckBoxList_4">Other</label>
</span>
</td>
</tr>
</table>
Notice that extra <span data-value="valueHere"></span> wrapped around it now? You can just use .closest() or .parent() to get to the <span> and retrieve that value via .attr(), like this:
$('#typeCheckBoxList input:checked').each(function() {
alert($(this).closest('span').attr('data-value'));
alert($(this).next('label').text());
});
Give it a try in a demo here :) If it helps at all. the default rendering mode for ASP.Net 4.0 does render the value in markup, as it should. The reason for the data-thing format on the attribute is to be as valid as possible, these are called data attributes, added to the spec in HTML5, but cause no issues for this in 4.

How to apply groupname to HTML radio buttons in asp.net?

Can anyone please tell about how to apply group name to html (input) radio button controls so that i can select any one of the available radio buttons?
I have input radios in a table. Each row contains two radios as follows. I want to select one from each row. But i am able to select only one radio button amongst all radio buttons present on all rows.
<input name="radiobutton" type="radio" value="radiobutton" />Option1
<input name="radiobutton" type="radio" value="radiobutton" />Option2
What change i have to make to select one radio button on each row?
Thanks,
~kaps
As far as I know, radiobuttons in HTML do not have group names. Their HTML "name" attribute is the group name.
It is important to verify that each radiobutton has a unique "value" attribute. Otherwise there is no way to tell which of the duplicate values was selected:
<input name="radiobutton" type="radio" value="radiobutton1" />Option1
<input name="radiobutton" type="radio" value="radiobutton2" />Option2
This example lets you choose only one radio button per table row. You have to give all radio buttons the same Name= to create a mutually exclusive group of them.
<form>
<table>
<tr><td>
<!-- Can choose only one of these two. -->
<input name="group1" type="radio" value="1a" />Option1
<input name="group1" type="radio" value="1b" />Option2
</td></tr>
<tr><td>
<!-- Can choose only one of these two. -->
<input name="group2" type="radio" value="2a" />Option1
<input name="group2" type="radio" value="2b" />Option2
</td></tr>
</table>
</form>
GroupName to HTML radio buttons in asp.net
https://www.javatpoint.com/asp-net-radiobutton
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Gender"></asp:Label>
</td>
<td>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="gender" Text="Male" />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="gender" Text="Female" />
</td>
</tr>
</table>
</form>
After Rendering from asp.net control tag to html
<form method="post" action="./WebControlsASPX.aspx" id="form1">
<table>
<tr>
<td>
<span id="Label1">Gender</span>
</td>
<td>
<input id="RadioButton1" type="radio" name="gender" value="RadioButton1" /><label for="RadioButton1">Male</label>
<input id="RadioButton2" type="radio" name="gender" value="RadioButton2" /><label for="RadioButton2">Female</label>
</td>
</tr>
</table>
</form>

Resources