How to hide a div when input radio radio selected javascript angularjs - javascript

I want to hide a div when a radio button is selected.
<div class="col-md-3">
<input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
<input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
<div class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
</div>
<div class="col-md-3">
<button class="btn btn-default" ng-click="getReservationDetails('lg', packageSlot)"> Book Now </button>
</div>
In my code, if a radio button is selected, I want the div class = product-noselected-message to be hidden.
This is wht i have on my javascript at the moment
$scope.getReservationDetails = function(size, packageSlot) {
var service_option;
if($('input[name=service_option]:checked')) {
service_option = $('input[name=service_option]:checked').val();
}
if (service_option!= null) {
$rootScope.date = new Date();
console.log($rootScope.date);
$rootScope.singlePackageSlot = packageSlot;
$rootScope.locationName = $scope.cleaningServiceLocation.name;
modalInstance = $modal.open({
templateUrl: 'views/cleaning_services/register_event.html',
controller: 'CleaningServicesCancelCtrl',
size: size
});
}
else {
$('.product-noselected-message').html('Please select an option');
}
$('#service_option').on('checked', function() {
$('.product-noselected-message').addClass('hidden');
});
But it is not working wht do i do?
http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq

Just adding class="hidden" to an HTML element does nothing at all, you need to accompany it with some CSS like
.hidden
{
display: none; /* This will act like the element doesn't exist */
}
or
.hidden
{
visibility: hidden; /* The element will be 100% transparent, but still take up space */
}
depending on your exact goals.

add NG-IF on div, and check for "service_option" not null
add ng-if="!service_option" on 'product-noselected-message' div, you dont need css class to hide and show div in angularJS, make use of NG-IF or NG-SHOW or NG-HIDE
<div class="col-md-3">
<input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option">Adhoc <br/>
<input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option">Weekly
<div ng-if="!service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
</div>

Just like BeingDev said, ng-if/ng-show/ng-hide is the angular way of doing..
Below is a plunker link in which you can check the output
http://plnkr.co/edit/GVYuI47TKlAVqkVDUDOq?p=preview
<div ng-hide="service_option" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>

Many ways to go here, some better depending in your full code but I'll go with what you requested, exactly.
That's a job for ng-class, which will assign a class name if a condition is evaluated as true:
<div ng-class="{'hidden' : service_option != '' && other_option }" ...
What you need to know is that the class name in single quotes above, will be assigned to the div (or any element) if the condition on the right evaluates to true. In this case, an value selected in the radios will stop service_option from being an empty string. Could be whatever you might need, ofcourse.
var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope) {
$scope.service_option = "";
})
.hidden {display:none;}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div class="col-md-3" ng-controller="mycontroller">
<input type="radio" name="service_option" ng-model="service_option" value="adhoc" id="service_option" />
Adhoc
<br />
<input type="radio" name="service_option" ng-model="service_option" value="weekly" id="service_option" />
Weekly
<div ng-class="{'hidden' : service_option != '' }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
<p>Value Selected : {{service_option}}</p>
</div>
</body>
</html>
EDIT
According to your latest comment below, you need to assign a class after evaluating two things. So:
<div ng-class="{'hidden' : service_option != '' || other_option }" class="product-noselected-message" style="font-size: 10px; color: red">Please choose an option</div>
this would do it. Here is a plunker link so that it dont gets confused with the code above:
http://plnkr.co/edit/pYpKwagYmYTxURM1aJft?p=preview

Related

Bootstrap tags input copy paste value not showing entire value

When the User pastes any value in the tag it's not showing the entire text it shows just the last few words, if typed it works fine.
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h1>Bootstrap Tags Input</h1>
</div>
<div class="form-group">
<label for="city_tag">Please write a tag</label>
<input type="text" value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara" data-role="tagsinput" class="form-control" />
</div>
</div>
Codepen
Any Suggestions will be helpful
When user pastes any content to add a tag want to show case entire value instead of the last few characters.
The Bootstrap Tags Input creates an input text element inside the container with a size that gets changed while typing text but not when text gets pasted. That's why when you paste text longer than its current size, it will get "cropped" with the caret laying on the last position.
To show the whole text you'd need to change the input element size like the library already does while typing text. If you add a css rule like input{border: solid 1px;} you'll see what I'm talking about.
I made this demo bringing in your code from codepen and adding a js part that will add a paste event listener on document ready that will change the size of the text input also when text gets pasted.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.bootstrap-tagsinput input').
addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
const size = event.target.value.length + paste.length;
event.target.setAttribute('size', size);
});
});
body {
background: #fafafa;
padding: 10px;
}
h1 {
margin-top: 0;
}
/*
input{
border: solid 1px !important;
}
*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<body>
<div class="col-md-8 col-md-offset-2">
<div class="text-center">
<h1>Bootstrap Tags Input</h1>
</div>
<div class="form-group">
<label for="city_tag">Please write a tag</label>
<input
type="text"
value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara"
data-role="tagsinput"
class="form-control" />
</div>
</div>
</body>

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

angularjs show div if clicked inside a input field and hide if clicked outside

I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide.
Here is my attempt:
JSFIDDLE LINK
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
<div class="details" ng-class="{ 'hidden': ! showHelp }">
<p>
The help text here!
</p>
</div>
</div>
</div>
the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field.
Please help me with this.
Use ng-focus instead of ng-click
Plunker Example
<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>
below code should help you.
<style>
.hidden{
-webkit-transition: width 2s; transition: width 2s;
display:none !important;;
}
.details{
display:block;
}
</style>
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">
<div class="details" ng-class="{'hidden':!showHelp}">
<p>
The help text here!
</p>
</div>
</div>
</div>

toggle angular css class

I am trying an toggle the class 'not-compatible':false to 'not-compatible':true using angularjs:
<div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
<label class="title">Radius</label>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
<div id="myDiv" class="status-bar" ng-class="{'not-compatible':false,'in-progress':false} ">
<label class="number-spolier">1000<span>m</span> </label>
<span><span></span></span>
</div>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
</div>
when the img(either first or second) is clicked to change the class to true of the div "myDiv".
Any idea?
It should be like,
In HTML:
<div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
<label class="title">Radius</label>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
<div id="myDiv" class="status-bar" ng-class="{'not-compatible':isCompatible,'in-progress':false} ">
<label class="number-spolier">1000<span>m</span> </label>
<span><span></span></span>
</div>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
</div>
In controller:
$scope.isCompatible = false;
$scope.myFunctionDown = function(){
$scope.isCompatible = true;
//$scope.isCompatible = !$scope.isCompatible; //Or toggle like this
}
You should set flag on your scope indicating if image has been clicked. You can add this line of code to myFunctionUp and myFunctionDown functions to set scope variable indicating that img has been clicked:
$scope.imgClicked = true;
and then just use this variable in ng-class like that:
ng-class="{'not-compatible': imgClicked}"
You can simply use a scope variable instead of false in your expression
{'not-compatible':false,'in-progress':false}
See https://plnkr.co/edit/ekIrDxH9DswG3UJzRiVT?p=preview
Try this example might help, actually you need to use the variable instead of directly setting true/false in ng-class
https://scotch.io/tutorials/the-many-ways-to-use-ngclass
http://codepen.io/sevilayha/pen/qlLED
ng-class should not have "false", but should have the name of the model's variable. For example, if MyFunctionDown() sets "classStatus = 'Fred'" then you could have something like ng-class="{'not-fred':classStatus !== 'Fred', 'is-fred':classStatus === 'Fred'}"

get the id starting with

I have a datepicker in a div with class pickergroup, I have 3 datepicker in my page, and this is why I use a group and different names
<div class="pickergroup">
<input type="text" name="day1" id="day1"/> /
<input type="text" name="month1" id="month1"/> /
<input type="text" name="year1" id="year1"/>
<input type="hidden" id="date1" name="date1"/>
<div id="datepicker1" name="calendar"></div>
</div>
In my jquery I want to detect when clicking the id wich starts with "datepicker", I guess something like:
$(document).on('click', '.pickergroup id^="datepicker"', function() {
$(".pickergroup").find('[id^="datepicker"]').datepicker({
//my datepicker code
});
});
but this is not correct.
how can I do it?
The problem is how you're selecting the element inside of the event handler.
$(".pickergroup").find('[id^="datepicker"]')
means "find all elements with the class of pickergroup. Find all of their children which have an ID starting with datepicker." Instead, you want to use this and fix your selector from
.pickergroup id^="datepicker"
to
.pickergroup [id^="datepicker"]
$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
var $this = $(this); // The div that was clicked
console.log($this.text());
});
.pickergroup div {
float: left;
margin-right: 1em;
width: 200px;
height: 200px;
background: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
<div id="datepicker1">A</div>
</div>
<div class="pickergroup">
<div id="datepicker2">B</div>
</div>
<div class="pickergroup">
<div id="datepicker3">C</div>
</div>
<div class="pickergroup">
<div id="can-t-click-me">D</div>
</div>
First of all, the datepicker element needs to be an input. And remember, ID's are unique. If you using starts with selector, it is ok. But please dont get confusing with this.
Second, why need seperate fields? You could use one datepicker, decide the format you want to display and you could also parse the returned value from the datepicker in the format you need/want. Please have a look at the documentation.

Categories

Resources