Inside form I have two radio buttons like
<fieldset data-role="controlgroup">
<legend>
Choose a pet:
</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1"><img src="../static/images/Dog.png" />Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2"><img src="../static/images/Cat.png" />Cat</label>
</fieldset>
(I am using jquery mobile). How to make that those two buttons be horizontal and not vertical ( at the moment dog button is above cat and I need to be in one row ). How to make horizontal ?
try this in fieldset
<fieldset data-role="controlgroup" data-type="horizontal" >
Source http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-radiobuttons.html
form this site verify the section Horizontal radio button sets
Related
Is there option for radio button to be auto selected when visitor enter text in another input form? I have searched for it, but without success.
I have this form with 3 radio buttons, they allow users to choose size, last radio button is for custom size (width and height). Under last radio button there is text input to input custom height and width.
<form action="#" method="post">
<label for="original-size">Original
<input type="radio" id="original_size" name="size" value="original" checked="checked">
</label>
<label for="medium-size">Medium
<input type="radio" id="medium-size" name="size" value="medium">
</label>
<label for="custom-size">Custom
<input type="radio" id="custom-size" name="size" value="custom">
</label>
<input id="custom-width" type="number" name="custom-width" placeholder="Custom width">
<label for="custom-width">custom width</label>
and
<input id="custom-height" type="number" name="custom-height" placeholder="Custom height">
<label for="custom-height">custom height</label>
<br>
<button name="submit" type="submit">Submit</button>
</form>
How to select custom-size radio input if user click on custom-width or custom-height text input? Is there option without java script, if not, small code of java script would be fine (I am not using jQuery)?
Managed to dig up this, is this what you are looking for?
<form>
<p>Original: <input type="text"></p>
<p>Medium: <input type="text"></p>
<div id="customWrapper">
<p>Custom: <input type="radio" id="customSize"></p>
<p>Custom Width: <input type="text"></p>
<p>Custom Height: <input type="text"> </p>
</div>
</form>
const div = document.getElementById('customWrapper');
// When the custom width or custom height are clicked on
div.addEventListener('focus', (event) => {
document.getElementById('customSize').checked = true;
}, true);
// When clicked somewhere out of the form
div.addEventListener('blur', (event) => {
document.getElementById('customSize').checked = false;
}, true);
https://jsfiddle.net/mLvt9ubz/
It basically searches for any input inside the div, when it's event changes then something happens.
In this case the radio button with an ID get's the attribute selected.
.Like for two checkboxes there is true or false but what should I do for 3 checkoxes ?to display parts of form according to the checkbox selection.
You can make use of multiple values (by setting distinct values in the value="…" argument, and update the conditions in the ng-show="…" argument accordingly, for example:
<input type="radio" name="test" ng-model="modelname" value="1">1</input>
<input type="radio" name="test" ng-model="modelname" value="2">2</input>
<input type="radio" name="test" ng-model="modelname" value="3">3</input>
<div ng-show="modelname=='1'">form1</div>
<div ng-show="modelname=='2'">form2</div>
<div ng-show="modelname=='3'">form3</div>
Set value from the input checkbox using "value=", and change the conditions in the ng-if="…" argument accordingly, as shown below:
<input type="radio" ng-model="variable" value=1>your content</input>
<input type="radio" ng-model="variable" value=2>your content</input>
<input type="radio" ng-model="variable" value=3>your content</input>
<div ng-if="variable==1">your form</div>
<div ng-if="variable==2">your form</div>
<div ng-if="variable==3">your form</div>
Im trying to make tabs with showing options. like:
showing options
Show for all
Hide for all
Show for specific
Hide for specific
these are the tabs and also these are radio select buttons
(looks like radio button but on check switchs to it's tab content)
And every tab content has it's own checkbox select list (except "show for all" and "Hide for all")
But, on showing option change inner content of all other tabs needs to be unchecked
Foundation 6, Jquery, CSS
The aim of this question is to use it a form, so you can select item showing options, and according to your select there will be available items for showing.
FORM.HTML
<div class="row">
<div class="medium-12 columns">
<ul class="clear-list">
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="all" checked>
Show on all pages
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="none">
Don't show on any page
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="selected">
Show only on selected
</label>
</li>
<li>
<label class="select-label">
<input name="module_show_option" type="radio" value="except">
Show on all except selected
</label>
</li>
</ul>
<script>
$(document).ready(function () {
$("input[name=module_show_option]:radio").click(function () { // attack a click event on all radio buttons with name 'radiogroup'
if ($(this).val() == 'all') {
$("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
} else if ($(this).val() == 'none') {
$("input[name=module_menu_item_id]:checkbox").attr("disabled", "disabled");
} else if ($(this).val() == 'selected') { //check which radio button is clicked
$("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
} else if ($(this).val() == 'except') { //check which radio button is clicked
$("input[name=module_menu_item_id]:checkbox").removeAttr("disabled");
}
});
});
</script>
</div>
</div>
<div class="row">
<div class="medium-12 columns">
<label>
<input type="checkbox" name="module_menu_item_id" value="1">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="2">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="3">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="4">
</label>
<label>
<input type="checkbox" name="module_menu_item_id" value="4">
</label>
</div>
</div>
As you can see I've rejected idea of tabbing content, instead I used disabling input fields, so it will disable checked items from pasting in POST body, and also it will preserve them from losing while you can chenge your decision
I'm working on Angular JS project. It has three radio buttons as follows.
<div class="sys-form__field"
layout="row">
<label class="sys-label sys-label--radio" flex flex-gt-xs="33">Choices</label>
<input type="radio"
ng-model="booking.model.foodType"
value="vegetarian"
class="sys-input sys-input__radio"
title="" />
<md-button ng-click="booking.setRadio('foodType', 'vegetarian')">Vegetarian</md-button>
<input type="radio"
ng-model="booking.model.foodType"
value="vegan"
class="sys-input sys-input__radio"
title="" />
<md-button ng-click="booking.setRadio('foodType', 'vegan')">Vegan</md-button>
<input type="radio"
ng-model="booking.model.foodType"
value="nonvegetarian"
class="sys-input sys-input__radio"
title="" />
<md-button ng-click="booking.setRadio('foodType', 'nonvegetarian')">Non Vege</md-button>
</div>
These are the food choices and based on what user selects I want to show another radio button sets. This radio buttons html as follows
<div class="sys-form__field" ng-show="booking.foodSizeChoice()"
layout="row">
<input type="radio"
ng-model="booking.model.foodSize"
value="small"
title="" > Small
<input type="radio"
ng-model="booking.model.foodSize"
value="medium"
title="" > Medium
<input type="radio"
ng-model="booking.model.foodSize"
value="large"
title="" > Large
If user selects vegetarian , I only want to show small radio button. If user selects Non vegetarian I need to show only small and medium buttons. like wise how do I that?
At the moment I try like this
this.foodTypeChoice=()=> {
const check2 = ()=>this.model.binType == 'small';
return check2(); }
But it shows all the radio buttons. Please help
Can you try something like this?
<input type="radio"
ng-model="booking.model.foodSize"
value="small"
title=""
ng-show="booking.model.foodType == 'vegetarian'"> Small
<input type="radio"
ng-model="booking.model.foodSize"
value="medium"
title=""
ng-show="booking.model.foodType == 'nonvegetarian'"> Medium
<input type="radio"
ng-model="booking.model.foodSize"
value="large"
title=""
ng-show="booking.model.foodType == 'nonvegetarian'"> Large
First of all, you should avoid putting functions in show/hide/if directives, it slows the application; you should use logical statements or boolean variables. You can use show/hide statements directly on inputs
<input
ng-show="booking.model.foodType === 'vegetarian' || booking.model.foodType === 'nonvegetarian'"
type="radio"
ng-model="booking.model.foodSize"
value="small"
title=""> Small
<input
ng-show="booking.model.foodType === 'nonvegetarian'"
type="radio"
ng-model="booking.model.foodSize"
value="medium"
title=""> Medium
<input
type="radio"
ng-model="booking.model.foodSize"
value="large"
title=""> Large
Apart from that you can use additional variables to store statements in them and update them whenever user clicks on buttons to change food type
I am looking for a font picker tool to use in my web project which should allow users to choose any of the fonts listed. I have created a small code with radio button, which actually works:
<label style="font-family: Courier;">
<input type="radio" name="font" value="Courier" />Courier</label>
<label style="font-family: Verdana;">
<input type="radio" name="font" value="Verdana" />Verdana</label>
<label style="font-family: Arial;">
<input type="radio" name="font" value="Arial" />Arial</label>
<label style="font-family: Papyrus;">
<input type="radio" name="font" value="Papyrus" />Papyrus</label>
<label style="font-family: Monotype Corsiva;">
<input type="radio" name="font" value="Monotype Corsiva" />Monotype Corsiva</label>
I need to categorise these fonts before displaying. This can be done by using two main radio buttons "font1" and "font2". When the user checks the "font1" radio button some fonts should be displayed and when user checks "font1" radio button some other fonts should be displayed. Is there a way to do this?
OR
Alternative solution for this could be creating fonts database similar to flametext and cooltext.com. Is there any way to design this type of font picker tool?
I have used your code but still its not working it will just create groups but does not hide "subradio" button all the radio button are displyed in a table ,thats it.... but its not hiding.. i guess the function is not working...
Show font group 1 Show font group 2
<fieldset class="groups" id="fonts_group_1" style="dispaly:none">
<label style="font-family: Courier;">
<input type="radio" name="font" value="Courier" />Courier</label>
<label style="font-family: Verdana;">
<input type="radio" name="font" value="Verdana" />Verdana</label>
</fieldset>
<fieldset class="groups" id="fonts_group_2" style="dispaly:none">
<label style="font-family: Arial;">
<input type="radio" name="font" value="Arial" />Arial</label>
<label style="font-family: Papyrus;">
<input type="radio" name="font" value="Papyrus" />Papyrus</label>
</fieldset>
<script type="text/javascript">
$(function() {
$('a#fonts_group_1b').click(function() {
$('.groups').hide();
$('#fonts_group_1').show();
}
$('a#fonts_group_2b').click(function() {
$('.groups').hide();
$('#fonts_group_2').show();
}
});
</script>
One of these should lead you down the right path.
http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors
http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
How about something like this? You can refactor the HTML to use radio buttons if you would rather.
http://www.fullfatcode.com/2011/04/10/jquery-font-selector-version-2/
Here is a demo of it.
http://www.fullfatcode.com/examples/jqfontselector/
Try to group radio buttons into fieldsets:
<fieldset id="fonts_group_1" style="dispaly:none">
//your radiobuttons
</fieldset>
<fieldset id="fonts_group_2" style="dispaly:none">
//your radiobuttons
</fieldset>
And you can use $('#fonts_group_1').show(); in proper jquery script (for example in case when other radiobutton is checked).
--edit:
Here is complete code for you:
HTML:
Show font group 1 Show font group 2
<fieldset class="groups" id="fonts_group_1" style="dispaly:none">
<label style="font-family: Courier;">
<input type="radio" name="font" value="Courier"/>Courier</label>
<label style="font-family: Verdana;">
<input type="radio" name="font" value="Verdana"/>Verdana</label>
</fieldset>
<fieldset class="groups" id="fonts_group_2" style="dispaly:none">
<label style="font-family: Arial;">
<input type="radio" name="font" value="Arial"/>Arial</label>
<label style="font-family: Papyrus;">
<input type="radio" name="font" value="Papyrus"/>Papyrus</label>
</fieldset>
Script:
$(function() {
$('a#fonts_group_1b').click(function() {
$('.groups').hide();
$('#fonts_group_1').show();
});
$('a#fonts_group_2b').click(function() {
$('.groups').hide();
$('#fonts_group_2').show();
});
});