I need to add a minus sign onclick of a button (-200), and on second click, the minus sign should be removed. And minus sign can be added only in the beginning.
<input type="button" value="-" name ="minus" id="minus" ng-click="click($event)" />
$scope.click = function(event){
angular.element('.numValBox').focus();
angular.element('.numValBox').val(function(index,val){
return val + angular.element(event.target).val();
});
};
Here is a good approach to it:
JSFiddle
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="-" name="minus" id="minus" ng-click="click($event)" />
<input type="text" ng-model="numValBox" class="numValBox"></div>
</div>
JS:
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.numValBox = "hello world";
$scope.click = function (event) {
$scope.numValBox = ($scope.numValBox.match(/-/)) ? $scope.numValBox.replace('-', '') : '-'+$scope.numValBox;
};
});
Of course I thought the input value should be anything not only numbers and that's because I did a match
Related
I have a basket of goods in which there can be many different entities. And I'm trying to implement changes in the number of goods using input - number without arrows, and with additional buttons +/-. I know that I could use identifiers and easily make my plans. But in my case, I need to use querySelectorAll. Help me please correct this code. quantity-arrow-minus decreases the field value and quantity-arrow-plus increases. How to make it so that the changes are concerned with each item?
var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');
minus.forEach(function(node) {
node.addEventListener('click', function() {
update_cart.forEach(function(element) {
element.value = parseInt(element.value) - 1;
});
});
});
plus.forEach(function(node) {
node.addEventListener('click', function() {
update_cart.forEach(function(element) {
element.value = parseInt(element.value) + 1;
});
});
});
<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>
<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>
You can use previousElementSibling and nextElementSibling to access the input that corresponds to the button that was clicked:
var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');
minus.forEach(function(node) {
node.addEventListener('click', function(e) {
const input = e.target.nextElementSibling
input.value = parseInt(input.value) - 1;
});
});
plus.forEach(function(node) {
node.addEventListener('click', function(e) {
const input = e.target.previousElementSibling
input.value = parseInt(input.value) + 1;
});
});
<form action="{% url 'cart:cart_update' %}" method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="0">
<button type="button" class="quantity-arrow-plus">+</button>
<br>
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="0">
<button type="button" class="quantity-arrow-plus">+</button>
</form>
Use Number() instead. Assuming that the minus button will be just after your input, just use this.nextElementSibling. This is will make your code better instead of doing forEach on every element. What if there are many elements like these?
var minus = document.querySelectorAll('.quantity-arrow-minus');
var plus = document.querySelectorAll('.quantity-arrow-plus');
minus.forEach((node) => {
node.onclick = function () {
this.nextElementSibling.value = Number(this.nextElementSibling.value) - 1;
}
});
plus.forEach((node) => {
node.onclick = function () {
this.previousElementSibling.value =Number(this.previousElementSibling.value) + 1;
}
});
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
I have two buttons in my HTML:
<form>
<input type="button" id="button1" value="Clickable" onClick="switchButton()">
<input type="button" id="button2" value="Not Clickable" onClick="switchButton2()" disabled="true">
</form>
I want to write a function() in JavaScript for when I click on button1 it should be disabled and change it's value to "not clickable" and button2 should be enabled and change it's value to "clickable" and the other way around.
I have written two functions but they aren't correct and I am very new to JavaScript. This is my functions():
function switcher() {
var btn = document.getElementById("knapp1");
btn.disabled = true;
}
function switcher2(){
var btn2 = document.getElementById("knapp2");
btn2.enabled = true;
}
You have a problem with the name of your function : switchButton() in your html and switcher in your js, the id are different too and enabled is not an html property. You can achieve what you want with only one function :
function switchButton(btn1, btn2) {
var btn1 = document.getElementById("button"+btn1);
var btn2 = document.getElementById("button"+btn2);
btn1.disabled = true;
btn1.value = "not clickable";
btn2.disabled = false;
btn2.value = "clickable";
}
<form>
<input type="button" id="button1" value="Clickable" onClick="switchButton(1,2)">
<input type="button" id="button2" value="Not Clickable" onClick="switchButton(2,1)" disabled="true">
</form>
You should try to avoid have this duplicate logic that make the same, is very hard to maintain, I recommend to you instead use this:
function clickButton(e) {
const currentBtn = document.getElementById(e);
const otherBtn = document.getElementById(e === "knapp2"? "knapp1": "knapp2");
currentBtn.disabled = true;
otherBtn.disabled = false;
currentBtn.value="Not Clickable"
otherBtn.value="Clickable"
}
<form>
<input type="button" id="knapp1" value="Clickable" onClick="clickButton('knapp1')">
<input type="button" id="knapp2" value="Not Clickable" onClick="clickButton('knapp2')" disabled>
</form>
I have modified the answer in the post dicussed here.
In my application I have two buttons - edit and save. When clicked on edit, the labels get converted into input fields, where the user can edit the content and save.
Everything is working fine, but the problem is that when the user clicks on the edit button twice, the content in the input fields becomes blank, i.e. the <input> value becomes blank.
Please suggest me a fix for this. Where am I going wrong?
<div id="companyName">
<label class="text-cname"><b>#Html.DisplayFor(m => m.Company)</b></label>
</div>
<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" />
</div>
<script>
$(document).ready(function () {
$('#edit').click(function () {
// for company name
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
$('#btnSave').click(function () {
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});
});
</script>
You can use replaceWith() method to convert label to textarea.
$("#edit").click(function(){
var text = $("label").text();
$("label").replaceWith("<input value='"+text+"' />");
});
$("#save").click(function(){
var text = $("input ").val();
$("input ").replaceWith("<label>"+text+"</label>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="edit">Edit</button>
<button id="save">Save</button>
<br/><br/>
<label>Text</label>
The most simple fix would be to disable the edit button once you've clicked it, and enable it again after saving:
$(document).ready(function () {
$('#edit').click(function () {
$(this).prop('disabled', true);
/*for company name*/
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
$('#btnSave').click(function () {
$('#edit').prop('disabled', false);
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});
});
When you click the second time the value of companyName is empty, that's why the <input> value becomes blank. This is a very simple solution, but you lose the focus on edit box which is easy to fix.
$('#edit').click(function () {
/*for company name*/
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
if(companyName != "")
$('.text-cname').text('').append(lblCName);
lblCName.select();
});
Try This one
function EditContent(){
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
if (companyName != "") {
$('.text-cname').text('').append(lblCName);
}
lblCName.select();
}
function SaveContent(){
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="companyName">
<label class="text-cname"><b>Company</b></label>
</div>
<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" onclick="SaveContent()" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" onclick="EditContent()" />
</div>
I have this in my angular code:
$scope.Disable = false;
$scope.SetDisable = function (Number) {
if (Number.length < 4) {
return false;
}
else {
return true;
}
};
$scope.$watch("Admin.UserName", function () {
$scope.Disable = $scope.SetDisable($scope.Admin.UserName.length);
});
And this code in my view:
<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" />
Notice that ever i change the default value of $scipe.Disable to true and turn the other lines of code in my Angular script to comment, the button is still enabled.
If i change the code in my View to:
<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="true" />
(ng-disabled="true")
The button is disabled.
What am i doing wrong?
use ng-change instead of $watch e.g.
$scope.myChange = function (nu) {
if (nu.length < 4) {
$scope.Disable = false;
}
else {
$scope.Disable = true;
}
};
see this link:
https://plnkr.co/edit/m5TUzC35gg8EuApVHcO0?p=preview
This may caused by Angular scope inheritance feature, you could overcome this issue by two approaches:
use controller as syntax:
angular.controller('formController', function(){
this.Disabled = false;
})
<div ng-controller="formController as ctrl">
<input ng-disabled="ctrl.Disabled">
</div>
use a reference variable instead of a primitive variable
$scope.Disabled = { value: false }
<input ng-disabled="Disabled.value">
The problem is that within the $watch() function you pass the length of the string instead of the string when call the function SetDisable() and in this function you use the length again in the if condition.
HTML:
<html ng-app="app">
<head>
</head>
<body ng-controller="mainController">
<div>
<label>UserName:</label>
<input type="text" ng-model="UserName" placeholder="Enter a name here">
<hr>
<input id="Submit" name="Submit" class="btn btn-success" type="submit" value="Login" ng-disabled="Disable" />
</div>
</body>
</html>
JS:
angular
.module('app', [])
.controller('mainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope) {
$scope.Disable = false;
var SetDisable = function (name) {
if (name.length < 4) {
return false;
} else {
return true;
}
}
$scope.$watch('UserName', function() {
$scope.Disable = SetDisable($scope.UserName);
})
}
I made a working example:
http://codepen.io/anon/pen/GomYGq?editors=101
I have a problem when I want to append a textarea linked to tinyMCE wysiwyg.
tinyMCE don't have time to initialize so maybe the solution is to wait the end of the ng-repeat. But I don't now how and tinyMCE is not using angular so..
Need your help.
Have a good time.
Take a Look at this
Working Demo
html
<div ng-app="myApp" ng-controller="PostController">
<br/>
<textarea ng-model="mypost" ui-tinymce="tinymceOptions"></textarea>
<br/>
<input type="button" value="Submit" ng-click="submit()"/>
<br/>
<ul>
<li ng-repeat="post in posts | orderBy:orderProp:true">
<input type="button" value="Edit" ng-click="edit=!edit;newpost=post.content"/>
<input ng-hide="edit" type="button" value="Delete" ng-click="deletepost(post)"/>
<br />
<div ng-hide="edit" style="white-space: pre-wrap"><ANY ng-bind-html-unsafe="post.content"></ANY></div>
<div ng-show="edit">
<textarea ng-model="newpost" ui-tinymce="tinymceOptions"></textarea>
<input type="button" value="Submit" ng-click="editpost(post, newpost);edit=!edit" />
</div>
<br /><br /><br/>
</li>
</ul>
</div>
script
var myApp = angular.module('myApp', ['ui.tinymce']);
function PostController($scope) {
$scope.posts = [];
$scope.time = 1;
$scope.orderProp = 'pseudo_time';
$scope.tinymceOptions = { menubar: false };
$scope.submit = function() {
newpost = {"content": $scope.mypost, "pseudo_time": $scope.time++};
$scope.posts.push(newpost);
};
$scope.editpost = function(post, newpost) {
var index = jQuery.inArray(post, $scope.posts);
$scope.posts[index].content = newpost;
};
$scope.deletepost = function(post) {
if (confirm("Delete Answer?") == true) {
var index = jQuery.inArray(post, $scope.posts);
$scope.posts.splice(index, 1);
}
};
}