I use an theme, which can provide my an beautiful UI
The code is sort of dirty, because I need to specify each input an unique id,
Is there any alternative way ?
I wrote it in Haml
%input.ace{id: "radio_field_1", name: "radio_field[]", type: "radio", value: "1"}/
%label.lbl{for: "radio_field_1"}
radio option 1
%input.ace{id: "radio_field_2",name: "radio_field[]", type: "radio", value: "2"}/
%label.lbl{for: "radio_field_2"} radio option 2
%input.ace{id: "radio_field_3",name: "radio_field[]", type: "radio", value: "3"}/
%label.lbl{for: "radio_field_3"} radio option 3
The HTML output
<input class="ace" id="radio_field_1" name="radio_field[]" type="radio" value="1">
<label class="lbl" for="radio_field_1">
radio option 1
</label>
You should be using a rails form helper, not pure HTML, to create your form:
- form_tag "/some_path" do
- 3..times do |i|
= radio_button_tag 'radio_field', i, id: "radio_field_#{i}"
= label_tag 'radio_field, 'radio button #{i}'
This should work - will help further if it doesn't
Related
I created a function that will transliterate text to different language. I have a button that works great:
<input onclick="translateAll()" type="button" class="button" value="Transliterate">
I'm trying to place that button on MarkitUp editor. I created a button:
{name: 'Translit', className: "translit", onclick:'translateAll()'},
But it doesn't work. Any idea how to call a function or if it even possible?
{name: 'Translit', className: "translit", replaceWith: translateAll},
I have a boolean variable and if it is true I want to set some checkboxes to disabled
I was able to make my input text boxes readonly by using this inside my HTML for the text box:
readonly ="<%# myIsReadOnly %>"
But checkboxes don't have that. So wanted to make them disabled if that variable is true.
How do I do that? I am also on VB language.
The example of CheckBox I have is something like this:
<input type = checkbox" name="blah" id="blah"/>
You can manually stick in server-side code to render both attribute and value.
<input type="checkbox" <%= myIsReadOnly ? "disabled='disabled'" : "" %> />
I'm trying to improve my website by making it more accessible and compliant with WCAG 2.0 (Level AA) guidelines. It's a Wordpress site that uses Contact Form 7 to create forms. By default, Contact Form 7 doesn't add a label to its input elements. It's easy enough to manually add a label complete with a for attribute to input of type "text":
<label for="address">Street Address*</label><br />
[text* Address1 id:address]
However, I'm having trouble doing this for radio buttons. I know that there's an option to "use_label_element" when generating a radio button tag with Contact Form 7, however this just generates an empty label tag -- it doesn't include the for attribute. Here's the code that I've tried:
[radio RelativesWork use_label_element "Yes" "No"]
That shortcode generates the following HTML. Note that the ID I added with the shortcode is put on the wrapper span, and that the each label does not contain the for attribute.
<span class="wpcf7-form-control-wrap RelativesWork">
<span class="wpcf7-form-control wpcf7-radio" id="relatives">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="RelativesWork" value="Yes" />
<span class="wpcf7-list-item-label">Yes</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="RelativesWork" value="No" />
<span class="wpcf7-list-item-label">No</span>
</label>
</span>
</span>
</span>
I learned that there's a supplemental plugin called "Contact Form 7: Accessible Defaults", so I installed and tried that. However, as far as I can tell, that doesn't address radio buttons at all.
Can anyone help me figure out how to add a label that contains the for attribute to each radio button I create with Contact Form 7.
Thanks!
Jenn
No, this is not possible with CF7 plugin as is, as it has several shortcomings such as this when it comes to customising the front-end form.
To achieve this, there are 2 options, hack the form using javascript once it is loaded to add an id attribute to the input field and a for attribute to the label element. See this answer to see how it is done,
<label> My radio button
[radio amount id:amount class:amount-select default:1 "50" "100" "200" "500" "Other"]</label>
[submit]
<script>
(function( $ ) {
$(document).ready( function(){
$('form.wpcf7-form input').each(function(){
var span = $(this).parent('span');
if(span){
var idAttr = span.attr('id');
$(this).attr('id',idAttr);
span.attr('id','');
}
//or you could also do this which is even less maintenance
var name = $(this).attr('name');
var type = $(this).attr('type');
switch(type){
case 'radio':
case 'checkbox':
name += '-'+$(this).attr('value');
}
$(this).attr('id',name);
});
});
})( jQuery );
</script>
Or you can use version 4.11 of the Smart Grid-layout extension for CF7 plugin (currently v4.10 is available, but the next version will be out in a week, a beta version can be downloaded from the repo) which will introduce a dynamic_checkbox field that is properly formatted, although if you are looking for simple yes/no radio fields, then the first solution is simpler.
I'm making some functional tests with symfony2. I want to select a radio button in a basic form :
<form method="post" action="mylink">
<input id="position_51" type="radio" name="user_position" value="51">
<input id="position_52" type="radio" name="user_position" value="52">
<input id="position_54" type="radio" name="user_position" value="54">
<input id="position_57" type="radio" name="user_position" value="57">
<button id="bt_submit" type="submit">Submit</button>
</form>
So I select the form
$buttonFrom = $client->getCrawler()->selectButton('bt_submit');
$form = $buttonFrom->form();
Now, if I want to select radio with a specific ID, like "position_54" and tick it. How to do? In all examples I found, tick() seem to be used in the name attribute of the input... That not help me in a radio button case.
$form['user_position'] doesn't seem to be a array...
Thanks
As said in the symfony doc about testing, you can select an option or a radio this way :
$form['user_position']->select('51');
Here is the API for the ChoiceFormField.
Let me explain myself i'm doing an Application in VB.net asp.net and I Want to put a CheckBox List instead of Radio Button cause my customer want it square and not round. The Only problem i got is when i check a Checkbox the other one are not unchecked. I'm not sure im clear enough feel free to ask me question.
As seen above, this isn't recommended. However if you have to do it, here's how I made it in jQuery:
Create your checkboxes and assign them classes
<input type="checkbox" class="cbr"/>CB 1
<input type="checkbox" class="cbr"/>CB 2
<input type="checkbox" class="cbr"/>CB 3
<input type="checkbox" class="cbr"/>CB 4
<input type="checkbox" class="cbr"/>CB 5
And the jQuery
$(".cbr").click(function() {
$(".cbr").prop("checked", false);
this.checked = true;
});
Here's a demo: http://jsfiddle.net/g2YMs/
Also, if you're creating the checkboxes with ASP.NET controls, you should select them using:
$("#<%=IdOfControl.ClientID%>")
This is, of course, if you decide to go the jQuery way.