Disable input only when modified by system - javascript

This code does a search and displays the results. I want to conditionally disable inputs.I am using knockout to control when an input is disabled.
Requirement:
input is disabled when set by the system.
User input should not be disabled.
In the following code input that comes from readDatabase() works well. If the user types in the Hometown/Nickname inputthen tabs out then input disables. How can I fix this code to meet the second requirment?
Update
I am not opposed to getting some help from jQuery. I do not want to throw out my view model binding entirely.
Fiddle
HTML
Name: <input type="text" data-bind="value: userInput, valueUpdate: 'input'" /><br />
Hometown: <input type="text" data-bind="value: Hometown, disable: Hometown" /><br />
NickName: <input type="text" data-bind="value: Address, disable: Address" />
JavaScript
function MyViewModel() {
var self = this;
self.userInput = ko.observable();
self.Hometown = ko.observable();
self.Address = ko.observable();
self.userInput.subscribe(function () {
readDatabase(self);
});
}
ko.applyBindings(new MyViewModel());
function readDatabase(self){
if(self.userInput().substring(0,1) == "a"){
self.Hometown("A town");
self.Address("A address");
}
else {
self.Hometown("");
self.Address("Other address");
}
}

You could use an extender to provide a flag indicating where the data came from:
ko.extenders.isServerSet = function (target, value) {
target.isServerSet = ko.observable(value);
return target;
};
function MyViewModel() {
var self = this;
self.userInput = ko.observable();
self.Hometown = ko.observable().extend({
isServerSet: false
});;
self.Address = ko.observable().extend({
isServerSet: false
});;
self.userInput.subscribe(function () {
readDatabase(self);
});
}
ko.applyBindings(new MyViewModel());
function readDatabase(self) {
if (self.userInput().substring(0, 1) == "a") {
// don't overwrite user-provided values
if (!self.Hometown()) {
self.Hometown("A town");
self.Hometown.isServerSet(true);
}
if (!self.Address()) {
self.Address("A address");
self.Address.isServerSet(true);
}
} else {
self.Hometown("");
self.Address("Other address");
}
}
Name: <input type="text" data-bind="value: userInput, valueUpdate: 'input'" /><br />
Hometown: <input type="text" data-bind="value: Hometown, disable: Hometown.isServerSet" /><br />
NickName: <input type="text" data-bind="value: Address, disable: Address.isServerSet" />
Updated fiddle

Related

AngularJS input checkbox model?

I have this HTML:
<div>
<input type="checkbox" ng-model="EmailToUser" />
<input type="checkbox" ng-model="EmailToOwner" />
</div>
And this in my controller.js:
$scope.EmailToUser = true;
$scope.EmailToOwner = false;
$scope.Save = function() {
if($scope.EmailToUser) {
alert("I'm supposed to email the user.");
}
if($scope.EmailToOwner) {
alert("I'm supposed to email the owner.");
}
}
This doesn't work, when I click the checkbox the values true/false are constant for some reason. EmailToUser is always true and EmailToOwner is always false regardless of the checkbox state.
But, if I change the code to this:
<div>
<input type="checkbox" ng-model="EmailToUser.Value" />
<input type="checkbox" ng-model="EmailToOwner.Value" />
</div>
And controller.js:
$scope.EmailToUser = {};
$scope.EmailToUser.Value = true;
$scope.EmailToOwner = {};
$scope.EmailToOwner.Value = false;
$scope.Save = function() {
if($scope.EmailToUser.Value == true) {
alert("I'm supposed to email the user.");
}
if($scope.EmailToOwner.Value == true) {
alert("I'm supposed to email the owner.");
}
}
It works. Why? I can't seem to figure the differences between #1 and #2.
Am I not creating new objects the same way inside the scope and assigning a true/false value in both ways?
controller.js(code)
$scope.EmailToUser = true;
$scope.EmailToOwner = false;
$scope.save1 = function(EmailToUser,EmailToOwner){
if($scope.EmailToUser) {
alert("I'm supposed to email the user.");
}if($scope.EmailToOwner) {
alert("I'm supposed to email the owner.");
}
};
controller.html
<div>
<input type="checkbox" ng-model="EmailToUser" />
<input type="checkbox" ng-model="EmailToOwner" />
</div>
<button type="button" ng-click="save1(EmailToUser,EmailToOwner)">click</button>
This code works for me.There is some scope issue.

How to set a different custom validity for different inputs

Can the javascript below to individually have different custom validity depending on what information is actually being entered in the field. eg. For Name: "please enter a name". For Location: "please enter a location.
The loop part in the script is confusing me a little!
HTML
<form id="sidebarform" onsubmit="return false" method="post" name="myForm" >
<input type="text" name="name" id="username" placeholder="Name (eg. Rob James)"required><br>
<input type="text" name="location" id="userlocation" placeholder="Location (eg. Wacol)" required><br>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
JAVASCRIPT
<script >
$(document).ready(function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Please enter a name.");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
</script>
I was following this question for the initial custom validity.
HTML5 form required attribute. Set custom validation message?
How about using a selector other than just getting everything by tagName, and then set whatever validity you want
$(document).ready(function () {
$('#username').on({
invalid: function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Please enter a name.");
}
},
input: function(e) {
e.target.setCustomValidity("");
}
});
$('#userlocation').on({
invalid: function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Please enter a location.");
}
},
input: function(e) {
e.target.setCustomValidity("");
}
});
});
FIDDLE

Changing multiple textboxes with dropdown knockout

I have the following HTML:
<select id="EmpName" data-bind="value: Employee.EmpName, event: { change: $root.updateEmployee }"></select>
<input disabled type="text" id="EmpNum" data-bind="value: Employee.EmpNum, valueUpdate: 'input'" />
<input disabled type="text" id="EmpClass" data-bind="value: Employee.EmpClass, valueUpdate: 'input'" />
<input disabled type="text" id="EmpDept" data-bind="value: Employee.EmpDept, valueUpdate: 'input' " />
<input disabled type="text" id="EmpStat" data-bind="value: Employee.EmpStat, valueUpdate: 'input'" />
And it's bound by the following ViewModel:
generalViewModel = function (thisData) {
var self = this;
this.Incident = ko.mapping.fromJS(thisData.Incident);
this.Employee = ko.mapping.fromJS(thisData.Employee);
this.updateEmployee = function () {
var employeeName = self.Employee.EmpName;
$.getJSON('/Incidents/GetEmployee', { EmployeeName: employeeName }, function (data, status, xhr) {
var newEmp = ko.mapping.fromJS(data);
self.Employee(newEmp);
});
}
this.refreshData = function (incID) {
GetIncidentGeneralInfo(incID, node);
}
this.savetoServer = function (incID, buttonID) {
var incident = ko.toJSON(self.Incident);
var employee = ko.toJSON(self.Employee);
$.post('/Incidents/SaveIncident', { IncidentID: incID, JSONIncident: incident, JSONEmployee: employee, button: buttonID }, function (data, status, xhr) {
self.refreshData(data);
});
}
}
ko.applyBindings(new generalViewModel(data), document.getElementById(node));
Everything is working quite nicely, with the exception of the updateEmployee function. The JSON is returning the new Employee information, but the textboxes aren't updating. I'm doing something silly incorrectly, and I can't quite figure out wat
Instead of
var newEmp = ko.mapping.fromJS(data);
self.Employee(newEmp);
You should do
ko.mapping.fromJS(data, self.Employee);
This will update all of the observable properties on self.Employee that were created by the first call to ko.mapping.fromJS.

Knockout.js enable save only if value change

I have a simple html page with value input and save button.
I want the save will be enabled only if the value is changed (somtimes is initialized and somtimes not.
I've tryied few things without any success
HTML
<input type="text"
placeholder="type here"
data-bind="value: rate,"/>
<button data-bind="click: save">Save</button>
JS
var viewmodel = function () {
this.rate = ko.observable('88').extend(required: true);
};
viewmodel.prototype.save = function () {
alert('save should be possible only if rate is changed);
};
Also on jsfiddle
Should be able to achieve this with a computed observable and the enable binding.
See http://jsfiddle.net/brendonparker/xhLrB/1/
Javascript:
var ctor = function () {
var self = this;
self.originalRate = '88';
self.rate = ko.observable('');
self.canSave = ko.computed(function(){
return self.originalRate == self.rate();
});
};
ctor.prototype.save = function () {
alert('save should be possible only if rate is changed');
};
ko.applyBindings(new ctor());
HTML:
<input type="text" placeholder="type here" data-bind="value: rate, valueUpdate: 'afterkeydown'"/>
<button data-bind="click: save, enable: canSave">Save</button>

Knockout Validation: isValid always evaluates to true

I have a quick example for Knockout Validation that I'm trying to get working, but for whatever reason isValid() on my validatedObservable is always returning true.
The JS:
var vm = function () {
self = this;
self.val1 = ko.observable('').extend({
required: true
});
self.val2 = ko.observable('').extend({
required: true
});
self.valid = ko.validatedObservable(self);
self.checkValid = function () {
alert(self.valid.isValid());
}
return self;
};
ko.applyBindings(new vm());
The Markup:
<input type="text" id="value1" data-bind="value: val1" />
<input type="text" id="value2" data-bind="value: val2" />
<button data-bind="click: checkValid">Is it valid?</button>
Any ideas as to why self.valid.isValid() always returns true?

Categories