I have an array which has objects, comes from server.
And I have to make list with this array.
I want to set default value to each radio button,
but only the last item has default value.
Please see my code.
<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
<div class="radio-box">
<input type="radio" name="send_num" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="send_num" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
</div>
<div class="radio-box">
<input type="radio" name="send_res" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
<input type="radio" name="send_res" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
</div>
<div class="radio-box">
<input type="radio" name="receive" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
<input type="radio" name="receive" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
</div>
</div>
and this is fiddle.
What did I miss?
I've tried to find answer, but I could not find similar with mine.
How to set default value to all items?
Thanks in advance.
All radio buttons share the same three name attribute values. So you've mistakenly put them into groups. This means when you click one radio (setting it to true) the browser automatically sets all other radios to false that are in the same group.
Clicking on the radios will show you this fact. You need to use different name attribute values. Note my use of {{$index}} in the below example:
var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope){
$scope.cartProducts = [
{product_id:1291803},
{product_id:2365123},
{product_id:5463434},
{product_id:8752642},
{product_id:4566484}
];
$scope.initDefValue = function () {
angular.forEach($scope.cartProducts, function (product) {
product.isBasicNum = true;
product.isImmediateSend = true;
product.isDirectEnterNum = true;
product.isRecieveDupable = true;
product.isBasicBanner = true;
});
};
$scope.initDefValue();
});
.item-box {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
<div class="radio-box">
<input type="radio" name="send_num{{$index}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="send_num{{$index}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
</div>
<div class="radio-box">
<input type="radio" name="send_res{{$index}}" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
<input type="radio" name="send_res{{$index}}" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
</div>
<div class="radio-box">
<input type="radio" name="receive{{$index}}" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
<input type="radio" name="receive{{$index}}" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
</div>
</div>
</div>
</div>
There should be different name attributes for each iteration of the product.
For example, instead of just send_num, you can name the radio of the first product to be send_num_1291803, send_num_2365123 for the second product, and so on.
Here is some sample code:
HTML:
<input type="radio" name="{{getSendNumName(product)}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="{{getSendNumName(product)}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
Controller:
$scope.getSendNumName = function(product) {
return 'send_num_' + product.product_id;
}
Your radio button's has the same name when you're performing loop. That's why the last item will be only selected.
Try this code
var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope){
$scope.cartProducts = [
{product_id:1291803},
{product_id:2365123},
{product_id:5463434},
{product_id:8752642},
{product_id:4566484}
];
$scope.initDefValue = function () {
angular.forEach($scope.cartProducts, function (product) {
product.isBasicNum = true;
product.isImmediateSend = true;
product.isDirectEnterNum = true;
product.isRecieveDupable = true;
product.isBasicBanner = true;
});
console.log($scope.cartProducts);
};
$scope.initDefValue();
});
.item-box {
border: 1px solid red;
}
<div ng-app="MyApp">
<div ng-controller="MyController">
<div id="{{product.product_id}}" class="item-box" ng-repeat="product in cartProducts track by $index">
<div class="radio-box">
<input type="radio" name="send_num-{{$index}}" ng-checked="product.isBasicNum" ng-click="product.isBasicNum=true"> NumType A
<input type="radio" name="send_num-{{$index}}" ng-checked="!product.isBasicNum" ng-click="product.isBasicNum=false"> NumType B
</div>
<div class="radio-box">
<input type="radio" name="send_res-{{$index}}" ng-checked="product.isImmediateSend" ng-click="product.isImmediateSend=true"> SendType A
<input type="radio" name="send_res-{{$index}}" ng-checked="!product.isImmediateSend" ng-click="product.isImmediateSend=false"> SendType B
</div>
<div class="radio-box">
<input type="radio" name="receive-{{$index}}" ng-checked="product.isRecieveDupable" ng-click="product.isRecieveDupable=true"> ReceiveType A
<input type="radio" name="receive-{{$index}}" ng-checked="!product.isRecieveDupable" ng-click="product.isRecieveDupable=false"> ReceiveType B
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Related
I have seen that this works for most of users, but for some reason it doesn't for me. I use Google Chrome.
radioBut = document.querySelector(".rad-design")
getColor = function(){
for (i=0; i<radioBut.length; i++){
if (radioBut[i].checked){
console.log(radioBut[i)
}
}
Html
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design"></div>
</label>
</div>
</form>
The selector should be document.querySelectorAll to get inputs as array and you should target to .rad-input class which is the input and not .rad-design which is the label. Also you should use checked for the inputs to make the input checked, its not check. Also you cannot set checked to two inputs with same name. If thats done only the last input with that name will be checked.
Working Fiddle
const radioBut = document.querySelectorAll(".rad-input")
getColor = function () {
for (i = 0; i < radioBut.length; i++) {
if (radioBut[i].checked) {
console.log(radioBut[i])
}
}
}
<form id="rad">
<div class="radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" checked name="colList">
<div class="rad-design">One</div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="colList">
<div class="rad-design">Two</div>
</label>
</div>
<button type="button" onclick="getColor()">getColor</button>
</form>
document.querySelector returns just one element not an array/list, so in the for loop at i<radioBut.length radioBut.length is undefined, you need to use document.querySelectorAll() instead.
Also I noticed you have selected the div and not the input and you have a couple of syntax errors.
Maybe this can help you:
const radioBut = document.querySelectorAll(".rad-input")
const getColor = function(){
for (let i=0; i<radioBut.length; i++){
if (radioBut[i].checked){
console.log(radioBut[i].value)
}
}
}
console.log(getColor())
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" value='A' name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" value='B' name="colList" checked>
<div class="rad-design"></div>
</label>
</div>
</form>
Another options is to use the form element functionality
const form = document.getElementById('rad');
const getColor = function(){
return form.colList.value;
}
console.log(getColor())
<form id = "rad">
<div class = "radioAll">
<label class="rad-label">
<input type="radio" class="rad-input" value='A' name="colList">
<div class="rad-design"></div>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" value='B' name="colList" checked>
<div class="rad-design"></div>
</label>
</div>
</form>
I have a form where users have to answer questions through checkboxes. There are quite few checkboxes and I'm using AngularJS in the form to validate it. A basic validation is that all the required fields are filled.
Below is my example code:
<input type="checkbox" name="skills"> IT
<input type="checkbox" name="skills"> Design
<input type="checkbox" name="skills"> Photoshop
<input type="checkbox" name="skills"> Writing
Now I want the checkboxes to be required so from the "skills" checkboxes the user atleast checks 1 box.
I've tried putting the required tag but it didn't seem to work.
Im using AngularJS to validate my form like so
<button ng-disabled="myForm.$invalid">Submit</button>
Any idea how I can fix this? If you can working fiddle that would great.
If you want to validate using ng-disabled="myForm.$invalid"
var app = angular.module('myModule', []);
app.controller("myController", function ($scope) {
$scope.choices = [{"name":"IT"},{"name":"Design"},{"name":"Technology"}];
$scope.checkBoxArray = [];
$scope.validate = function (value) {
if ($scope.checkBoxArray.indexOf(value) == -1){
$scope.checkBoxArray.push(value);
}
else {
$scope.checkBoxArray.splice($scope.checkBoxArray.indexOf(value), 1);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
<body ng-controller="myController">
<ng-form name="myForm">
<span ng-repeat="choice in choices">
<input type="checkbox" name="skills" ng-required="checkBoxArray.length==0" ng-model="choice.checked" ng-change="validate(choice.name)">
{{choice.name}}
</span>
</ng-form>
<button ng-disabled="myForm.$invalid">Submit</button>
</body>
</html>
Try this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="checkBoxForm">
<input type="checkbox" name="skills" ng-model="IT">IT
<input type="checkbox" name="skills" ng-model="Design">Design
<input type="checkbox" name="skills" ng-model="Photoshop">Photoshop
<input type="checkbox" name="skills" ng-model="Writing">Writing
<button ng-disabled="!IT&&!Design&&!Photoshop&&!Writing">Submit</button>
</form>
</div>
You can use a array to do this:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.collection=[{
"Name": "IT"},
{
"Name": "Design"},
{
"Name": "Photoshop"},
{
"Name": "Writing"}];
$scope.disableButton = true;
$scope.doTheThings = function (item)
{
if (item.checked)
$scope.disableButton = true;
else
$scope.disableButton = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in collection">
<input type="checkbox" name="skills" ng-model="item.checked" ng-click="doTheThings(item)"> {{item.Name}}
</li>
</ul>
<button ng-disabled="disableButton"> Submit </button>
</form>
</div>
My question is how to serialize checkbox value and textbox value together in one array through searilizedarray()...
now i am getting something like this
[{"name":"text_input","value":"kalpit"},
{"name":"wpc_chkbox[]","value":"Option one"},
{"name":"wpc_chkbox[]","value":"Option two"},
{"name":"wpc_chkboxasdf[]","value":"Option one"},
{"name":"wpc_chkboxasdf[]","value":"Option two"},
{"name":"wpc_inline_chkbox[]","value":"1"},
{"name":"wpc_inline_chkbox[]","value":"2"},
{"name":"wpc_inline_chkbox[]","value":"3"},
{"name":"wpc_radios","value":"Option one"}]
but it should be like
[{"name":"text_input","value":"kalpit"},
{"name":"wpc_chkbox[]","value":"[Option one,Option Two]"},
{"name":"wpc_chkboxasdf[]","value":"[Option one,Option Two]"},
{"name":"wpc_inline_chkbox[]","value":"[1,2,3]"},
{"name":"wpc_radios","value":"Option one"}]
i am using var form = $('.wpc_contact').serializeArray(); to get form data
this is my html sample which I am generating dynamically using drag and drop future..
<form method="POST" name="1" class="form-horizontal wpc_contact" novalidate="novalidate">
<fieldset>
<div id="legend" class="">
<legend class="">Demo</legend>
<div id="alert-message" class="alert hidden" style="color: red;"></div>
</div>
<div class="control-group">
<label class="control-label">Checkboxes</label>
<div class="controls" name="wpc_chkbox" req="yes">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</div>
</div>
<div class="control-group">
<div class="controls" name="wpc_inline_chkbox" req="yes">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
</form>
Thanks in advance
Try this:
var cacheObject = {};//tmp cache for form elements name/values pairs
var serArr = $('.wpc_contact').serializeArray();
//set values of elements to cacheObject
$.each(serArr, function (arrayIndex,obj) {
if (cacheObject[obj.name]) {
cacheObject[obj.name].push(obj.value);
} else {
cacheObject[obj.name] = [obj.value];
}
});
//create new serialized array
var newSerArr = [];
$.each(cacheObject, function (key, value) {
var obj = {};
obj[key] = value;
newSerArr.push(obj);
});
console.log(newSerArr);//looks like serializeArray
This one makes a different array and elements of same name are grouped together.
var form_data = $(".wpc_contact").serializeArray();
var form_array = {}; //final array where all the values will be stored
$.each(form_data, function(i, element) {
if(jQuery('input[name="'+element.name+'"]:checked').length>0)
{
replaced = element.name.replace('[]',''); //removing [] from the input name
form_array[replaced]={};
jQuery('input[name="'+element.name+'"]:checked').each(function(j,ind){
form_array[replaced][j] = jQuery(this).val();
});
}
else
{
form_array[element.name] = element.value;
}
});
console.log(form_array);
You can access as:
alert(form_array['wpc_chkbox'][0]); //no '[]' in the key
I am using JQuery Mobile
I want to display the value in another page which i get from local storage
It Should been check which is been checked in page1
In HTML5:-
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain">
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Levels:</legend>
<input type="checkbox" value="One" name="one" id="checkbox-h-2a" class="custom1">
<label for="checkbox-h-2a">One</label>
<input type="checkbox" value="None" name="one" checked="checked" id="checkbox-h-2c" class="custom1">
<label for="checkbox-h-2c">None</label>
</fieldset>
</form>
</div>
<div data-role="fieldcontain">
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Mode:</legend>
<input type="radio" name="Two" id="radio-choice-h-2a" value="On" checked="checked" class="custom2">
<label for="radio-choice-h-2a">On</label>
<input type="radio" name="Two" id="radio-choice-h-2b" value="Off" class="custom2">
<label for="radio-choice-h-2b">Off</label>
</fieldset>
</form>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain">
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Levels:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" class="custom1">
<label for="checkbox-h-2a">One</label>
<input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c" class="custom1">
<label for="checkbox-h-2c">None</label>
</fieldset>
</form>
</div>
<div data-role="fieldcontain">
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Mode:</legend>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" class="custom2">
<label for="radio-choice-h-2a">Steward</label>
<input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" class="custom2">
<label for="radio-choice-h-2b">Guest</label>
</fieldset>
</form>
</div>
</div>
</div>
In Jquery:-
function getRadioCheckedValue(radio_name)
{
var oRadio = $("input[type='radio']");
for(var i = 0; i < oRadio.length; i++)
{
if(oRadio[i].checked)
{
//return oRadio[i].value;
localStorage.setItem("mode", oRadio[i].value);
}
}
return '';
}
function showSelectedNames(){
var count = $("#checkid input:checked").length;
var str = '';
for(i=0;i<count;i++){
if(i == count-1){
str += $("#checkid input:checked")[i].value;
localStorage.setItem("level", str);
}
else{
str += $("#checkid input:checked")[i].value+',';
localStorage.setItem("level", str);
}
}
//alert("You selected----"+str);
}
Now Plz help me out how to set the value in Page 2 which is been checked in Page1
The simplest way is to store values of checkboxes and radio buttons into an array and then save it to localStorage. However, note that localStorage doesn't accept arrays, so you need to JSON.stringify() before saving it into localStorage and then JSON.parse() to convert it back into a readable array.
Here is how you can collect values of all checkboxes and radio buttons, store them and then read them on next page.
$(document).on("pagebeforehide", "[data-role=page]", function () {
// variables
var elements = [],
id = '',
value = '';
// push values of checkboxes and radio buttons into an array
$("[type=checkbox], [type=radio]", this).each(function () {
id = $(this)[0].id;
value = $(this).prop("checked");
elements.push({
"id": id,
"value": value
});
});
// convert array into a string
// in order store it into localStorage
localStorage["values"] = JSON.stringify(elements);
});
$(document).on("pagebeforeshow", "[data-role=page]", function () {
// active page
var active = $.mobile.activePage;
// parse array of checkboxes and radio buttons
var read_array = JSON.parse(localStorage["values"]);
// check/uncheck checkboxes and radio buttons
$.each(read_array, function (e, v) {
var check_id = "#" + v.id,
check_value = v.value;
$(check_id, active).prop("checked", check_value).checkboxradio("refresh");
});
});
Note: elements id should be the same on other pages.
Demo
I have 6 groups of radio buttons with three choices each and a button to the next step. I want that a radio button in each group must be selected before the button to the next step is displayed. The button to the next step is hidden by default. It concerns a wordpress site and the code is provided by a plugin named: quform
The html code (1 group):
<div class="iphorm-group-row iphorm-clearfix iphorm-group-row-1cols"><div class="iphorm-element-wrap iphorm-element-wrap-radio iphorm_14_12-element-wrap iphorm-clearfix iphorm-labels-above iphorm-element-optional" style="display: block;">
<div class="iphorm-element-spacer iphorm-element-spacer-radio iphorm_14_12-element-spacer">
<label class="iphorm_14_12-outer-label">Group1</label>
<div class="iphorm-input-wrap iphorm-input-wrap-radio iphorm_14_12-input-wrap">
<div class="iphorm-input-ul iphorm-input-radio-ul iphorm_14_12-input-radio-ul iphorm-options-block iphorm-clearfix">
<div class="iphorm-input-li iphorm-input-radio-li iphorm_14_12-input-li">
<label class="iphorm_14_12_1_label">
<div class="radio" id="uniform-iphorm_14_12_523933240794b_1"><span><input type="radio" value="Level-1" id="iphorm_14_12_523933240794b_1" name="iphorm_14_12" class="iphorm-element-radio iphorm_14_12 iphorm_14_12_1"></span></div>
Level-1</label>
</div>
<div class="iphorm-input-li iphorm-input-radio-li iphorm_14_12-input-li">
<label class="iphorm_14_12_2_label">
<div class="radio" id="uniform-iphorm_14_12_523933240794b_2"><span><input type="radio" value="Level-2" id="iphorm_14_12_523933240794b_2" name="iphorm_14_12" class="iphorm-element-radio iphorm_14_12 iphorm_14_12_2"></span></div>
Level-2</label>
</div>
<div class="iphorm-input-li iphorm-input-radio-li iphorm_14_12-input-li">
<label class="iphorm_14_12_3_label">
<div class="radio" id="uniform-iphorm_14_12_523933240794b_3"><span><input type="radio" value="Level-3" id="iphorm_14_12_523933240794b_3" name="iphorm_14_12" class="iphorm-element-radio iphorm_14_12 iphorm_14_12_3"></span></div>
Level-3</label>
</div>
</div>
</div>
<div class="iphorm-errors-wrap iphorm-hidden">
</div> </div>
The Javascript code (6 groups):
$(".iphorm_14_12, .iphorm_14_13, .iphorm_14_14, .iphorm_14_15, .iphorm_14_16, .iphorm_14_17").click(function(){
var show = true;
$(".iphorm_14_12, .iphorm_14_13, .iphorm_14_14, .iphorm_14_15, .iphorm_14_16, .iphorm_14_17").each(function () {
if (!$(this).is(':checked')){
show = false;
}
$(".iphorm_14_12_1, .iphorm_14_12_2, .iphorm_14_12_3, .iphorm_14_13_1, .iphorm_14_13_2, .iphorm_14_13_3, .iphorm_14_14_1, .iphorm_14_14_2, .iphorm_14_14_3, .iphorm_14_15_1, .iphorm_14_15_2, .iphorm_14_15_3, .iphorm_14_16_1, .iphorm_14_16_2, .iphorm_14_16_3, .iphorm_14_17_1, .iphorm_14_17_2, .iphorm_14_17_3").each(function () {
if (!$(this).is(':checked')) {
show = false;
}
if (show) {
$('#btn-step-6').show();
} else {
$('#btn-step-6').hide();
}
});
});
});
Wrap each radio groups with a form or a div :
<div id="food">
<input type="radio" name="group1" value="Milk"> Milk
<input type="radio" name="group1" value="Butter"> Butter
<input type="radio" name="group1" value="Cheese"> Cheese
</div>
<div id="pets">
<input type="radio" name="group2" value="Dog"> Dog
<input type="radio" name="group2" value="Cat"> Cat
<input type="radio" name="group2" value="Dolphin"> Dolphin
</div>
Then in jQuery :
if ($('#food input[type=radio]:checked')[0] != undefined && $('#pets input[type=radio]:checked')[0] != undefined) {
$('#btn-step-6').show();
}
Try this:
<select name="top5" size="3">
<option onclick="showNextStep(this)">Checkbox</option>
</select>
in showNextStep(obj):
// The id of the hidden element -> displaly: none
if ($(obj).prop('checked')) {
$("#nextstep").css('display', "block");
} else {
// To hide if unselect
$("#nextstep").css('display', "none");
}
You can try jsfiddle example (http://jsfiddle.net/Lt92r/), I hope this will help.
$(".test input[type=radio]").click(function(){
$(this).parent("div").find(".btn").css("display","block");
});