i have "<HR>*10/100" value, how to split this value as three parts
like "HR", "*" and "10/100"
html
<input type='text' ng-model='value' ng-change="GetAngValue(value)">
{{Result}}
angular
$scope.GetAngValue = function (value) {
var Matches = value.match(/\<(.*?)\>/);
if (Matches) {
$scope.Result = Matches[1];
}
}
am getting angular brackets values by using this code but how to get remaining
It's long way but it'll do the trick
value.replace("<","").replace(">",",").replace("*","*,").split(",");
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<input type='text' ng-model='value' ng-change="GetAngValue(value)">
{{Result}}
</div>
<script>
angular.module('app',[]).controller('appCtrl',function($scope){
$scope.GetAngValue = function (value) {
var Matches = value.replace("<","").replace(">",",").replace("*","*,").split(",");
if (Matches) {
$scope.Result = Matches;
}
console.log(Matches);
}
})
</script>
Related
I'm trying to make a input sentence case tool but when I type anything different it keeps returning the value="" text.
I'd like to make an exception for pasted or replaced text. So when I type a new value in input it should return that string into sentence case.
Here is the code snippet I've made:
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
//alert( lowerCaseTitle );
function sentencecase() {
$("#essay-title").trigger("change paste");
$("#essay-title").val(sentenceCaseTitle);
}
https://jsfiddle.net/c105vedo/
var title = $("#essay-title").val(); is executed immediately on page visit, so it's always empty and not updated. Move that part inside sentencecase:
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function sentencecase() {
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
$("#essay-title").trigger("change paste");
$("#essay-title").val(sentenceCaseTitle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="essay-title" value="TEST TITLE">
<button type="button" onclick="sentencecase()">OK
</button>
You have to move the following code into your sentencecase function,
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
Problem is that if the above code is outside of the function it will only be executed once, so that is why you keep getting the same value.
Demo
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//alert( lowerCaseTitle );
function sentencecase() {
var title = $("#essay-title").val();
var sentenceCaseTitle = capitalizeFirstLetter(title.toLowerCase());
$("#essay-title").trigger("change paste");
$("#essay-title").val(sentenceCaseTitle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="essay-title" value="TEST TITLE">
<button type="button" onclick="sentencecase()">OK
</button>
I'm a beginner and I'm trying to help some special education students with a very basic budget calculator. I've seen similar questions to mine posted, but when I try those methods something always breaks and I'm having some trouble figuring it out.
Basically I need the onclick portion of the button that calls the function into action to actually respond to the enter key and not a click :-( Thank you very much in advance for any help that might be provided!!
<script>
function addTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var sum = Number(number1) + number2;
document.getElementById('resultBox').value = sum;
if(sum<0) {
document.getElementById('resultBox').style.color = "red";
}
else{
document.getElementById('resultBox').style.color = "green";
}
document.getElementById('resultBox').style.visibility = 'visible';
document.getElementById('resultBox').value = sum
}
</script>
<script>
function subtractTwoNumbers () {
var number1 = document.getElementById('box1').value;
var number2 = Number(document.getElementById('box2').value);
var difference = Number(number1) - number2;
document.getElementById('resultBox').value = difference;
if(difference<0) {
document.getElementById('resultBox').style.color = "red";
}
else{
document.getElementById('resultBox').style.color = "green";
}
document.getElementById('resultBox').style.visibility = 'visible';
document.getElementById('resultBox').value = sum
}
</script>
<script>
function clearall() {
document.getElementById('box1').value = "";
document.getElementById('box2').value = "";
document.getElementById('resultBox').value = "";
}
</script>
<div id='calc' align="center"></div>
<h1>Calculator</h1>
<p>Enter budget <input type="text" id="box1"></p>
<p>Enter price <input type="text" id="box2"></p>
<p>Press the equation key to see your results</p>
<div class="btn-group" style="width:100%">
<button style="width:33.3%" onclick="addTwoNumbers()">+</button>
<button style="width:33.3%" onclick="subtractTwoNumbers()">-</button>
<p>
<button style="width:67.5%" onclick="clearall()">clear</button>
</div>
<h3>Do you have enough?</h3>
<input type="text" id="resultBox"> <br/>
Instead of using the onclick attribute in the HTML, a more modern approach would be to create an event listener in your javascript.
I would give the buttons an ID. Then do something like this:
document.getElementById("clearBtn").addEventListener("click", clearAll);
There are all kinds of events you can listen for and I would guess you could find one that provides the behavior you are after.
Why does this happen ? I am not using correct syntax here?
HTML is as below
<div id="tasks" value="1" class="1">
<input type="checkbox">
<label>Task has been added</label>
</div>
jQuery is as below
$("#cButton").click(function () {
var arr_id = [];
$(":checkbox:checked").each(function (i) {
arr_id[i] = $(this).val();
console.log("$(this).val() : " + $(this).val());
})
if (arr_id.length == 0) {
alert("atleast check one");
} else {
for (var i = 0; i < arr_id.length; i++) {
$("." + arr_id[i]).remove();
console.log("Hello");
}
}
});
Console O/P is as below
$(this).val() : on
The best way to get a boolean value from a checkbox input with jQuery is using prop: $(this).prop("checked").
If the value attribute was omitted, the default value for the checkbox is on
MDN input type="checkbox"
If you need to use the value of the input you should be placing it inside the input tag. Because you didn't set a value it's taking the default "on" when calling val() on it.
$("#cButton").click(function () {
var arr_id = [];
$(":checkbox:checked").each(function (i) {
arr_id[i] = $(this).prop("checked");
console.log($(this).prop("checked"));
})
if (arr_id.length == 0) {
alert("atleast check one");
} else {
for (var i = 0; i < arr_id.length; i++) {
$("." + arr_id[i]).remove();
console.log("Hello");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks" value="1" class="1">
<input type="checkbox">
<label>Task has been added</label>
</div>
<button id="cButton">Button</button>
You placed the value attribute on the parent <div>... A <div> does not have a value. It has to be on the input.
The elements which can have a value are ref:
<button>
<data>
<input>
<li>
<meter>
<option>
<progress>
<param>
$("#cButton").click(function() {
var arr_id = [];
$(":checkbox:checked").each(function(i) {
arr_id[i] = $(this).val();
console.log("$(this).val() : " + $(this).val());
})
if (arr_id.length == 0) {
alert("atleast check one");
} else {
for (var i = 0; i < arr_id.length; i++) {
$("." + arr_id[i]).remove();
console.log("Hello");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks" class="1">
<input type="checkbox" value="1">
<label>Task has been added</label>
</div>
<button id="cButton">Button</button>
I'm new in front-end.I need to show the list of values whenever the user types the % in the text area.And from the list, the selected value must be appended in the text box.
for example:
Hi %name how are you?
in the above string, the name is one of the list value.After appending the value it can allow the user to type normal text.
Here is the solution to what you are looking for. Please ignore css
<html ng-app="exampleApp">
<head>
<meta charset="utf-8">
<title>ng app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
<script>
var myApp = angular.module('exampleApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.actualData = [
'John',
'Dan',
'Brown'
];
$scope.viewList = function() {
var templist = []
if ($scope.val == '' || $scope.val == undefined) {
templist = [];
} else if ($scope.val.indexOf('%') > -1) {
templist = $scope.actualData;
}
$scope.data = templist;
}
$scope.setData = function(value) {
$scope.val = $scope.val.replace('%','') + " " + value;
$scope.data = [];
}
})
</script>
</head>
<body ng-controller="myCtrl">
<input type="search" ng-model="val" ng-change="viewList()" />
<ul>
<li ng-repeat="option in data" ng-click="setData(option)">{{option}}</li>
<ul>
</body>
</html>
Check this plunker link https://plnkr.co/edit/bz68dKK3izvCs7jcjX4C?p=preview, to see it in action
When I'm texting the number in my text (or number) field I need the number to be divided by thousands with a comma.
Example
1. instead of it saying “1000” make it say “1,000”.
2. “1000000” make it say “1,000,000”.
Using Script
$(document).on('keyup', '.Amount', function() {
var x = $(this).val();
$(this).val(x.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","));
});
Live Demo Here
Snippet Example Below
$(document).on('keyup', '.Amount', function() {
var x = $(this).val();
$(this).val(x.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Enter Amount:<input class="Amount" type="Amount" />
</form>
This could help you
window.onload=function(){
var numberinput=document.getElementById('number');
numberinput.addEventListener('change',changedValue);
}
function changedValue(){
var input=this.value
var number=parseInt(input,10);
if(number>=1000)
{
var numbersArray = input.toString().split(".");
numbersArray[0] = numbersArray[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
this.value= numbersArray.join(".");
}
}
<input type="text" id="number" >
Hope this helps
$('input.number').keyup(function(event) {
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="number">
JS Fiddle