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.
Related
I have problem with setting up multiselect dropdown menu.. HTML Multiselect dropdown Java Script not working at when Add Multiple Fields.
This is my fill script link - https://jsfiddle.net/13yeasedu/j6gd5kvo/12/
<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><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.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><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries#main/choices.min.css">
<div id="Multiple-Fields">
<p>
<label for="items_list">
<select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
</select>
</label>
</p>
</div>
<h6>Add Multiple Fields</h6>
<script>
$(document).ready(function(){
var multipleCancelButton = new Choices('#choices-multiple', {
removeItemButton: true,
maxItemCount:5,
searchResultLimit:5,
renderChoiceLimit:5
});
});
</script>
<script>
$(function() {
var scntDiv = $('#Multiple-Fields');
var i = $('#Multiple-Fields p').size() + 1;
$('#add_Multiple-Fields').live('click', function() {
$('<p> <label for="items_list"><select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple><option value="Item 1">Item 1</option><option value="Item 2">Item 2</option></select></label> Remove</p>').appendTo(scntDiv);
i++;
return false;
});
$('#rem_Multiple-Fields').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
You need to initialize your newly added select with Choices plugin . So, you can use new Choices($('#Multiple-Fields select[name=items_lists]:last')[0], options); this will give you last select-box then initialize it with options.
Demo Code :
//save this some variable for later use..
var options = {
removeItemButton: true,
maxItemCount: 5,
searchResultLimit: 5,
renderChoiceLimit: 5
}
var multipleCancelButton = new Choices('#choices-multiple', options);
$(function() {
var scntDiv = $('#Multiple-Fields');
var i = $('#Multiple-Fields p').size() + 1;
$('#add_Multiple-Fields').live('click', function() {
$('<p> <label for="items_list"><select name="items_lists" placeholder="Please Select The Items" multiple><option value="Item 1">Item 1</option><option value="Item 2">Item 2</option></select></label> Remove Field</p>').appendTo(scntDiv);
new Choices($('#Multiple-Fields select[name=items_lists]:last')[0], options); //intialize last added select-box.
i++;
return false;
});
$('#rem_Multiple-Fields').live('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<div id="Multiple-Fields">
<p>
<label for="items_list">
<select name="items_lists" id="choices-multiple" placeholder="Please Select The Items" multiple>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
</select>
</label>
</p>
</div>
<h6>Add Multiple Fields</h6>
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>
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.
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();
}
});