How to dynamically set checked state in radio button in Angular js - javascript

I am working with MEAN Stack and I have a form which is included radio
Button which is submitted successfully Now what I want is to edit the record. I want is that the record radio button should be checked according to database value.
How to do that.
my edit form is:-
<form id = "expensesCreate" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Address</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value ="{{registeruser.address}}" required>
<p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required" >Address is required.</p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Sex</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
Male <input type="radio" ng-model="sex" value="Male" >
FeMale<input type="radio" ng-model="sex" value="Female">
</div>
</div>
</form>
if sex is male of a particular record into database how to checked or selected male radio button.

You can evaluate the sex property to truthy in your view like so:
<td><input type='radio' ng-checked="p.sex=='male'"></td>
<td><input type="radio" ng-checked="p.sex=='female'" ></td>
Hope it helps.

Use ng-value property to set the radio button as checked.
ng-value="true"

<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtr">
<form id="expensesCreate" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Address</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="address" name="address" ng-model="address" type="address" value="{{registeruser.address}}" required>
<p class="error" ng-show=" myForm.password.$touched && myForm.password.$error.required">Address is required.</p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Sex</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
Male
<input type="radio" name="gender" ng-model="sex" value="male"> FeMale
<input type="radio" name="gender" ng-model="sex" value="female">
</div>
</div>
</form>
<script>
angular.module('app', [])
.controller('myCtr', function($scope) {
$scope.sex = 'female'; // Instead of this use database value here
})
</script>
</body>
</html>

Related

Show/Hide the part of the form based on checkbox selected?

I have two checkboxes First and Second
<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" /> First
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" /> Second
And form with three input content, name,phone,address.
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
When the first checkbox is selected - display the first two content - name and phone, Similarly for the second checkbox if selected - display the last content - address
What I have tried:
https://jsfiddle.net/thorstorm1102/16hgpt0z/3/
I tried to hide the whole form:
var form1 = document.querySelector("#f1"),
form2 = document.querySelector("#f2"),
check1 = document.querySelector("#checkbox1"),
check2 = document.querySelector("#checkbox2");
check1.onchange = function() {
form1.classList.toggle("hidden");
}
css
.hidden {
display: none;
}
Any suggestions on how to show only first two content or last content depending on the checkbox selected?
I have added two options first in vanila js and second one is in jquery
/*---- Plain JS----*/
check1.onchange = function() {
if(this.checked){
document.querySelector("#address").closest('.form-group').style.display = "none";
}
else{
document.querySelector("#address").closest('.form-group').style.display = "";
}
}
check2.onchange = function() {
if(this.checked){
document.querySelector("#name").closest('.form-group').style.display = "none";
document.querySelector("#phone").closest('.form-group').style.display = "none";
}
else{
document.querySelector("#name").closest('.form-group').style.display = "";
document.querySelector("#phone").closest('.form-group').style.display = "";
}
}
/*----Jquery----*/
$(document).on('change','#checkbox1',function(){
if($(this).is(":checked")){
$('#address').closest('.form-group').hide();
}
else{
$('#address').closest('.form-group').show();
}
});
$(document).on('change','#checkbox2',function(){
if($(this).is(":checked")){
$('#name').closest('.form-group').hide();
$('#phone').closest('.form-group').hide();
}
else{
$('#name').closest('.form-group').show();
$('#phone').closest('.form-group').show();
}
});
https://jsfiddle.net/1zu0nsjr/
I used JQuery for something similar sometime back.
function firstCheckBox() {
$("#address1").hide();
$("#name1").show();
$("#phone1").show();
}
function secondCheckBox() {
$("#name1").hide();
$("#phone1").hide();
$("#address1").show();
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" onclick="firstCheckBox()" /> First
<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" onclick="secondCheckBox()" /> Second
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6" id="name1">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6" id="phone1">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6" id="address1">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
You can use input type = radio and have the same name for both of you want only 1 to be checked.
Hope this helps.
You need a radio button for this functionality
Radio buttons can only have one option picked at a time, that seems to be what you want you are not going to get the functionality you require with a checkbox, which by it's own design can have multiple options checked at the same time.
So for your HTML you can do the following
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My first website</title>
<link rel="stylesheet" href="css-01/css/styles.css">
</head>
<body>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<form id="f1">
<div class="form-row">
<div class="form-group col-md-6">
<label for="first">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group col-md-6">
<label for="">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" required>
</div>
<div class="form-group col-md-6">
<label for="inputCity">Address</label>
<input type="text" class="form-control" id="address" name="address" required>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="custom.js"></script>
</html>
for your JS you can do the following.
$('#male').click(function() {
$("#name").show();
$("#phone").show();
$("#address").hide();
});
$('#female').click(function() {
$("#name").hide().
$("#phone").hide().
$("#address").show();
});

how can i make key value pair for label and value label : value

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

how to get value from selected radio button

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/>

form validation in JS for checkboxes

I'm trying to do a homework assignment and having some issues. I'm supposed to validate a form with Javascript. Right now I'm trying to make sure that a user has checked at least one checkbox (out of four options) in order for the form to submit. (I've gotten other segments of validation to work, so the issue seems to be local to this part of code.)
This is what the html for the checkbox form looks like:
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
And this is what I've written to try to validate it using Javascript:
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
This isn't working; the form submits whether boxes have been checked or not.
I would really love to get some help here because I don't have any idea what I'm doing wrong. Like I said, the problem seems to exist somewhere in this specific code, because other validation in separate blocks of code does work.
This is the complete HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>

hiding multiple fields in html form

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();

Categories

Resources