I am newbie to angular JS. I had created a simple form with select, checkbox and radio button. I am not clear how the values are binding for these fields in angular. How can i minimize my HTML code and specify the value inside my controller. i want the result of each value to be added and displayed as total when i click on calculate button. My form is as follows.
HTML
<body ng-app="myApp">
<div class="container" ng-controller="totalController">
<form class="form-horizontal" role="form" ng-submit="calculate()">
<div class="form-group">
<label for="sel1">Select Model:</label>
<select class="form-control" id="sel1">
<option value="40000">Moto turbo</option>
<option value="20000">Moto X</option>
<option value="10000">Moto G</option>
<option value="5000">Moto E</option>
</select>
</div>
<div class="form-group">
<label for="color" class="color">Select Color:</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="400">
Black </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="300">
Red </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="300">
White </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="200">
Yellow </label>
<label class="radio-inline">
<input type="radio" name="optradio" value="250">
Blue </label>
</div>
<div class="form-group">
<label for="sel1">Select Panel:</label>
<label class="checkbox-inline">
<input type="checkbox" value="200">
Set of 1 Panel</label>
<label class="checkbox-inline">
<input type="checkbox" value="400">
Set of 2 Panel</label>
<label class="checkbox-inline">
<input type="checkbox" value="600">
Set of 3 Panel</label>
</div>
<button type="submit" class="btn btn-primary">Calculate</button>
<div role="alert" class="alert alert-success" ng-show="showTotal"> Total is : </div>
</form>
</div>
<!--container-->
</body>
Controller
var myApp = angular.module('myApp',[]);
myApp.controller('totalController',["$scope",function($scope){
$scope.showTotal = false;
$scope.calculate = (function(){
$scope.showTotal = true;
});
}]);
My aim is to understand the value binding for select, checkbox and radio button.
For the dropdown part, try this code
<div ng-controller="MyController" >
<form>
<select ng-model="myForm.car"
ng-options="obj.id as obj.name for obj in myForm.options">
</select>
</form>
<div>
{{myForm.car}}
</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myForm = {};
$scope.myForm.car = "nissan";
$scope.myForm.options = [
{ id : "nissan", name: "Nissan" }
,{ id : "toyota", name: "Toyota" }
,{ id : "fiat" , name: "Fiat" }
];
} );
</script>
Here is a specific way to do it:
http://plnkr.co/edit/WHmg6hShcfUF4FK1ajDk?p=preview
Generally, in order to access the form elements in your controller, you need to use ng-model. I would recommend looking at the docs here: https://docs.angularjs.org/api/ng/input
Related
There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later
i want to make table with label and value pair, suppose i have something like this <label>i can </label> and value like this <input type="text" value="why not" /> my desired result
{"i can" : " why not "}
here is my sample element with code snippet
var result = [];
$('div label').each(function(){
var $this = $(this);
var label = $this.text();
//console.log(label);
value = $this.siblings().attr('value');
//console.log(value);
result.push({label:label,value:value});
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number : </label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea" class="fb-textarea-label" >Comments : </label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select" class="fb-select-label">Select Your Locality: </label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option><option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery: </label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item : </label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label><br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label><br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label><br>
</div>
</div>
</form>
Please note for check group i want all the checked value with single label and all its associated checked values.
and for select i want single selected value how it can be done?
please help me thanks in advance!!!
However as per OP statement, You need to create a object then set it property
var obj = {};
obj[label] = value;
result.push(obj);
var result = [];
$('div label').each(function() {
var $this = $(this);
var label = $this.text();
value = $this.siblings().attr('value');
var obj = {};
obj[label] = value;
result.push(obj);
});
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option>
<option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
<br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label>
<br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label>
<br>
</div>
</div>
</form>
I would recommend you to use .serializeArray()
Encode a set of form elements as an array of names and values.
console.log($("form").serializeArray());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
<div class="form-group">
<label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
<input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>
<div class="form-group">
<label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
<textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
very bad service
</textarea>
</div>
<div class="form-group">
<label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
<select type="select" class="form-control" name="locality" id="locality">
<option value="vrpura">V.R Pura</option>
<option selected="true" value="bel">B.E.L</option>
<option value="jala">Jalahalli</option>
</select>
</div>
<div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
<input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
<label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
</div>
<div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
<label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
<div class="checkbox-group">
<input value="jamoon" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-0" checked="">
<label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
<br>
<input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" checked="">
<label for="checkbox-group-1483332396337-preview-1">samosa</label>
<br>
<input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" checked="">
<label for="checkbox-group-1483332396337-preview-2">beedi</label>
<br>
</div>
</div>
</form>
You can loop in label and inputs the way you doing or as said by Satpal you can use map and serializeArray too
Now if you dont use serializeArray then you have to check what type of input label has then only you can get the selected text or values
For Eg:
If next is checkbox then following checks has to be done to get value,
if($(this).next().is(":checkbox")){
$.each($(this).siblings(":checked"), function(){
alert($(this).val());
// get all checked values
});
}
You can go through this to know more. So better to go with serializeArray
sir, i have a form input like input text and radio button.
how to get the value of selected radio button, and put that value to the input type text.
heres jsfiddle, https://jsfiddle.net/czw71dfk/2/
<div id="gender" class="form-inline">
<div class="form-group">
<label for="">I Sign up as</label>
<input #id="place" type="text" class="form-control" readonly/>
<div class="radio-inline">
<label class="label_item" for="radioMale">
<input type="radio" class="radio_item" value="male" name="gender" id="radioMale">
</label>
<p class="text-center colorGrey">Male</p>
</div>
<div class="radio-inline">
<label class="label_item" for="radioFemale">
<input type="radio" class="radio_item" value="female" name="gender" id="radioFemale">
</label>
<p class="text-center colorGrey">Female</p>
</div>
<div class="radio-inline">
<label class="label_item" for="radioKids">
<input type="radio" class="radio_item" value="Kids" name="gender" id="radioKids">
</label>
<p class="text-center colorGrey">Kids</p>
</div>
</div>
</div>
$('#gender input').on('change', function() {
var gender = $( this ).val();
$("#place").val( gender );
});
HTML problem #id="place",
And must be using on change;
$(document).ready(function(){
$('input[name=gender]').on('change', function() {
var gender = $( this ).val();
$("#place").val( gender );
});
});
JSFiddle.net Example
Change #id="place" To id="place" https://jsfiddle.net/czw71dfk/4/
<input #id="place" type="text" class="form-control" readonly/>
To
<input id="place" type="text" class="form-control" readonly/>
I have multiple fields with same id in HTML form and I want to hide them if the value of a particular field is 1 but it only hides the first field of that id all other fields are not hidden
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Days of week</label>
<div class="col-md-9">
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="monday">Monday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="tuesday">Tuesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="wednesday">Wednesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="thursday">Thursday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="friday">Friday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="saturday">Saturday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="sunday"> Sunday
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Time</label>
<div class="col-md-3">
<select id="g" name="nod" class="form-control">
<?php
for($i=1;$i<=12;$i++){
echo"<option value='$i'>$i AM</option>";
}
for($i=1;$i<=12;$i++){
echo "<option value='12+$i'>$i PM</option>";
}?>
</select>
</div>
</div>
All the elements have the same id="g".Below is the javascript code
<script type="text/javascript">
var ele=document.getElementById("st").value;
if(ele==1)
document.getElementById("g").style.visibility = "hidden";
//else
//document.getElementById("g").style.visibility = "none";
</script>
But only the first element(ie the text days of week) gets hidden all others are shown.How do I hide all the others
ID should be unique in html fields,but you can have same name attribute/classname. you have to loop through the array of elements extracted using classname or name attribute.
in your case use name attribute
function hideGender(){
var ele=document.getElementById("st").value;
if(ele==1){
var elements=document.getElementsByName("gender");
for(var i=0;i<elements.length;i++)
elements[i].style.visibility = "hidden";
}
}
IDs should be unique within the document.
Change id="g" to class="g".
<label for="example-checkbox1">
<input type="checkbox" class="g" name="gender" value="saturday"> Saturday
</label>
<script type="text/javascript">
Array.filter(
document.getElementsByClassName('g'),
function(elem){
elem.style.visibility = 'hidden';
});
</script>
To select multiple fields with same id you will have to use -
$('[id="yourFieldId"]');
So in your case -
var ele=document.getElementById("st").value;
if(ele==1)
$('[id="yourFieldId"]').hide();
how to get checkbox value in array format like [{abc:[1,2,3]}]
now i am getting like [{abc[]:1,abc[]:2,abc[]:3}]...
for getting serializedarray i am using var form = $('.wpc_contact').serializeArray();
here this is my html form which is get generating dynamic (i am using drag and drop for creating dynamic form)
<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">
<label class="checkbox">
<input type="checkbox" value="Option one" id="wpc_chkbox_0" name="wpc_chkbox[]" req="yes"> Option one
</label>
<label class="checkbox">
<input type="checkbox" value="Option two" id="wpc_chkbox_1" name="wpc_chkbox[]" req="yes"> Option two
</label>
</div>
<p class="help-blocksp" style="display:none;">wpc_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<label class="control-label">Inline Checkboxes</label>
<div class="controls" name="wpc_inline_chkbox" req="yes">
<label class="checkbox inline">
<input type="checkbox" value="1" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_0" req="yes"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" value="2" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_1" req="yes"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" value="3" name="wpc_inline_chkbox[]" id="wpc_inline_chkbox_2" req="yes"> 3
</label>
</div>
<p class="help-block" style="display:none;">wpc_inline_chkbox</p>
<p class="help-block1" style="display:none;" checked="checked"></p>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
To create an array use this -
var arr = $("input[name='checkboxname[]']:checked").map(function() {
return this.value;
}).get();
Alernate Solution :
<input type="checkbox" class="selector" value="{value}"/> //add as many as you wan't
JS
var checked='';
$('.selector:checked').each(function(){
checked=checked+','+$(this).val();
});
PHP
$ids=explode(',',substr($_GET['param_with_checked_values'],1));