Checked Check Progress - javascript

As you can see above, I have the data I pulled from the database and these are the radio inputs.
Each one has unique database ids and I want to check here with jquery.
For example, if the phone does not select one of the 16GB or 32GB options, I want to give a warning. Since the data coming here comes with a loop, the same thing will enter the loop.
If it is selected, I want to get the values in it.
I would be glad if you could help me.
<form action="" type="POST" onsubmit="return false;">
<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
<H4>GB</H4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3 titles">
<input class="inputs" type="radio" id="1" name="1">
<label class="btn btn-pill" style="display: inline-block;">16 GB</label>
<input class="inputs" type="radio" id="2" name="1">
<label class="btn btn-pill" style="display: inline-block;">32 GB</label>
</div>
</div>
<H4>DİSPLAY</H4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3 titles">
<input class="inputs" type="radio" id="3" name="2">
<label class="btn btn-pill" style="display: inline-block;">durable</label>
<input class="inputs" type="radio" id="4" name="2">
<label class="btn btn-pill" style="display: inline-block;">broken</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success" id="gonder">Gönder</button>
</div>
</div>
</div>
</form>


You can count the checked radios
I must suggest you give them better names and IDs
Note I gave the form an ID and removed the return false from the onsubmit
If you want to submit if ok, then my code will work
If you want to ajax the result, move the
e.preventDefault() to the top of the submit event handler
In this update I run over every title and look in the next div for radios.
You can add other elements to each
https://jsfiddle.net/mplungjan/L7nhjo10/
$(function() {
$("#myTable").on("submit", function(e) {
e.preventDefault(); // comment this to submit when ok
let errors = [],
ids = [];
$(".row h4").each(function() {
let title = $(this).text(),
$container = $(this).closest("div"), // parent
$rads = $container.find("[type=radio]");
if ($rads.length > 0) {
let $chosen = $container.find("[type=radio]:checked");
if ($chosen.length === 0) errors.push(title);
else ids.push($chosen.attr("id"));
}
})
if (errors.length > 0) {
e.preventDefault();
alert("Please choose " + errors.join(", "));
} else console.log(ids);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="myTable" action="" type="POST" onsubmit="if (!window.__cfRLUnblockHandlers) return false; return false;">
<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
<h4>Telefon Hafızası Seçin</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="1" name="1" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="1">16GB</label>
</div>
</div>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="2" name="1" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="2">32GB</label>
</div>
</div>
</div>
<div class="talepler mb-3">
<h4>Ekran Durumu Seçin</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="3" name="2" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="3">Sağlam</label>
</div>
</div>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input style="display: none" class="inputs" type="radio" id="4" name="2" value="1">
<label class="btn btn-pill" style="display: inline-block;" for="4">Kırık</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-success" id="gonder">Gönder</button>
</div>
</div>
</div>
</form>


i will make it simple for you !
add a class to the inputs for exemple : storage or space
preview :
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3 titles">
<input class="inputs storage" type="radio" id="1" name="1">
<label class="btn btn-pill" style="display: inline-block;">16 GB</label>
<input class="inputs storage" type="radio" id="2" name="1">
<label class="btn btn-pill" style="display: inline-block;">32 GB</label>
</div>
</div>
and then by jquery you can detect selected one:
$('.storage').on('change',function(){
let selected = $('.storage:checked');
console.log(selected.val());
})
and for other inputs the same process
add new class to them exemple : phone-status or somthing else
and keep going 😀

Related

Price calculation with javascript for my data in the loop coming from the database

I want the prices of the data coming from my database to be displayed on the screen with Javascript. I wrote a code like this but it only works this way. I may have more than one data from the database. For example, more than one title may come instead of gb or screen. I'm trying to loop for this but I couldn't. Could you help?
const values = {
gb: null,
display: null,
}
function PriceCalculator(label, newPrice) {
values[label] = newPrice;
if(values.gb != null && values.display != null){
var total = values.gb + values.display;
var result = Number(total).toLocaleString("pt-BR",{minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById("money").innerHTML=result;
}
}
<div id="form_step_1">
<div class="container">
<div class="row">
<div class="talepler mb-3">
<h4>GB</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio"
id="features-1"
name="1"
value="features-value-1"
data-money="-300"
data-product-money="2500"
onclick="PriceCalculator('gb', -300)"
>
<label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio"
id="features-2"
name="1"
value="features-value-2"
data-money="-200"
data-product-money="2500"
onclick="PriceCalculator('gb', -200)"
>
<label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio"
id="features-3"
name="1"
value="features-value-3"
data-money="-50"
data-product-money="2500"
onclick="PriceCalculator('gb', -50)"
>
<label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
</div>
</div>
<h4>DISPLAY</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio"
id="features-1"
name="2"
value="features-value-1"
data-money="0"
data-product-money="2500"
onclick="PriceCalculator('display', 2500)"
>
<label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio"
id="features-2"
name="2"
value="features-value-2"
data-money="-1500"
data-product-money="2500"
onclick="PriceCalculator('display', 1500)"
>
<label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
</div>
</div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong> <div style="display: inline-block" id="money">Not calculated</div></div>
</div>
</div>
</div>

So like last time, delegate - I am using jQuery because your previous code used it. I'll add the vanilla one too
window.addEventListener("DOMContentLoaded", () => {
const total = document.getElementById("money");
document.getElementById("form_step_1").addEventListener("input", e => {
let sum = +e.target.closest(".container").dataset.productPrice;
document.querySelectorAll(".row h4").forEach(h4 => {
let title = h4.textContent,
container = h4.closest("div"), // parent
chosen = container.querySelectorAll("[type=radio]:checked");
if (chosen.length !== 0) {
chosen.forEach(rad => {
console.log(title,rad.value,Number(rad.dataset.discount))
sum += Number(rad.dataset.discount)
})
}
total.textContent = sum.toFixed(2);
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
<div class="container" data-product-price="2500">
<div class="row">
<div class="talepler mb-3">
<h4>GB</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-discount="-300">
<label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-discount="-200">
<label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-discount="-50">
<label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
</div>
</div>
</div>
<div class="talepler mb-3">
<h4>DISPLAY</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-discount="0">
<label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-discount="-1500">
<label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
</div>
</div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong>
<div style="display: inline-block" id="money">Not calculated</div>
</div>
</div>
</div>
</div>
jQuery
$(function() {
$("#form_step_1").on("input", function(e) {
let sum = +$(e.target).closest("div.container").data("price");
console.log(sum)
$(".row h4").each(function() {
let title = $(this).text(),
$container = $(this).closest("div"), // parent
$chosen = $container.find("[type=radio]:checked");
if ($chosen.length !== 0) {
$chosen.each(function() {
console.log(title,$(this).val(),Number($(this).data("discount")));
sum += Number($(this).data("discount"));
})
}
$("#money").text(sum.toFixed(2))
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
<div class="container" data-price="2500">
<div class="row">
<div class="talepler mb-3">
<h4>GB</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-discount="-300">
<label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-discount="-200">
<label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-discount="-50">
<label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label>
</div>
</div>
</div>
<div class="talepler mb-3">
<h4>DISPLAY</h4>
<div class="row mb-3" style="display: inline-block">
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-discount="0">
<label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label>
</div>
<div class="col-sm-3 col-md-4 col-lg-3">
<input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-discount="-1500">
<label class="btn btn-pill" style="display: inline-block;" for="features-2">Broken</label>
</div>
</div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong>
<div style="display: inline-block" id="money">Not calculated</div>
</div>
</div>
</div>
</div>

If you have an object like this (which can dynamically change in size / key values)
const values = {
gb: 100,
display: 400,
test: -1200,
best: 500
}
then the total of all values can be calculated dynamically like this:
const total = Object.values(values).reduce((x,y)=>x=+y,0)
For the purpose of understanding, this can be broken down and console.logged like this
const numbers = Object.values(values);
console.log(numbers) // returns [100,400,-1200,500]
const total = numbers.reduce((x,y)=>x=+y,0) // returns total = -200

validation of input element before cloning

I have group of input elements in my form. The user have to add rows to insert multiple values for different date transaction. Now before adding another row, I have to validate the date field and amount field.
My form:
<div id="content_add" class="d-none">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2 ">From Location</div>
<div class="col-md-1 ">From Date</div>
<div class="col-md-2 ">To Location</div>
<div class="col-md-1 ">To Date</div>
<div class="col-md-1 ">Expenses</div>
<div class="col-md-1 ">
<i class="fa fa-plus"></i> add
</div>
</div>
<div id="content_show">
<div class="row i_bike_servicing">
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[from_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[from_date][]">
</div>
<div class="col-md-2 ">
<input type="text" class="form-control" name="bike_servicing[to_place][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[to_date][]">
</div>
<div class="col-md-1 ">
<input type="text" class="form-control" name="bike_servicing[expenses][]">
</div>
</div>
</div>
<script>
$('#add_servicing').click(function (e) {
e.preventDefault();
let html_clone = $('#content_add').html();
$('#content_show').append(html_clone);
});
</script>
When the user presses the add button, I have to check for the added row, whether from date is smaller than to date or not and expenses should be always be less than 2500 for each row. How can I do this?

How to copy full form on click add button(+ plus)

I am trying to copy full form on click add button,
copying only label name.
below JS code: below is js code trying to add form dynamically.
how to add same form below last div onclick '+' button.
using js code below, only adding panel, but it's not working.
document.getElementById('add').onclick = duplicate;
var i = 0;
var original = document.getElementById('add-form');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "add-form" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div class="row mt-4">
<div class="row">
<div class="col-md-3 text-center mt-3 ml-3">
<button type="button" class="btn btn-light" id="add"><i class="fas fa-plus fa-xs"></i></button>
</div>
<div class="col-md-3 text-center mt-3 ml-4">
<button type="button" class="btn btn-light" id="minus"><i class="ri-delete-bin-line mr-0"></i></button>
</div>
</div>
<div class="col-md mt-1" id="add-form" style="width: 100%;">
<button class="accordion btn btn-primary">Product screen</button>
<div class="panel">
<div class="col-sm-12">
<div class="card mt-3">
<div class="col-md-12">
<!-- first row -->
<div class="row" style="margin-top: 9px;">
<div class="col-sm">
<label for="fname">product_name
</label>
<input type="text" id="fname" class="form-control" placeholder="product_name">
</div>
<div class="col-sm">
<label for="fname">price
</label>
<input type="text" id="fname" class="form-control" placeholder="price">
</div>
<div class="col-sm">
<label for="fname">pur_id
</label>
<input type="text" id="fname" class="form-control" placeholder="pur_id">
</div>
<div class="col-sm">
<label for="field2">type
</label>
<select name="field2" id="field2" class="selectpicker form-control" data-style="py-0" width="50">
<option selected>select one</option>
<option>type1</option>
<option>type2</option>
<option>type3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
after click add button displayed only this panel.

Cannot read property 'value' of null in contrast checker

The only thing that I changed in my code was that I changed the IDs e.g. previewContrast to preview_contrast and I get a Property value null error.
The error shows for the line "var color = colorObjekt.value.replace("#", "");
I would be grateful if someone could find the error in this code.
var textColorContrast = getColor('txtColor');
var bgColorContrast = getColor('bgColor');
var lumi1 = getLumi(textColorContrast);
var lumi2 = getLumi(bgColorContrast);
if (lumi1 !== false && lumi2 !== false) {
txtColor.style.color = '#'+textColorContrast;
bgColor.style.backgroundColor = '#'+bgColorContrast;
var ratio = (Math.max(lumi1, lumi2) + 0.05) / (Math.min(lumi1, lumi2) + 0.05);
contrastText.innerHTML = (Math.round(ratio * 100) / 100) + ':1';
}
function getColor(location) {
var colorObjekt = document.getElementById(location);
var color = colorObjekt.value.replace("#", "");
return color;
}`
Here is the html
<div class="tab-content container-fluid" id="navi_content" role="main">
<div class="tab-pane fade show active" id="post" role="tabpanel" aria-labelledby="post-tab">
<div class="row" role="row">
<h2 role="heading" class="col-10">Input</h2>
<div class="col-2" role="gridcell">
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-info" role="button"
data-toggle="popover" title="Info" data-trigger="focus"
data-content="On this page you can enter a text to display on the LED Scroll Board. You can also change the background and text color as well as the speed and brightness settings in the Settings modal. By selecting the Date or Clock Mode you can post the current date or time on to the board"
data-placement="bottom"></button>
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-cogs" role="button" data-toggle="modal"
title="Settings" data-target="#settings"></button>
</div>
</div>
<form class="text__form" id="form">
<div class="form-row" role="row">
<div class="form-group col-10" role="gridcell">
<label class="text__label" for="text__input" id="input_label">
Your message:
</label>
<input type="text" class="form-control text__input-text" id="text_input"
placeholder="Text input here... :)" role="textbox" aria-required="true" aria-labelledby="input_abel" required>
<p class="text__counter">150 characters left...</p>
</div>
<div class="col-2 text__colorpicker" role="gridcell">
<div class="form-group" role="gridcell">
<label class="text__label" for="text_color" id="text_color_label">Text Color</label>
<input class="text__input-color" type="color" name="textcolor" id="text_color" value="#ff0000"
aria-labelledby="text_color_label">
</div>
</div>
</div>
<div class="card" role="none">
<div class="card-body" role="group">
<h3 class="card-header" role="heading">Modes</h3>
<fieldset class="form-check" id="color_radios">
<legend class="col-form-label text__card-label" id="modes_legend">
Color Modes
</legend>
<div class="row" role="row">
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode"
id="rainbow_mode" value="1" role="radio" aria-labelledby="rainbow_label">
<label for="rainbow_mode" class="form-check-label text__card-label" id="rainbow_label">Rainbow
Mode</label>
</div>
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode" id="solid_mode"
value="0" role="radio" aria-labelledby="solid_mode_label" aria-checked="true" checked>
<label for="solid_mode" class="form-check-label text__card-label" id="solid_mode_label">Solid
Mode</label>
<div class="form-group" role="form">
<label for="bg_color" id="bg_color_label" aria-label="Background Color"> Color</label>
<input type="color" name="bgColor" id="bg_color" value="#ABCDEF" aria-labelledby="bg_color_label">
</div>
</div>
</div>
</fieldset>

How to push values into array using radio buttons in angularjs

I am trying to push values to an array whenever i check the radio button. How can I accomplish this?
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Have you taken any admission tests? (eg. IELTS, GRE, etc)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,admission)" ng-class="{'active':vm.studentObj.test_taken === 'Y'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,'test_taken','N')" ng-class="{'active':vm.studentObj.test_taken === 'N'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="N"> No
</label>
</div>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Educational Info (High School/ Secondary/ Primary/ Pre School)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,Educational)" ng-class="{'active':vm.studentObj.test_taken === 'Y'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,'test_taken','N')" ng-class="{'active':vm.studentObj.test_taken === 'N'}">
<input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="N"> No
</label>
</div>
</div>
</div>
</div>
My function
$rootScope.checkMultiSelect = function (data, key) {
if (!data) {
data = [];
}
var idx = data.indexOf(key);
if (idx > -1) {
data.splice(idx, 1);
} else {
data.push(key);
}
};

You don't need to manually push data to get an object representing the form. The data-binding in Angular does this for you.
<form ng-form="studentForm">
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Have you taken any admission tests? (eg. IELTS, GRE, etc)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.test_taken === 'Y'}">
<input type="radio" name="test_taken" ng-model="studentObj.test_taken" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.test_taken === 'N'}">
<input type="radio" name="test_taken" ng-model="studentObj.test_taken" value="N"> No
</label>
</div>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-sm-12" >
<div class="form-group col-xs-12 nopadding" >
<label class="control-label" for="mobile">Educational Info (High School/ Secondary/ Primary/ Pre School)</label>
<div class="btn-group col-xs-12 nopadding" data-toggle="buttons">
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.edu_info === 'Y'}">
<input type="radio" name="test_taken" ng-model="studentObj.edu_info" value="Y"> Yes
</label>
<label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.edu_info === 'N'}">
<input type="radio" name="test_taken" ng-model="studentObj.edu_info" value="N"> No
</label>
</div>
</div>
</div>
</div>
</form>
Say someone fills out the form with the first radio as yes and the second as no. The output of studentObj will be
{
test_taken: 'Y',
edu_info: 'N'
}
This is the beauty of Angular. You don't need to manually push values, the data-binding does all of this for you and you don't need to clutter up your controller with unnecessary code.

Categories

Resources