I am not able to paste chinese content in textbox using angularjs - html

<input type="text" class="form-control name" name="name" id="focus_me" required maxlength="50" letters-with-space="" ng-trim="false" tabindex="1" ng-model="vm.detail.name" ng-paste="paste($event.originalEvent)" ng-init="vm.detail.name = null">
$scope.paste = function (event,field) {
var item = event.clipboardData.items[0];
item.getAsString(function (data) {
$scope.pastedData = data;
$scope.$apply();
});
}
Input : 继续
here is input , i am not able to paste it into textbox. how to enable it?

checkout this https://jsfiddle.net/geekcode/s91t2ryg/11/
I'm able to paste the Chinese content, just pass $event instead of $event.originalEvent.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<input ng-model="mod" type="text" ng-paste="paste($event)" ng-init="mod = null">
{{mod}}
<input ng-model="mod1" type="text">
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function($scope){
$scope.paste = function (event,field) {
var item = event.clipboardData.items[0];
item.getAsString(function (data) {
$scope.pastedData = data;
$scope.$apply();
});
}
});
</script>

Related

Add new dropdowns and submit several Vales, only one value is submitted

When the values ​​in the dropdowns are selected and submitted, all the values ​​will be submitted.
But when you go to Add New Items and add new dropdowns and submit several Vales, only one value is submitted.
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiples', {
removeItemButton: true,
maxItemCount:100,
searchResultLimit:100,
renderChoiceLimit:100
});
});
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple', {
removeItemButton: true,
maxItemCount:100,
searchResultLimit:100,
renderChoiceLimit:100
});
});
$('#submit').click(function(){
var multiselect = $('#choices-multiples').val();
var multiselects = $('#choices-multiple').val();
document.getElementById("items-1").value = multiselect;
document.getElementById("items-2").value = multiselects;
});
$(function() {
var scntDiv = $('#items-lists');
var i = $('#items-lists p').size() + 1;
$('#add_items').live('click', function() {
$(`<p> <label for="item-list-1"><select name="items-cat-1-${i}" id="choices-multiples-${i}" placeholder="Select The Items 1" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br><label for="item-list-2"><select name="items-cat-2-${i}" id="choices-multiple-${i}" placeholder="Select The Items 2" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br><input type="text" name="items-cat-1-${i}" id="items-1-${i}"><input type="text" name="items-cat-2-${i}" id="items-2-${i}"> Remove Field</p>`).appendTo(scntDiv);
var multipleCancelButton = new Choices(`#choices-multiple-${i}`, {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
var multipleCancelButton = new Choices(`#choices-multiples-${i}`, {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
$('#submit').click(function(){
document.getElementById("items-1-${i}").value = $("#choices-multiples-${i}").val();
document.getElementById("items-2-${i}").value = $("#choices-multiple-${i}").val();
});
i++;
return false;
});
$('#rem_items-lists').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://code.jquery.com/jquery-1.4.3.min.js" integrity="sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.js"></script>
<form method="post" id="datasend" autocomplete="off" onsubmit="return checkForm(this);" name="datasend">
<div id="items-lists">
<p>
<label for="item-list-1"><select name="items-cat-1" id="choices-multiples" placeholder="Select The Items 1" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br>
<label for="item-list-2"><select name="items-cat-2" id="choices-multiple" placeholder="Select The Items 2" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br>
<input type="text" name="items-cat-1" id="items-1">
<input type="text" name="items-cat-2" id="items-2">
</p>
</div>
<h6>Add New Items</h6>
<input id="submit" type="submit" name="submit" value="Submit" onclick="getMultipleSelectedValue()"/>
</form>
When the values ​​in the dropdowns are selected and submitted, all the values ​​will be submitted.
But when you go to Add New Items and add new dropdowns and submit several Vales, only one value is submitted.

HTML jQuery multiselect dropdown work not Perfectly

I am trying to use HTML jQuery multiselect more dropdowns to HTML Forms, when i use some jQuery it is work not Perfectly.. this is my full codes - https://jsfiddle.net/13yeasedu/d1cbaro9/7/
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiples', {
removeItemButton: true,
maxItemCount:100,
searchResultLimit:100,
renderChoiceLimit:100
});
});
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple', {
removeItemButton: true,
maxItemCount:100,
searchResultLimit:100,
renderChoiceLimit:100
});
});
$('#submit').click(function(){
var multiselect = $('#choices-multiples').val();
var multiselects = $('#choices-multiple').val();
document.getElementById("items-1").value = multiselect;
document.getElementById("items-2").value = multiselects;
});
$(function() {
var scntDiv = $('#items-lists');
var i = $('#items-lists p').size() + 1;
$('#add_items').live('click', function() {
$(`<p> <label for="item-list-1"><select name="items-cat-1-${i}" id="choices-multiples-${i}" placeholder="Select The Items 1" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br><label for="item-list-2"><select name="items-cat-2-${i}" id="choices-multiple-${i}" placeholder="Select The Items 2" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br><input type="text" name="items-cat-1-${i}" id="items-1-${i}"><input type="text" name="items-cat-2-${i}" id="items-2-${i}"> Remove Field</p>`).appendTo(scntDiv);
var multipleCancelButton = new Choices(`#choices-multiple-${i}`, {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
var multipleCancelButton = new Choices(`#choices-multiples-${i}`, {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
$('#submit').click(function(){
var multiselect-${i} = $("#choices-multiples-${i}").val();
var multiselects-${i} = $("#choices-multiple-${i}").val();
document.getElementById("items-1-${i}").value = multiselect-${i};
document.getElementById("items-2-${i}").value = multiselects-${i};
});
i++;
return false;
});
$('#rem_items-lists').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.css">
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://code.jquery.com/jquery-1.4.3.min.js" integrity="sha256-+ACzmeXHpSVPxmu0BxF/44294FKHgOaMn3yH0pn4SGo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.js"></script>
<form method="post" id="datasend" autocomplete="off" onsubmit="return checkForm(this);" name="datasend">
<div id="items-lists">
<p>
<label for="item-list-1"><select name="items-cat-1" id="choices-multiples" placeholder="Select The Items 1" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br>
<label for="item-list-2"><select name="items-cat-2" id="choices-multiple" placeholder="Select The Items 2" multiple><option value="Item-01">Item-01</option><option value="Item-02">Item-02</option></select></label> <br>
<input type="text" name="items-cat-1" id="items-1">
<input type="text" name="items-cat-2" id="items-2">
</p>
</div>
<h6>Add New Items</h6>
<input id="submit" type="submit" name="submit" value="Submit" onclick="getMultipleSelectedValue()"/>
</form>
I am trying to use HTML jQuery multiselect more dropdowns, but it is work not Perfectly.. this is my full codes - https://jsfiddle.net/13yeasedu/d1cbaro9/7/

assign value from two input to a single input type hidden

I am trying to get the value of first input or second input and assign it to a hidden input type. When the value updates from the above default value.
HTML
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type ="hidden" name="distance" value="">
jQuery
if(mafsForm.find("#amount3").val().length !== 0 || mafsForm.find("#amount2").val().length !== 0) {
var s_value11 = mafsForm.find("#amount3").val();
var s_value6 = mafsForm.find("#amount2").val();
var dist = $('#mak').val($(this).val());
}
Hope this is what you are looking for. To test this, remove 'hidden' from the hidden input field. Then change the value of any of the first two input boxes. On every change, 3rd input box will be updated with latest value. Below code only shows latest value from the last updated input box
$("#amount2, #amount3").change(function(){
var changedVal = $(this).val();
if(changedVal !== '0'){
$("#mak").val(changedVal);
}
});
This is a working example of pure javascript ...
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type="hidden" name="distance" value="">
<script>
var amnt2 = document.getElementById("amount2");
var amnt3 = document.getElementById("amount3");
var mak = document.getElementById("mak");
amnt2.addEventListener("change", function(event) {
setValue(this.value);
});
amnt3.addEventListener("change", function(event) {
setValue(this.value);
});
function setValue(num) {
mak.value = num;
}
</script>
The mafsForm variable was not assigned a selector in your code, so instead of mafsForm.find(selector).val() I wrote $(selector).val(). Also, I used the parseInt() method to convert the value to a number for summation. You can easily adapt this code for yourself.
$('#amount2, #amount3').on('change', function() {
var s_value11 = $("#amount3").val();
var s_value6 = $("#amount2").val();
if(s_value11.length !== 0 || s_value6.length !== 0) {
value_sum = parseInt(s_value11) + parseInt(s_value6);
console.log(value_sum);
var dist = $('#mak').val(value_sum);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type ="hidden" name="distance" value="">
Your issue is that $(this) is referencing the window object. Here's a working solution:
var mafsForm = $('#mafsForm');
var dist;
if(mafsForm.find("#amount3").val().length !== 0 || mafsForm.find("#amount2").val().length !== 0) {
var s_value11 = mafsForm.find("#amount3").val();
var s_value6 = mafsForm.find("#amount2").val();
dist = $('#mak').val(s_value11);
};
console.log(dist.val());
// Now if you want to update the value of the hidden value when changing the value of a filed you can do this
mafsForm.find("#amount3").on('input', function() {
var s_value11 = mafsForm.find("#amount3").val();
dist = $('#mak').val(s_value11);
console.log(dist.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form id = "mafsForm">
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type ="hidden" name="distance" value="">
</form>

to reset the value when disabling the textbox

I have two inputs in which I am applying typeahead:-
<div class="form-group>
<label class="control-label=">Product Code:</label>
<input placeholder="Enter Value" type="text" class="form-control" ng-model="a.productCode" typeahead="code for code in getProductByCode($viewValue)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>
<label class="control-label">Product Name:</label>
<input placeholder="Enter Value" type="text" class="form-control" ng-model="getNgModel(a)" typeahead="code for code in getProductNameByCode($viewValue,a.producrCode)" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="!a.productCode"/>
<button type="button" ng-disabled="!a.productCode">Show</button>
</div>
My DIRECTIVE CODE:-
(function () {
'use strict';
angular.module('myApp.components')
.directive('products', products);
products.$inject = ['$http', '$timeout', 'ApiServices'];
function products($http, $timeout, ApiServices) {
return {
restrict: 'EA',
scope: {
},
link: function (scope, el, attrs) {
scope.a = {};
scope.getNgModel = function (a) {
if(a.productCode){
return a.productName;
}else{
return '';
}
};
scope.getProductCode = function(key){
var obj = {"key": key}
if(key.length>=2){
return ApiServices.getProductCodee(obj).then(function (response) {
return response.data.map(function(item){
return item;
});
});
} else {
return false;
}
}
scope.getProductCodeByName = function (key,Code) {
var obj = {"key": key, "Code":Code}
if(key.length>=2){
return ApiServices.getProductCodeByName(obj).then(function (response) {
return response.data.map(function(item){
return item;
});
});
} else {
return false;
}
};
},
templateUrl: ''
};
}
})();
What I want here is when I select a particular value from product code only then the product name and button gets enabled otherwise disabled. Also when the productName is disabled back the value inside it is set to null.Because the previous value remains bind to it and even disabled.
I am not able to clearly understand the second part of your question.. Also when the productName is disabled back the value inside it is set to null.Because the previous value remains bind to it and even disabled
Try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
angular.module('myApp', ['ui.bootstrap'])
.controller("mainCtrl", function ($scope) {
$scope.selected = '';
$scope.states = [
{
id:1,
name:'A'
},{
id:2,
name:'B'
}
];
var selectedByUser = false;
$scope.onSelectValue = function(selected){
$scope.selected = selected.name;
$scope.disableFields = false;
selectedByUser = true;
};
$scope.changingInput = function(inputValue){
// $scope.selected = null;
if (inputValue && inputValue.id) {
$scope.disableFields = true;
}else{
if (inputValue.length>0 && selectedByUser) {
$scope.disableFields = false;
}else{
$scope.disableFields = true;
// $scope.selected = null;
selectedByUser = false;
}
}
};
$scope.disableFields = true;
});
</script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<div class="form-group">
<label class="control-label=">Product Code:</label>
<input placeholder="Enter Value" ng-change="changingInput(selected)" type="text" class="form-control" ng-model="selected" typeahead="state as state.name for state in states | filter:$viewValue" typeahead-on-select="onSelectValue(selected)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"/>
<label class="control-label">Product Name:</label>
<input placeholder="Enter Value" type="text" class="form-control" typeahead-loading="loadingCodes" typeahead-no-results="noResults" ng-disabled="disableFields"/>
<button class="btn btn-default" type="button" ng-disabled="disableFields">Show</button>
</div>
{{selected}}
</div>
</body>
</html>
If it does not work here then copy paste it in your editor and then try. Even after that it does not work then you can go to my gihub account, you will find my email address, then share me your mail address so I will mail you zipped solution.

How to store value in localstorage on button click using knockout js?

This is my code but when i type text into input box after that i click on save button then text is saving into dropdown list but this text is't storing in local storage and for this i m using knockout.js
<form style="margin-top: -25px;">
<button id="buttonSave" type="submit" style="margin-left: 1156px;">Save</button>
</form>
<div id="labelList" class="btn-group" style="margin-top: -595px;margin-left: 3px;">
<input id="editExistannotation" data-bind="value: annotationList" class="editAnnotationList textArea" type="text" placeholder="Edit existing annotation"/>
<select data-bind="options: area"></select>
</div>
----------------------------------------------------
var addHandle = function () {
this.items = ko.observableArray();
this.add = function (item) { this.items.push(item); }
this.remove = function (item) { this.items.remove(item); }
this.clear = function () { this.items.removeAll(); }
}
var addHandler = new addHandle();
ko.applyBindings(addHandler, document.getElementById("slider"));
$("#buttonSave").click(function () {
var label_object;
var labelText = document.getElementById("textarealabel");
var labelObject = new Object();
labelObject.textarealabel = labelText.value;
localStorage.setItem('label_object', JSON.stringify(labelObject));
$("#ddlList").prepend("<option value='0'>" + localStorage.getItem(label_object) + "</option>");
return false;
})
var existAnnotationmodel = new function () {
var labelObject = $('#textarealabel').val();
this.annotationList = ko.observable();
this.area = ko.observableArray();
this.append = ko.computed(function () {
this.area.push(this.annotationList());
localStorage.setItem('labelObject', JSON.stringify(labelObject));
}, this);
}
ko.applyBindings(existAnnotationmodel);
Now when you type text into the input type="text" and you click on the button. The text is added to the options and to the local storage.
I also remove non relevant code.
<form >
<button id="buttonSave" type="submit" data-bind="click:append" >Save</button>
</form>
<div id="labelList" class="btn-group" >
<input id="editExistannotation" data-bind="value: annotationList" type="text" />
<select data-bind="options: area"></select>
</div>
var VM = function () {
this.annotationList = ko.observable();
this.area = ko.observableArray();
this.append = function () {
this.area.push(this.annotationList());
localStorage.setItem('labelObject',this.annotationList());
localStorage.setItem('labelObjectList',this.area());
};
};
var existAnnotationmodel = new VM();
ko.applyBindings(existAnnotationmodel);
See fiddle