I am using reactive vars to manage visibility of my input fields depenging on user's choice select. But when I choose one option, write anything in shown input, then go to the second option, and finally when I come back to the firs one, the input value disappears. Is there any way to keep that data untill confirm button pressing to confirm once all the fields values under all the options?
Here are two input groups that are displayed, when option is set:
<template name="addTour">
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
<select class="form-control" id="tour-dropdown">
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
{{#if a}}
<div class="container-fluid">
{{> textfield label='a option' id='transfer-city-from'}}
{{> confirm add='a option'}}
</div>
{{/if}}
{{#if b}}
<div class="container-fluid">
{{> textfield label='b option' id='transfer-city-from'}}
{{> confirm add='b option'}}
</div>
{{/if}}
And some JS here that manages reactive variables to do all that job:
Template.addTour.onCreated( function () {
this.a = new ReactiveVar( false );
this.b = new ReactiveVar( false );
Template.addTour.helpers( {
a: function () {
return Template.instance().a.get();
},
b: function () {
return Template.instance().b.get();
}
}
});
Template.addTour.events( {
'change select': function ( event, template ) {
if ( $( event.target ).val() === "a" ) {
template.a.set( true );
} else {
template.a.set( false );
};
if ( $( event.target ).val() === "b" ) {
template.b.set( true );
} else {
template.b.set( false );
};
}
});
Or I shoud better use display:block and display:none ?
Thanks in advance for any suggestions.
So, I managed to resolve my problem with jQuery and it's hide() / show() options.
Here is the code:
<template name="addTour">
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
<select class="form-control" id="tour-dropdown" >
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
<div class="container-fluid" id="a">
<div class="row">
<div class="col-sm-4">
<form class='form-horizontal'>
<div class="form-group">
<h1>A option</h1>
{{> timepicker label='время прибытия' id='transfer-time-a'}}
</div>
</form>
</div>
</div>
</div>
<div class="container-fluid" id="b">
<div class="row">
<div class="col-sm-4">
<form class='form-horizontal'>
<div class="form-group">
<h1>B option</h1>
{{> timepicker label='время прибытия' id='transfer-time-b'}}
</div>
</form>
</div>
</div>
</div>
And jQuery works for me in this view:
Dropdown = $('#tour-dropdown');
$('#a').hide();
$('#b').hide();
select = this.value;
Dropdown.change(function() {
if ($(this).val() === 'a') {
$('#a').show();
console.log('A option');
} else $('#a').hide();
if ($(this).val() === 'b') {
$('#b').show();
console.log('B option');
} else $('#b').hide();// hide div if value is not "custom"
});
It works fine and keep values inside all the hidden inputs, so I can submit all of them once.
Related
I have a select with 3 options and a liveSearch. If the users type an input in the liveSearch-box which doesn't exist as an option, I get the result "No results matched xy". But I want to know, what the user wrote. How do I get his input?
<body class="inventorypage" onload="selectM()">
.....
<form>
<div class="form-row">
<div class="col-lg-7">
<div class="select_box">
<select class="select4 col-md-12" single title="Auswählen" id="searchInput">
<option>Search1</option>
<option>Search2</option>
<option>Search3</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="col-lg-7">
<button type="button" onclick="searchM()" class="btn3 mt-2 mb-3">Search</button>
</div>
</div>
<div class="form-row">
<div>
<p id='output'></p>
</div>
</div>
</form>
function selectM(){
var eingabe = document.getElementById('searchInput');
$(document).ready(function(){
$('.select4').selectpicker({
liveSearch: true
//,noneResultsText: 'I found no results'
});
})
}
function searchM(){
//console.log("users input");
}
The select picker creates a search input box with the class name bs-searchbox. You can get the value by following the code.
$(document).on('keyup', '.select4 .bs-searchbox input', function(e) {
alert($(this).val());
});
If the status value is completed then comment field is required is working good.But the problem is, I want to specify comment field is required for minimum of 50 character.
The Below code: index.php
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Status</label>
<div class="col-md-4">
<select id="status" name="status[]" class="form-control" >
<option value="Pending">Pending</option>
<option value="Work in process">Work in process</option>
<option value="Completed">Completed</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Comment</label>
<div class="col-md-4">
<input id="commentss" name="comment[]" type="text" placeholder="" class="form-control input-md" />
</div>
</div>
<div class="col-md-8 col-sm-12 col-24">
<div class="input_fields" style="color:black">
<button class="add_field btn " onclick="incrementValue()" >Add More</button>
<div>
<input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function () {
$("#status").click(function () {
if ($("#status").val() == "Completed") {
$("#commentss").attr("required", "required");
}
else
$("#commentss").attr("required", false);
});
});
</script>
Use length to find the length of the string
if($('#commentss').val().length < 50){
alert("Please enter 50 characters atleast");
} else {
//submit
}
For this please use below code :
<script type="text/javascript">
$(document).ready(function () {
$("#status").click(function () {
var commenttext = document.getElementById('commentss').value;
if (commenttext.length < 50)
{
alert("Please Enter minimum 50 character!")
}
else
{
//Add code
}
});
});
</script>
In Jquery ...
For Dynamic Tracking ...
(You can use blur or keyup even too.)
$(function() {
//disable submit if you want to
$('#commentss').on('input', function(e) {
if(this.value.length >= 50) {
//success
} else {
//fail?
}
});
});
To Validate on Click only ...
Go with the answer of Thamaraiselvam.
I have the following javascript:
var $step = $(".wizard-step:visible:last"); // get current step
var validator = $("#WizardForm").validate(); // obtain validator
var anyError = false;
$step.find("input").each(function ()
{
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
This is successfully validating all my input fields but upon trying to apply a similar method to the select type using code:
$step.find("select").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
});
My HTML is as follows:
<div class="wizard-step" id="step1" visibility="hidden" style="display: block;">
<div class="row">
<div class="col-md-6 column ui-sortable">
<div class="form-group">
<label class="control-label col-md-4" for="Tariff_Type">Tariff Type</label>
<div class="col-md-8">
<select style="width:100%;height:35px;border-radius:4px;padding-left:10px;" id="TariffType" name="TariffType" class="form-control input required">
<option value="">Please Select Tariff Type</option>
<option value="keypad account">Say Hello To Budget Extra Discount</option>
<option value="bill pay account">Standard 24H</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="TariffType" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</div>
How can I ensure that a TariffType value is selected using this method?
Try the .valid() method instead...
if (! $(this).valid()) { ...
I have a form with with three controls. Te page get loaded with those three controls. one of the controls is drop box which is populated with five items. Each selection have its own control to display. I have hidden all five div and will be showed based on the selected value.
Form will load with three controls
Select a value from drop-down
hide the fields and display the form/control based on the selected value
When you change the selected value, it must hide your previous selection
this must apply to any selected value in the drop-down
I have written java script function but it doesn't hide the loaded controls and show new form or div with the controls for that selection.
Question: How can i hide and show the div based on the selection from the drop-down?
I have tried this Example
here is my code below;
Java Script
<script type="text/javascript">
$(document).ready(function () {
$('#ddlControls').on('change', function () {
if (this.value == 'Users') {
$("#divUsers").show();
alert("Users");
}
else if (this.value == 'Orders') {
$("#divUsers").hide();
$("#divOrders").show();
alert("orders here");
}
else if (this.value == 'Contractors') {
$("#divOrders").hide();
$("#divContractors").show();
alert("Contractors here");
}
else if (this.value == 'Permanets') {
$("#divContractors").hide();
$("#divPermanets").show();
alert("Permanets here");
}
else if (this.value == 'Reports') {
$("#Permanets").hide();
$("#divReports").show();
alert("Reports here");
}
else {
$("#divReports").hide();
}
});
});
</script>
View page
<section>
<div class="row">
<fieldset class="fieldsetStyle">
<form role="form">
<div class="box-body">
<div class="col-md-5" id="divContainer">
<div class="form-group">
<label for="ddlControls">Report Category :</label>
<select class="form-control" id="ddlControls">
<option value="-1">--Select--</option>
<option id="Users" value="Users">All Users</option>
<option id="Orders" value="Orders">All Orders</option>
<option id="Contractors" value="Contractors">All Contractors</option>
<option id="Permanets" value="Permanets">All Permanets</option>
<option id="Reports" value="Reports">All Reports</option>
</select>
</div>
<div class="form-group">
<label for="txt1">Report Number</label>
<input type="text" class="form-control" id="txt1">
</div>
<div class="form-group">
<label for="txt2">Order Number:</label>
<input type="text" class="form-control" id="txt2">
</div>
<!--Here are all my hidded div that i want to show based on the selection of report catergory-->
<div class="hidden" id="divUsers">
<h2>I want to show this div for Users</h2>
<!--I will have more controls here-->
</div>
<div class="hidden" id="divOrders">
<h2>I want to show this for Orders</h2>
<!--I will have more controls here-->
</div>
<div class="hidden" id="divContractors">
<h2>I want to show this div for Contractors</h2>
<!--I will have more controls here-->
</div>
<div class="hidden" id="divPermanet">
<h2>I want to show this div for Permanet</h2>
<!--I will have more controls here-->
</div>
<div class="hidden" id="divReport">
<h2>I want to show this div for Report</h2>
<!--I will have more controls here-->
</div>
</div>
</div>
</form>
</fieldset>
</div>
Try this working example,
$(document).ready(function () {
function hideAll(){
$("#divUsers, #divOrders, #divContractors, #divPermanet, #divReport").hide();
}
hideAll();
$('#ddlControls').on('change', function () {
hideAll();
if (this.value == 'Users') {
$("#divUsers").show();
alert("Users");
}
else if (this.value == 'Orders') {
$("#divOrders").show();
alert("orders here");
}
else if (this.value == 'Contractors') {
$("#divContractors").show();
alert("Contractors here");
}
else if (this.value == 'Permanets') {
$("#divPermanet").show();
alert("Permanets here");
}
else if (this.value == 'Reports') {
$("#divReport").show();
alert("Reports here");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<fieldset class="fieldsetStyle">
<form role="form">
<div class="box-body">
<div class="col-md-5" id="divContainer">
<div class="form-group">
<label for="ddlControls">Report Category :</label>
<select class="form-control" id="ddlControls">
<option value="-1">--Select--</option>
<option id="Users" value="Users">All Users</option>
<option id="Orders" value="Orders">All Orders</option>
<option id="Contractors" value="Contractors">All Contractors</option>
<option id="Permanets" value="Permanets">All Permanets</option>
<option id="Reports" value="Reports">All Reports</option>
</select>
</div>
<div class="form-group">
<label for="txt1">Report Number</label>
<input type="text" class="form-control" id="txt1">
</div>
<div class="form-group">
<label for="txt2">Order Number:</label>
<input type="text" class="form-control" id="txt2">
</div>
<!--Here are all my hidded div that i want to show based on the selection of report catergory-->
<div id="divUsers">
<h2>I want to show this div for Users</h2>
<!--I will have more controls here-->
</div>
<div id="divOrders">
<h2>I want to show this for Orders</h2>
<!--I will have more controls here-->
</div>
<div id="divContractors">
<h2>I want to show this div for Contractors</h2>
<!--I will have more controls here-->
</div>
<div id="divPermanet">
<h2>I want to show this div for Permanet</h2>
<!--I will have more controls here-->
</div>
<div id="divReport">
<h2>I want to show this div for Report</h2>
<!--I will have more controls here-->
</div>
</div>
</div>
</form>
</fieldset>
</div>
The issue is that you need to hide ALL the other divs, not just one as you are currently doing.
You can solve this by applying a class to each of the display divs, adding the hidden class to any element with that class, and then making the selected div visible.
Or you could manually hide all the divs in each case in the event listener but that would be unnecessarily reptitive.
You should definitely add a class to all the divs that needs hidden. This allows you to hide all of them at once, then show the one that is being selected. The reason some of your divs were not displaying was due to typos in your JS. Here is a working fiddle.
Working JavaScript:
$(function () {
$('#ddlControls').on('change', function () {
$('.select-div').hide();
if (this.value == 'Users') {
$("#divUsers").show();
alert("Users");
}
else if (this.value == 'Orders') {
$("#divOrders").show();
alert("orders here");
}
else if (this.value == 'Contractors') {
$("#divContractors").show();
alert("Contractors here");
}
else if (this.value == 'Permanets') {
$("#divPermanet").show();
alert("Permanets here");
}
else if (this.value == 'Reports') {
$("#divReport").show();
alert("Reports here");
}
});
});
I got a problem. I'm trying to create a validation directive for my form. My validation process is a bit complex. I got 4 selects (dropdowns). 2 dropdowns for a first team (user and deputy) and the same for a second team.
My validation directive needs to do the following:
User first team selected but not a deputy first team (require deputy first team)
Deputy first team selected but not a user first team (require user first team)
User second team selected but not a deputy second team (require deputy second team)
Deputy second team selected but not a user second team (require user second team)
No user nor deputy for first or second team selected (require at least one user or deputy)
My html looks like this:
<div class="row" ng-form="reportForm" ng-model="report" require-users>
<!-- User First Team -->
<div class="col-sm-3 col-xs-6">
<div class="form-group">
<label>User First Team</label>
<!-- Dropdown User First Team -->
<select ng-form="reportForm.userFirst"
ng-model="report.userFirst"
ng-options="user.Name for user in users track by user.Id"
class="form-control">
<option></option>
</select>
<!-- Error Messages-->
<div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
<!-- Message required -->
<div ng-message="requireUserFirst">
<small>A User for the first team is required.</small>
</div>
</div>
</div>
</div>
<!-- Deputy First Team -->
<div class="col-sm-3 col-xs-6">
<div class="form-group">
<label>Deputy First Team</label>
<!-- Dropdown Deputy First Team -->
<select ng-form="reportForm.deputyFirst"
ng-model="report.deputyFirst"
ng-options="user.Name for user in users track by user.Id"
class="form-control">
<option></option>
</select>
<!-- Error messages -->
<div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
<!-- Message required -->
<div ng-message="requireDeputyFirst">
<small>A Deputy for the first team is required.</small>
</div>
</div>
</div>
</div>
<!-- User Second Team -->
<div class="col-sm-3 col-xs-6">
<div class="form-group">
<label>User Second Team</label>
<!-- Dropdown User Second Team -->
<select ng-form="reportForm.userSecond"
ng-model="report.userSecond"
ng-options="user.Name for user in users track by user.Id"
class="form-control">
<option></option>
</select>
<!-- Error messages -->
<div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
<!-- Message required -->
<div ng-message="requireUserSecond">
<small>A User for the second team is required.</small>
</div>
</div>
</div>
</div>
<!-- Deputy Second Team -->
<div class="col-sm-3 col-xs-6">
<div class="form-group">
<label>Deputy Second Team</label>
<!-- Dropdown Deputy Second Team -->
<select ng-form="reportForm.deputySecond"
ng-model="report.deputySecond"
ng-options="user.Name for user in users track by user.Id"
class="form-control">
<option></option>
</select>
<!-- Error messages -->
<div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert">
<!-- Message required -->
<div ng-message="requireDeputySecond">
<small>A Deputy for the second team is required.</small>
</div>
</div>
</div>
</div>
<!-- Error messages -->
<div ng-messages="reportForm.$error" style="color:maroon; margin-top: 4px;" role="alert" class="col-xs-12">
<!-- Message missing user and deputy -->
<div ng-message="requireAll">
<small><strong>At least one user and deputy is needed.</strong></small>
</div>
</div>
</div>
And my directive is here:
app.directive('requireUsers', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function (model, oldModel) {
if (model != oldModel) {
if (model.userFirst == null && model.deputyFirst == null && model.userSecond == null && model.deputySecond == null) {
ngModel.$setValidity('requireAll', false);
} else {
ngModel.$setValidity('requireAll', true);
}
if ((model.userFirst == undefined || model.userFirst == null) && model.deputyFirst != null) {
ngModel.$setValidity('requireUserFirst', false);
} else {
ngModel.$setValidity('requireUserFirst', true);
}
if ((model.deputyFirst == undefined || model.deputyFirst == null) && model.userFirst != null) {
ngModel.$setValidity('requireDeputyFirst', false);
} else {
ngModel.$setValidity('requireDeputyFirst', true);
}
if ((model.userSecond == undefined || model.userSecond == null) && model.deputySecond != null) {
ngModel.$setValidity('requireUserSecond', true);
} else {
ngModel.$setValidity('requireUserSecond', true);
}
if ((model.deputySecond == undefined || model.deputySecond == null) && model.userSecond != null) {
ngModel.$setValidity('requireDeputySecond', false);
} else {
ngModel.$setValidity('requireDeputySecond', true);
}
}
});
}
};
});
The problem is that the watcher doesn't work only when the directive gets initialized. So when I change a value the validation process won't get started.
UPDATE ReportController:
angular.module('ReportTool')
.controller('ReportController', ['$scope', 'Report', 'User', function ($scope, Report, User) {
var _this = this;
// Load all Teammembers (API Call in Service)
User.query().then(function (success) {
_this.users= success.data;
}, function (error) {
console.log('Users could not be loaded.');
});
// Save report
this.save = function () {
if (_this.report != null) {
// create report
Report.post(_this.report).then(function (success) {
console.log('Report created.');
}, function (error) {
console.log('Report could not be created.');
} else {
console.log('Report is null.');
}
};
}]);
In this case, you need to write a directive for each check, like the requireUsers.
I recommend using directive use-form-error.
With it easy to create custom checks.
Live example on jsfiddle.
angular.module('ExampleApp', ['use', 'ngMessages'])
.controller('ExampleController', function($scope) {
});
.errors {
color: maroon
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<form name="myForm">
<label>User first:</label>
<input type="text" ng-model="userFirst" name="userFirst" use-form-error="requireUserFirst" use-error-expression="!userFirst && deputyFirst" />
<br>
<label>Deputy first:</label>
<input type="text" ng-model="deputyFirst" name="deputyFirst" use-form-error="requireDeputyFirst" use-error-expression="userFirst && !deputyFirst"/>
<br>
<hr>
<label>User second:</label>
<input type="text" ng-model="userSecond" name="userSecond" />
<br>
<label>Deputy second:</label>
<input type="text" ng-model="deputySecond" name="deputySecond" />
<br>
<div use-form-error="requireAll" use-error-expression="!userFirst && !deputyFirst && !userSecond && !deputySecond" use-error-input="myForm"> </div>
<div ng-messages="myForm.$error" class="errors">
<div ng-message="requireAll">At least one user and deputy is needed.</div>
</div>
<div ng-messages="myForm.userFirst.$error" class="errors">
<div ng-message="requireUserFirst">A User for the first team is required.</div>
</div>
<div ng-messages="myForm.deputyFirst.$error" class="errors">
<div ng-message="requireDeputyFirst">A Deputy for the first team is required.</div>
</div>
</form>
</div>
</div>
You can simple pass your variable into your directive. And then check it.
Live examplee on jsfiddle.
angular.module('ExampleApp', ['ngMessages'])
.controller('ExampleController', function($scope) {
})
.directive('requireUsers', function() {
return {
restrict: 'A',
require: 'form',
scope: {
userFirst: "=",
deputyFirst: "=",
userSecond: "=",
deputySecond: "=",
},
link: function(scope, elem, attr, ngModel) {
function changeValue(model, oldModel) {
if (!scope.userFirst && !scope.deputyFirst && !scope.userSecond && !scope.deputySecond) {
ngModel.$setValidity('requireAll', false);
} else {
ngModel.$setValidity('requireAll', true);
}
if (!scope.userFirst && scope.deputyFirst) {
ngModel.$setValidity('requireUserFirst', false);
} else {
ngModel.$setValidity('requireUserFirst', true);
}
if (!scope.deputyFirst && scope.userFirst) {
ngModel.$setValidity('requireDeputyFirst', false);
} else {
ngModel.$setValidity('requireDeputyFirst', true);
}
if (!scope.userSecond && scope.deputySecond) {
ngModel.$setValidity('requireUserSecond', false);
} else {
ngModel.$setValidity('requireUserSecond', true);
}
if (!scope.deputySecond && scope.userSecond) {
ngModel.$setValidity('requireDeputySecond', false);
} else {
ngModel.$setValidity('requireDeputySecond', true);
}
}
scope.$watch('userFirst', changeValue);
scope.$watch('deputyFirst', changeValue);
scope.$watch('userSecond', changeValue);
scope.$watch('deputySecond', changeValue);
}
};
});;
.errors {
color: maroon
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<form name="myForm" require-users user-first="userFirst" deputy-first="deputyFirst" user-second="userSecond" deputy-second="deputySecond">
<label>User first:</label>
<input type="text" ng-model="userFirst" name="userFirst" />
<br>
<label>Deputy first:</label>
<input type="text" ng-model="deputyFirst" name="deputyFirst" />
<br>
<hr>
<label>User second:</label>
<input type="text" ng-model="userSecond" name="userSecond" />
<br>
<label>Deputy second:</label>
<input type="text" ng-model="deputySecond" name="deputySecond" />
<br>
<div ng-messages="myForm.$error" class="errors">
<div ng-message="requireAll">At least one user and deputy is needed.</div>
<div ng-message="requireUserFirst">A User for the first team is required.</div>
<div ng-message="requireDeputyFirst">A Deputy for the first team is required.</div>
<div ng-message="requireUserSecond">A User for the second team is required.</div>
<div ng-message="requireDeputySecond">A Deputy for the second team is required.</div>
</div>
</form>
</div>
</div>