Please help, I have the following code
<div>
<input type="checkbox" id="chk1" ng-model="Status" />
<span ng-bind="Title"></span>
</div>
<div id="div1" ng-show="Status">
<span ng-bind="SpanTitle" ></span>
<input type="text" id="txtLastName"
ng-model="LastName"
ng-click="LastNameClick()"
ng-blur="LastNameOut()"
name="txtLastName" />
</div>
and when checkbox is being checked the div1 is shown but the input text cannot be clicked or written.
Any idea please?
Edit: Added controller from user's comment
function DController($scope) {
var defaultInputText = "hello";
$scope.Title = "check";
$scope.SpanTitle = "Span";
$scope.Status = false;
$scope.LastName = defaultInputText;
$scope.LastNameClick = function () {
if ($scope.LastName ==defaultInputText) {
$scope.LastName = "";
}
}
$scope.LastNameOut = function () {
if ($scope.LastName.length == 0) {
$scope.LastName = defaultInputText;
}
}
}
From code, that you have provided, I can suggest, that problem can be in css. May be some elements overlap the input.
Related
Here is what I'm trying to do.
I have the ability to create a form when there is an option to create one in Javascript.
Here is an option to add an address:
<i class="fas fa-plus-circle"></i> <span class="newUrlText">add new address
Here is the form in question:
<input type="text" class="form-control" id="new-address-1-%ID%" name="new-address-1-%ID%" placeholder="Address Line 1">
<input type="text" class="form-control" id="new-address-2-%ID%" name="new-address-2-%ID%"
placeholder="Address Line 2">
<label for="message" class="control-label"><span class="billable-text"><?php _e('Primary Address'); ?></span></label>
<label class="switch" for="primary-%ID%" style="margin-left: 10px;top: 10px;">
<input type="checkbox" class="primary-%ID%" name="primary-%ID%" id="primary-%ID%" />
<div class="slider round gray"></div>
</label>
Here is the javascript that generates the form:
<script language="javascript">
var newAddressIndex = 1;
var addressarray = [];
function addNewAddress() {
var container = getElement("addressContainer");
addressarray.push(newAddressIndex);
var htmlAddress = '<?php echo addslashes(App_String::stripBreaksTabsMultipleWhitespace($newAddress)); ?>';
htmlAddress = htmlAddress.replace(/%ID%/g, newAddressIndex);
var node = document.createElement("div");
node.innerHTML = htmlAddress;
container.appendChild(node);
$('#newAddressCount_'+newAssetIndex).val(newAssetIndex);
++newAddressIndex;
test(addressarray);
}
What I'm trying to do is the following:
If the user selects the checkbox and then decides to select the next checkbox, I would like to change the previous checkbox from selected to no selected.
How would I go about doing that?
Thank you
I found a solution:
What I did was, that I created a function to get the current value of the checkboxes like this:
getAddrValue(addressarray);
Then within the function the follwoing:
function getAddrValue (addressarray) {
$('#primary-'+index).change(function() {
var checked = this.checked ? 1 : 0;
prevCheckbox = index-1;
if (checked == 1) {
if (document.getElementById('primary-'+prevCheckbox) !== null ) {
let inputs = document.getElementById('primary-'+prevCheckbox);
inputs.checked = false;
}
}
});
}
I am creating a website that has a list of user inputs, however at a certain stage I want users to see a summarized page of all their inputs. If the input was not chosen it should not show as part of the summary (as in the script example below).
Here is my problem: there will be multiple user inputs and to write a JS script to achieve what I had done in an example script below will be lots of work and unfeasible. Is there a way the two JS scripts for the individual ID's can be combined into one as in the script below?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<label>For the first test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>
</div>
<div>
<label>For the second test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>
</div>
<button id="myBtn">Test</button>
<div style="color:blue;">
<p id="result1"></p>
</div>
<div style="color:red">
<p id="result2"></p>
</div>
<script>
function getUserName() {
var test1 = document.getElementById('test1').value;
var result1 = document.getElementById('result1');
if (test1.length > 0) {
result1.textContent = 'Test1: ' + test1;
} else {
null;
}
}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);
</script>
<script>
function getUserName() {
var test2 = document.getElementById('test2').value;
var result2 = document.getElementById('result2');
if (test2.length > 0) {
result2.textContent = 'Test2: ' + test2;
} else {
null;
}
}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);
</script>
</body>
</html>
P.s. I would also like to know if a user were to press the test button with an input, remove the input and press the test button again, that the first input would be removed?
You can get all inputs and loop throw the result and create an dom element which will contain the value of the input
and each created element will be added to lets say a result element
See code snippet
function getUserName() {
var inputList = document.getElementsByTagName("INPUT");
var res = document.getElementById("result");
res.innerHTML = "";
var indx = 1;
for (i = 0; i < inputList.length; i++) {
if (inputList[i].value != "") {
var ele = document.createElement("p");
ele.innerHTML ="test " + indx + " : " + inputList[i].value
res.appendChild(ele);
indx++;
}
}
}
var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', getUserName, false);
<div>
<label>For the first test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test1" required>
</div>
<div>
<label>For the second test</label>
<input type="text" placeholder="Enter Number" name="clientinfo" id="test2" required>
</div>
<button id="myBtn">Test</button>
<div id="result">
</div>
i am new to AngularJS, i try and do the code below
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function(){
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last){
if ( $last ) {
$scope.chargableDescription.push([""]);
}
}
});
Basically, what i am trying to achieve here is to insert the whole group of input when user input something on the last chargableDescription field.
<div class="chargable-group" ng-repeat="item in chargableDescription" >
<div class="col-md-3">
<label class="form-control-label" for="l2" id="chargable-label">Chargable Item</label>
</div>
<div class="col-md-9" id="chargable-header">
<textarea name="chargable[]" class="form-control dynamic chargable" placeholder="Chargable Description" ng-model="chargableDescription[$index]" ng-keypress="chargableInput($last)"> </textarea>
<br>
<input type="number" class="form-control" step="0.01" name="chargable-price-1" placeholder="Chargable Price" ng-model="chargablePrice[$index]">
<br>
<input type="number" class="form-control" name="chargable-quantity-1" placeholder="Chargable Quantity" ng-model="chargableQuantity[$index]">
<br>
<input type="number" class="form-control" step="0.01" name="chargable-total-1" placeholder="Chargable Total" readonly ng-model="chargableTotal[$index]" >
</div>
</div>
It does the trick, however, i wonder why when i do any input on the textarea, the cursor will be gone once i input a character.
How to remove this behaviour and what would be the factor that causing this behavior?
UPDATE :
SOLVED
I added ng-model-options = { updateOn : 'blur' } and it seems like it solves the issue
It works for me https://plnkr.co/IV9t4fhln5v3l81NHaPC
What's your Angular version?
(function() {
'use strict';
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function() {
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last) {
if ($last) {
$scope.chargableDescription.push([""]);
}
}
$scope.init();
});
})();
I am very new to angular :). I would like to add a simple event one form element with a particular value, built by ng-repeat. This is how the HTML looks:
<div class="labels">
<div class="checkbox-element" ng-repeat="suggestName in $ctrl.suggests" ng-click="$ctrl.toggleSelection(suggestName, 'suggestsSelection', this)">
<label>
<input type="checkbox" name="suggestsSelection[]"
class="hidden"
value="{{suggestName}}"
><span></span>{{suggestName}}
</label>
</div>
<div class="optionary hidden">
<br>
<div class="question__text">Any other?</div>
<label><input type="text"
ng-model="$ctrl.survey.suggest_other"
name="suggests_other1"></label><br>
</div>
</div>
And the controller code:
vm.survey = {};
vm.suggests = ['quality', 'price', 'habbit', 'other'];
// selected
vm.survey.suggestsSelection = [];
// toggle selection for a given names
vm.toggleSelection = function toggleSelection(value, array, scope) {
var idx = vm.survey[array].indexOf(value);
// is currently selected
if (idx > -1) {
vm.survey[array].splice(idx, 1);
}
// is newly selected
else {
vm.survey[array].push(value);
}
};
What I need is to create an event that would toggle the class "hidden" from the div with class "optionary" after clicking on the last created checkbox ("other" in this case). Clicking on other checkboxes shouldn't affect the "optionary" div.
I tried with some configurations like:
if(scope.$last){
$(scope).closest('.optionary').toggleClass('hidden');
}
or similar. I don;t know what should be the way to approach the topic.
You need to use ng-show and a control variable. Take a look.
jsFiddle here: https://jsfiddle.net/U3pVM/24834/
<div ng-app class="labels" ng-controller="MyCtrl">
<div class="checkbox-element" ng-repeat="suggestName in suggests" ng-click="toggleSelection(suggestName, suggestsSelection, this)">
<label>
<input type="checkbox" ng-model="cbSuggest[$index]" name="suggestsSelection[]" class="hidden" value="{{suggestName}}">
<span>{{suggestName}}</span>
</label>
</div>
<div class="optionary hidden" ng-show="showOther">
<br>
<div class="question__text">Any other?</div>
<label><input type="text" ng-model="survey.suggest_other" name="suggests_other1"></label><br>
</div>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.survey = {};
$scope.suggests = ['quality', 'price', 'habbit', 'other'];
$scope.cbSuggest = [];
$scope.showOther = true;
// selected
$scope.survey.suggestsSelection = [];
// toggle selection for a given names
$scope.toggleSelection = function(value, array, scope) {
var showOther = true;
angular.forEach($scope.cbSuggest, function(k,v){
if(k) {
showOther = false;
}
});
$scope.showOther = showOther;
};
}
As you can see ng-repeat has special properties: https://docs.angularjs.org/api/ng/directive/ngRepeat
The one you're interested in is $last. You could add ng-change to your checkboxes, call a function with the paramter $last, and that function would set a scope variable. The hidden class could rely on that.
Something like this:
<input type="checkbox" name="suggestsSelection[]"
class="hidden"
ng-change="showHidden($last)"
value="{{suggestName}}">
And in your controller:
$scope.hidden = true;
$scope.showHidden = function(isLast) {
if (isLast) $scope.hidden = false;
else $scope.hidden = true;
}
And then you add ng-class to your div:
<div class="optionary" ng-class="{'hidden': hidden}">...</div>
I am trying to run the following function:
var getFavorite = function(){
var favCheck = document.querySelector("#fav");
var status;
if(favCheck.checked){
status = "Yes!";
}else{
status = "No";
}
return status;
};
The html form contains the following:
<form action="#" id="flavorForm">
<ul id="errors"></ul>
<div data-role="fieldcontain">
<label for="drug">Flavor: </label>
<input type="text" name="flavor" id="flavor" class="required" />
</div>
<div data-role="fieldcontain">
<label for="favorite">Favorite?</label>
<input type="checkbox" id="favorite" value="Yes" class="checkbox" />
</div>
<div data-role="fieldcontain">
<label for="notes">Notes: </label>
<textarea name="notes" id="notes"></textarea>
</div>
<input type="submit" value="Save Flavor" id="submitFlavor" data-theme="b" />
</form>
And the values for favCheck should come from the second ... block of the form. But I'm getting a 'TypeError: favCheck is null' whenever I input a value on the form, whether I check the checkbox or not. I am using jQuery to retrieve the values. Any suggestions are appreciated. Thanks.
You misspelled the id name. Please use #favorite instead of #fav
Try this,
var getFavorite = function(){
var favCheck = document.querySelector("#favorite");
var status;
if(favCheck.checked){
status = "Yes!";
}else{
status = "No";
}
return status;
};
DEMO
HTML
<input type="checkbox" id="checkme" checked="checked" />
jQuery
$('#checkme').change(function () {
var checkbox = $('#checkme').prop('checked');
if (checkbox) {
alert('checkbox is checked');
} else {
alert('checkbox is not checked');
}
});
http://jsfiddle.net/rjE8P/
Since you're using an ID rather than a class
favcheck = document.getElementById('fav');
Also, you need to actually use that ID fav rather than favorite as it is now.
$('#favorite').change(function(){
var status;
if($(this).is(':checked')) {
status = 'Yes';
}
else{
status = "No";
}
alert(status);
});