I use CGI C and try to use a combobox in a form. When i change selected value and press save button, before submitting the form i can see the selected value changes. It becomes 7 always. I can not find out why. Here is my code:
<form method=POST action="cgi-bin/aa.cgi?aa.xml" name="aform" onsubmit="return checkConForm(document.aform);">
<table class=conftable>
<td class=conftabletd>
<select name="aa" id="aa" >
<option value=2>2</option><option>1</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option>
</select></td>
</tr>
</table><br>
save
</form>
js :
function checkConfigForm ( form )
{
var selectLists = document.getElementsByTagName("select");
for ( var i=0; i<selectLists.length; i++ ) {
if (selectLists[i].id != null) {
alert(selectLists[i].id);
selectOpts(selectLists[i].id);
}
}
return true;
}
function selectOpts( selectId )
{
var selectList = document.getElementById(selectId);
var selectListLength = selectList.length;
if (selectListLength == 0){
appendOptionLastwValue( selectId, "" );
selectListLength = 1;
}
for (var i = 0; i < selectListLength; i++) {
selectList.options[i].selected = true;
}
return true;
}
function submitform( form )
{
if(form.onsubmit() == true){
form.submit();
}
Obviously you are setting every option of the SELECT object to TRUE here one after another:
for (var i = 0; i < selectListLength; i++) {
selectList.options[i].selected = true;
}
after submitting the form, the last option ( options[6] = 7 ) being selected as the result.
Related
I am using primeng p-virtualScroller for implementing loading data with scroller.It is working fine.But I am facing the below issue:
When the search result is less still it shows the scroller and emplty list items.
Below is the code I am using in Html:
<p-virtualScroller [(value)]="employeeList" scrollHeight="300px" [itemSize]="20" [rows]="pageSize"
[(lazy)]="lazyLoading" (onLazyLoad)="loadCarsLazy($event)" [(totalRecords)]="totalEmployees">
<ng-template let-emp pTemplate="emptymessage" *ngIf="searchResultMsg">
<span>{{searchResultMsg}}</span>
</ng-template>
<ng-template let-emp pTemplate="item" let-odd = odd *ngIf="searchResultMsg===''">
<div (click)="selectEmployee(emp)" class="pl-2 search-list" [class.odd-row]="odd">{{emp.name}} </div>
</ng-template>
</p-virtualScroller>
Below is the issue I want to explain(see the screen shot)
I got the solution to fix the above issue. I update the value of pageSize variable according to the total records available return by API(COUNT)
Code:
callAPIToSearch(searchValue, rowOffset) {
if (!this.isProcessing) {
this.isProcessing = true;
this.empService.searchEmployees(searchValue, rowOffset, this.pageSize).subscribe((apiResp: EmployeeSearchAPIResponse) => {
if (rowOffset == 0 && apiResp.response.COUNT === 0) {
this.searchResultMsg = `No record found, Please enter Relationship Manager's Surname and try again.`;
} else {
this.totalEmployees = apiResp.response.COUNT;
if (apiResp.response.COUNT <= 100) {
this.pageSize = apiResp.response.COUNT
} else{
this.pageSize =100;
}
this.employeeList = apiResp.response.employees;
}
this.isProcessing = false;
})
} }
In extending to the question how to disable submit button or make form invalid if i have any duplicates
Got Solution : here is my code
HTML
Submit
JS
$scope.myform.$setValidity('invalid',!((sorted[i-1] && sorted[i-1].voucherCode == sorted[i].voucherCode) || (sorted[i+1] && sorted[i+1].voucherCode == sorted[i].voucherCode)));
Somewhere in your Controller
$scope.hasDuplicate = function() {
var sorted;
sorted = $scope.csTagGrp[0].csTags.concat().sort(function(a, b) {
if (a.keys > b.keys) return 1;
if (a.keys < b.keys) return -1;
return 0;
});
return sorted.some(function(nth, i){
if(i> 0 && i < sorted.length) {
return ((nth[i - 1].keys == nth.keys) || (sorted[i + 1].keys == nth.keys));
}
return false;
});
};
In template
<button type="submit" ng-disabled="hasDuplicate()"> Save </button>
On page load I checked few of check boxes . using following code
<li ng-repeat="template in alltest" >
<input type="checkbox" name="template" ng-model="template.isselected" value="{{template.id}}" id="{{template.id}}" ng-checked="isChecked(template.id)">
<label for="{{template.id}}" class="position-relative"><span></span>
</label>
</li>
isChecked function
$scope.isChecked = function(id){
var match = false;
if($scope.alltest!=null)
{
for(var i=0 ; i < $scope.alltest.length; i++) {
if($scope.alltest[i].tmp_id == id){
match = true;
}
}
}
return match;
};
When I click on button to get those checkboxes then didn't get those check boxes
angular.forEach($scope.alltest, function(template){
if (template.isselected)
{
alert(template.id)
}
})
If I again deselected those check boxes and again select then i get value..but on page load by default few of check boxes coming with true option and directly i click on submit button then didn't get those checked check box
what is wrong with this code? please help me to solve this
ng-model is defult undefined. When checkbox is checked ng-model create property. that is why you get only checked checkbox when form submitted. You need define false checkboxes also inside isChecked function
ng-checked="isChecked(template.id, $index)">
js
$scope.isChecked = function(id, index) {
var match = false;
if ($scope.alltest != null) {
for (var i = 0; i < $scope.alltest.length; i++) {
if ($scope.alltest[i].tmp_id == id) {
match = true;
}
}
}
if (!match) $scope.alltest[index].isselected = false
return match;
};
This may be very simple but I can't seem to be able to successfully get the logic I want.
<div class="group-title" ng-class="{'group-hasError': !isValid(orderItem)}">
As you can see I'm adding a class group-hasError if the function isValid(orderItem) returns false.
Now the issue is that this is called on page load. But I don't want to call this function on page load rather when a submit button is called
<button id="add_modified_item" ng-click="isValid(orderItem)" class="btn btn-primary btn-fixed-medium pull-right">
How can I achieve this?
This is the function;
$scope.isValid = function(orderItem) {
var count = 0;
//By default make it true
var IsAllSelected = true;
angular.forEach(orderItem.menu_modifier_groups, function(group) {
var count = 0;
angular.forEach(group.menu_modifier_items, function(item) {
count += item.selected ? 1 : 0;
});
if (count == group.max_selection_points) {
IsAllSelected = true;
} else {
//if one item failed All select do return false
IsAllSelected = false;
}
});
return IsAllSelected;
}
Any advice appreciated
Defalut set
$scope.setValidClass=false;
View
<div class="group-title" ng-class="(setValidClass)? 'group-hasError':'')}">
set model with
//if IsAllSelected=false then set IsAllSelected to true
$scope.setValidClass=!IsAllSelected;
return IsAllSelected;
I wrote a simple filter that gets a localized text. I use it in a list. When a word is not found I want to hide the item. I manage to solve the problem like this:
<ion-item ng-repeat="(key, data) in details" ng-if="key != 'Id' && key != 'Invoices' && key != 'Number' && key != 'Attributes' && data && key!= null" ng-show="(key | translate: clientCode:'Payments':'es').length > 0">
<p style="float:left; text-transform: capitalize;">{{key | translate: clientCode:'Payments':'es'}}:</p>
<p style="float:right;">{{data}}</p>
</ion-item>
However I am using the filter twice in each item which makes me feel weird. Is there a better way to do this? Thanks you all very much.
If it helps here is my filter code:
.filter("translate", function(Text) {
var data = null, serviceInvoked = false;
function realFilter(input) {
for(var i = 0; i < data.length; i++)
{
if(data[i].Field == input)
{
//console.log(data[i].Description);
return data[i].Description;
}
}
}
testFilter.$stateful = true;
function testFilter(input, clientCode, type, lang) {
if( data === null ) {
if( !serviceInvoked ) {
serviceInvoked = true;
var texts = Text.query({"clientCode": clientCode, "type": type, "lang": lang});
texts.$promise.then(function() {
data = texts;
});
}
return "-";
}
else return realFilter(input);
}
return testFilter;
});