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.
Related
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.
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/
<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>
In the following HTML/JS code, if I enter a valid e-mail id a command button and a tick mark should appear. But command button works fine. Tick mark is not appearing. Any one please help.
<html>
<head>
</head>
<body>
<form id="signUpForm">
<input type="email" id="emailField" required>
<button id="okButton" style="display:none">OK</button>
<img id "img1" src="valid.jpg" width=100px style="display:none"/>
</form>
<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');
emailField.addEventListener('keyup', function (event) {
isValidEmail = emailField.checkValidity();
if ( isValidEmail ) {
flag1.style="display:inline";
img1.style="display:block"";
} else {
flag1.style="display:none";
img1.style="display:none";
}
});
okButton.addEventListener('click', function (event) {
signUpForm.submit();
});
</script>
</body>
</html>
There are several mistakes which break the script flow in your code
No "=" for id assignment of image tag
<img id "img1" src="valid.jpg" width=100px style="display:none"/>
Redundant double quote at the end of instruction
img1.style="display:block"";
If you correct them all, it should work.
<html>
<head>
</head>
<body>
<form id="signUpForm">
<input type="email" id="emailField" required>
<button id="okButton" style="display:none">OK</button>
<!-- fixed: id "img1" -> id="img1", width=100px -> width="100px" -->
<img id="img1" src="valid.jpg" width="100px" style="display:none"/>
</form>
<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');
emailField.addEventListener('keyup', function (event) {
isValidEmail = emailField.checkValidity();
if ( isValidEmail ) {
flag1.style="display:inline";
img1.style="display:block"; //removed 3rd double quote
} else {
flag1.style="display:none";
img1.style="display:none";
}
});
okButton.addEventListener('click', function (event) {
signUpForm.submit();
});
</script>
</body>
</html>
<html>
</head>
<body>
<form id="signUpForm">
<input type="email" id="emailField" required>
<button id="okButton" style="display:none">OK</button>
<!--You Missed Equlas to sign in id -->
<img id ="img1" src="valid.jpg" width=100px style="display:none"/>
</form>
<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const flag1 = document.getElementById('okButton');
const img1 = document.getElementById('img1');
emailField.addEventListener('keyup', function (event) {
isValidEmail = emailField.checkValidity();
if ( isValidEmail ) {
flag1.style="display:inline";
img1.style="display:block";
} else {
flag1.style="display:none";
img1.style="display:none";
}
});
okButton.addEventListener('click', function (event) {
signUpForm.submit();
});
</script>
</body>
</html>```
Here is my code
i have an input textbox where I get a new value
this line doesn't work,
$(document).on('click', '#af_cbms_add_depID', function()
{
var toclone=$("#newdepID").val();
var torefer=$("#af_cbms_question_item").val();
if((toclone!=='') && (toclone>0))
{
///here's the problem
$(".lahatkami").each(function()
{
input = $(this).val();
//i also tried the other
//if(this.value===toclone)
if(input===toclone)
{
alert("There is a duplicate value " + this.value);
$('#newdepID').val('');
$('#newdepID').focus();
return false;
}
else
{
$("#af_cbms_depIDset").append('<input type="text" name="'+torefer+'" id="depID'+toclone+'" class="lahatkami" value="'+toclone+'" style="width:40px !important; text-align:center;" readonly />');
$('#newdepID').val('');
$('#newdepID').focus();
}
});
}
else
{
alert('No dependent question item was set!');
$('#newdepID').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="textbox" id="newdepID" value="3"/> sample we a number 3 value
<button id="af_cbms_add_depID">Submit</button> //submits the value
//here are the inputs
<input type="textbox" class="lahatkami" id="newdepID" value="3"/>
<input type="textbox" class="lahatkami" id="newdepID" value="5"/>
<input type="textbox" class="lahatkami" id="newdepID" value="4"/>
after clicking submit i already coded it if the text input is empty.
but inside that if not empty i check again if the value is already in the set of inputs
i put a console.log to check inside but not working
try to this..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$( "#af_cbms_add_depID" ).click(function()
{
var toclone= $("#newdepID").val();
var torefer=$("#af_cbms_question_item").val();
if((toclone!=='') && (toclone > 0)) {
$(".lahatkami").each(function() {
input = $(this).val();
//alert(input);
if(input===toclone)
{
alert("There is a duplicate value " + this.value);
$('#newdepID').val('');
$('#newdepID').focus();
return false;
}else {
$("#af_cbms_depIDset").append('<input type="text" name="'+torefer+'" id="depID'+toclone+'" class="lahatkami" value="'+toclone+'" style="width:40px !important; text-align:center;" readonly />');
$('#newdepID').val('');
$('#newdepID').focus();
}
});
} else {
alert('No dependent question item was set!');
$('#newdepID').focus();
}
});
</script>
i am not clear with you exact requirement but i think below is code whic you looking for.
$(document).on('click', '#af_cbms_add_depID', function(){
var toclone=$("#newdepID").val();
var torefer=$("#af_cbms_question_item").val();
$("#af_cbms_depIDset").html("");
if((toclone!=='') && (toclone>0)){
var $tmpdom = $("<span></span>");
$(".lahatkami").each(function(){
input = $(this).val();
if(input===toclone){
alert("There is a duplicate value " + this.value);
$(this).val('');
$(this).focus();
return;
}else {
$tmpdom.append('<input type="text" name="'+torefer+'" id="depID'+toclone+'" class="lahatkami" value="'+toclone+'" style="width:40px !important; text-align:center;" readonly />');
}
});
$("#af_cbms_depIDset").append($tmpdom.html());
}else{
alert('No dependent question item was set!');
$('#newdepID').focus();
}
});