to validate checkbox input for table using multiple rows - html

i using js to add multiple row in a particular table, but when submit the form all check box having the same value, so how can i validate this checkbox using js before submit so change value to if unchecked, i trying on that but got no solution, does any one this before,
thanks in advance

What are your checkboxes called? Do they all have the same name? You have two options. One is giving each checkbox an unique name, the other is giving your checkbox a name like checkboxes[]. The [] lets all the values be entered into an array so they don't overwrite eachother.
If you mean something else, you have to state more clear what you want, because it's a bit incomprehensible right now.

finally i found solution for my problem, thanks 'vindia' for the clue, i add checkbox with array, sol as below
in html
`<input id="abc[]" name="abc[]" type="checkbox" value="1">`
in js
for(var i=0;i<chkDefaultLength;i++){
if(!document.neworupdateevent["chkDefault[]"][i].checked){
document.neworupdateevent["chkDefault[]"][i].value=0;
}
}

Related

Multiple form labels - Lightbox

I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.
Errors is
Multiple form labels
What It Means
A form control has more than one label associated with it.
The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.
Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?
From W3Schools:
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.
One way to fix this other than changing IDs is to wrap the input in the label.
<label>
First Name
<input />
</label>
This is semantically correct and avoids the labels needing for and associated input id attributes.
You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)
See: https://stackoverflow.com/a/774065/2702894

Angular binding to form not show all binded values with ngModel

I am writing an angular page which is binding a object with alot of fields to a form with many input text field. It is strange but only the first two fields are binding with values while the rest of the fields are empty. I swap the 2nd and 3rd input fields and the 3rd input field value shows up in the 2nd row spot. The 2nd input field which has been moved to the third row is blank. I looked at the HTML code but I am not sure why? I am learning angular and not sure why not all the input fields should show values. I only show 3 input fields but in my code I have more than 10 input rows but only the first 2 are showing the binded values. Any help is appreciated.
Update: I figured it out. With refreshed eyes, I noticed the error
In my HTML, I was setting dual binding and all my #name="ngModel". I had this for all my input fields. The #name needed to be unique.
Update: I figured it out. With refreshed eyes, I noticed the error
In my HTML, I was setting dual binding and all my #name="ngModel". I had this for all my input fields. The #name needed to be unique.

Keep value in textboxes after adding row

i am currently working on to display the value in textboxes after adding row to the table. I am new to angular and seems i could not find the solution. At the moment, everytime i click on the Add button, the table will add new row but somehow the value that i have entered previously are gone. I need to make the value stays in the textbox every time the user adds new row.
Here is the source code that i have done:
https://stackblitz.com/edit/angular-hxduqp
Thank you.
That happens when you have multiple inputs with the same name.
One way to fix it is by giving your input names a suffix of your iterator i:
<input ... [name]="'from' + i" ...>
Here is your StackBlitz corrected:
https://stackblitz.com/edit/angular-bgdgpr?file=src/app/app.component.html
You just remove the name from the form control if not required else you need to provide the unique name to each control.
Working copy is here - https://stackblitz.com/edit/angular-gpq9nc

Highlight the newly added row in clr-datagrid

I have used clarity UI in my project and i have come across an issue where i want to select the row which is currently added to the clr-datagrid table .I've used clr-DgSelected directive and it gives me a select checkbox which i don't need and if i use [(clrDgSingleSelected)]="selectedUser" this will give me a radio option and it lets me to select the particular column with the radio option checked but the problem is not the radio button or checkbox i just want to highlight the newly added row how i can achieve this.
Any help would be appreciated Thank You
Since Clarity doesn't have the concept of a newly added row, you need to add that concept yourself. Each record could have a isNew or showHighlight property that would allow you to add a CSS class that will highlight it
<clr-dg-row *ngFor="let user of users" [class.highlight]="user.isNew">
<clr-dg-cell>{{user.id}}</clr-dg-cell>
<clr-dg-cell>{{user.name}}</clr-dg-cell>
<clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
<clr-dg-cell>{{user.color}}</clr-dg-cell>
</clr-dg-row>

Can't remove the value entered in the djFilteringSelect dojo control in xPages

I am using the djFilteringSelect control to show values in a dropdown as user type a value.
The lookup and typehead is working fine. The user type a letter and the dropdown allow the user to select a value which is then displayed in the dropdown field.
If the user now decide to remove the value first selected so that the combobox is empty and leave the field, then the first value in the list is now automatically filled in.
The consequence of this is that if the user have added a value there is no way to remove the value and leave the box emtpy.
I am using required=false for both the control and the dojo attribute but it does not seem to help. There are also a few other djFilteringSelect attributes I have tried like "Autocomplete" and "trim" but it does not work
Here is the code
<xe:djFilteringSelect id="test" type="select" store="jsondata" searchAttr="data" required="false" labelType="html" invalidMessage="Not valid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djFilteringSelect>
Initally the field is not required, but if the user have entered a value it is required.
My question is if there a way to prevent the djFilteringSelect control to always populate the field if I have previously added a value
I found someone who solved this in another stack overflow topic, by creating an empty entry in my data store. but I could not get this to work
Dojo: Select of empty value for FilteringSelect while required=false
I do this quite a lot. Right now I don't have a working sample to show you (since I moved to bootstrap - and have to code the selects by manually adding select2 controls) but something like this should do it...
I add an "empty" value at the top of my select - and that seems to work no matter whether I am using a combobox, djCombobox or combobox with select2 from bootstrap. My markup typically looks like:
<xp:comboBox id="inputLocationSelector" value="#{User.catchListType}" disableClientSideValidation="true">
<xp:selectItem itemLabel="(none)" itemValue=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[${Configuration.meta.listLocationTypeOptions}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
Then you could specify "(none)", "All" or " " for the "not-selected" value depending on your needs.
Validation is a different thing so just specifying "required=false" does not give you the "empty" value.
/John