I have the following markup:
<div class="control-group">
<label class="control-label" for="rdbActive">Active</label>
<div class="controls">
<label class="radio inline" for="rdbActive0">
<input name="rdbActive" id="rdbActive0" value="Yes" checked="checked" type="radio">Yes
</label>
<label class="radio inline" for="rdbActive1">
<input name="rdbActive" id="rdbActive1" value="No" type="radio">No
</label>
</div>
</div>
How do I make this runat=server?
For text input all I do is:
<div class="control-group">
<label class="control-label" for="txtDescription">Description</label>
<div class="controls">
<input id="txtDescription" runat="server" name="txtDescription" placeholder="" class="input-large" type="text">
</div>
</div>
..and I'm able to access it from code behind. If I add it to any radio button I get a 500 server error.
You may create radio button with runat="server" as:
<asp:RadioButton id="RadioButton1" AutoPostBack="True|False" Checked="True|False" GroupName="GroupName" Text="label" TextAlign="Right|Left" OnCheckedChanged="OnCheckedChangedMethod" runat="server" />
Where OnCheckedChangedMethod is the code-behind method which is invoked when the radio button is checked.
See this reference on MSDN website.
Related
I have this html which i want to target with css. The problem is that i can't find the right css selector.
The problem is that . entry-content doesn't work. Neither does.event-manager-form. The form itself is a Wordpress event manager form and want to style in with, amongst others,, border-radius
<div class="entry-content">
<form action="/post-an-event/" method="post" id="submit-event-form" class="event-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field
account-sign-in">
You are currently signed in as <strong>Bla bla</strong>. <a c class="button" href="...">Sign out</a>.
</div>
</fieldset>
<!-- Event
Information Fields -->
<h2 class="section-title">Event Details</h2>
<fieldset class="fieldset-event_title">
<label for="event_title">Event Title<span class="require-field">*.
</span></label>
<div class="field required-field">
<input type="text" class="input-text event_title" name="event_title" id="event_title" placeholder="Event title" attribute="" value="" maxlength="" required />
</div>
</fieldset>
<fieldset class="fieldset- event_online">
<label for="event_online">Online Event<span class="require-
field">*</span></label>
<div class="field
required-field">
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="yes" /> Yes</label>
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="no" /> No</label>
I need to align two textfields in the same row, but one on the left and the other in the page center. I'm trying this:
<div class="pure-g margin-1-0">
<div class="pure-u-1-4">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
But I see the left one correctly but the other remains next to the first and not at the center.
Any suggestion?
To align elements inside the container use text-align css rule. Struts2 tags use themes to generate additional content in the forms. So it could break the initial design.
<div class="pure-g margin-1-0">
<div class="pure-u-1-4" style="text-align:center">
<label for="tipologia">
<fmt:message key="label.table.lavorazioni.spese.tipologia"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="tipologia" />
</div>
<div class="pure-u-1-4" style="text-align:center">
<label for="valore">
<fmt:message key="label.table.lavorazioni.spese.valore"/>
</label>
<input type="text" class="pure-u-23-24 required" size="35" name="" id="valore" />
</div>
</div>
JSFiddle
I swear I have done checkboxes a million times but these are giving me trouble. When I check either one, the other one also gets the checked attribute. My guess? Angular is the culprit, but I still need to find a solution because I can't strip Angular out. I'd give you a JFiddle, but like I said, Angular injections and modules, etc...You understand. But I will give you the related code:
This is the HTML:
<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
<label for="inputProject">Project Type <span class="required">*</span></label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
</label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
</label>
</div>
After checking the broweser's dev tools I noticed this
<input ng-model="formData.inputProject" type="checkbox" name="inputProject" id="project" value="" class="ng-pristine ng-untouched ng-valid" tabindex="0" aria-checked="true" aria-invalid="false">
The aria-checked changes to true on all checkboxes when I click on one. Why? and how do I fix this?
Thanks
Because you have the same model set to each checkbox.
You need to have a different model for each, somewhat like this: take note of the ng-model
<div class="form-group col-xs-12 col-sm-12 col-md-3" ng-class="{ 'has-error': quoteform.inputProject.$invalid && submitted }">
<label for="inputProject">Project Type <span class="required">*</span></label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject1" type="checkbox" name="inputProject" id="checkbox1" value="checkbox1"> Lawn Care
</label>
<br />
<label class="checkbox-inline">
<input ng-model="formData.inputProject2" type="checkbox" name="inputProject" id="checkbox2" value="checkbox2"> Home Improvement
</label>
</div>
I have this code:
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input type="radio" ID="mademoiselle" runat="server" >Mademoiselle</input>
<input type="radio" ID="madame" runat="server">Madame</input>
<input type="radio" ID="monsieur" runat="server">Monsieur</input>
</div>
</div>
It's a labale and a list of radio buttons, when i try to check one of this radio button, it still not checked!!
What is the reason of this?
How can i fix my snippet?
Demo Fiddle
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input name="samename" type="radio" id="mademoiselle" runat="server" /><label for="mademoiselle"> Mademoiselle</label>
<input name="samename" type="radio" id="madame" runat="server"/><label for="madame">Madame</label>
<input name="samename" type="radio" id="monsieur" runat="server"/><label for="monsieur">Monsieur</label>
</div>
</div>
You should mention the name attribute for your radio buttons and Don't forget to mention the same name values for all three radio buttons...
I would like to implement something similar to a google search with radio buttons. Depending on the radio button selected, would change the type of search (search,images,video, etc).
Right now I have:
<div id ="searchtext">
<form method="get" id ="searchbox" action="http://www.google.com/search"/>
<input type="text" name="q" size="30" class="searchtext" maxlength="255" value="" />
<input type="image" value="Search" class="searchbutton" src="images/searchbar/searchbutton.png"/>
<br/>
</div>
<div id="radiosearch">
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.youtube.com/results?q=';"/>Youtube
<span class = "class1">
Change Theme
</span>
</div>
However, clicking on the radio boxes is not changing the form action. Any Ideas?
Try
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.youtube.com/results?q=';"/>Youtube