Javascript function activating input fields after hit checkbox - javascript

I inherited the old code and trying to add some new functions. For now there is large form in 2 column table, first column has checkbox (yes/no), second input fields / textareas with description.
At checkbox are on the onclick event to check the condition and according to him, activate or block the second column.
I removed all the if statements and made big function full of if which check checkbox state and changing by element id state of input fields.
I wonder if you have idea how write univesal function to activate inputs in td next to that in which the checkbox is.
Function consisting of dozens of conditions to check the condition of one field and changing the status of another is a bad practice thats why I am asking you guys how to bite it.

Related

Select and deselect row after another selection - ReactJS Hooks

Have a list of licenses plates that start with a disabled button and no line selected.
Here is what should to do:
When select a row, button "Go foward" enable;
When select a row already selected, deselect it and disabled button again.
When list have a row selected and user click in another row, deselect old row and select the new one.
The snippet code i did:
https://codesandbox.io/s/busy-galileo-mw3p3?fontsize=14&hidenavigation=1&theme=dark
Facing this problems:
Need 2 clicks to set css style 'custom-col-row-active' to row selected. Button is enable already first click.
When a line is already selected, when you click on the other lines, they are selected as well. With 1 click on a selected line, all are deselected.
I know need use data table to deselect line already select, but i don't know how to get the full data table, since i only get the data when i click in a specif row.
Any tips here?
#Rafael, I don't know much about tabler-react, but this is just my suggestion for you. Your handleSetActivedRow seems to have problem. I don't understand why you have written onClick={(e) => handleSetActivedRow(e)}. You are calling a function inline when onClick itself and again you are taking it to an other function handleSetActivedRow. This is bad coding; instead you can do like this onClick={handleSetActiveRow}. secondly, you need to check again your handleSetActiveRow function. I don't understand why you want to return? when it is not necessary. What you need to check on is that you want to set the className to -active when you click on an element.

Remove entire table row having checkbox which was unchecked , when user click on submit button

I have table with checkall/uncheckall check box functionality and table is having and some input fields like text boxes, dropdowns. User should select at least one checkbox for processing the data in the table. That is working fine. For example table is having 3 rows and user select any one checkbox and click on submit button then remaining two table rows should be removed and not being submitted. I tried with the below one .
$("input:not(:checked)").each(function () {
$('input:not(:checked)').closest('tr').remove();
});
But this one is removing entire table. So I need only those table rows which are unchecked should be removed. Any help would be greatly appreaciated.
Assuming you don't use <th></th>, your header row also got selected because that checkbox is also unchecked. May be that will be the reason all rows got deleted. Console input:not:(:checked) it . It will give clear idea.
Edit:
Then try this, may be this will work
$('#tableid').find('tr[input:not:(:checked)]').each(function()
{
$(this).remove();
}
It seems to be working fine for me: https://jsfiddle.net/r9zgvbqu/7/
Two comments, you are using the .each() function to do something for all elements selected by "input:not:(:checked)", but in that function selecting everything again. so you are just doing the same thing multiple times. You can skip that step, and also skip the .each()-$(this) combination that has been suggested, by straightup doing:
$("input:not(:checked)").closest('tr').remove();
This removes all the you want.
EDIT: Your problem is that you are selecting all non-checked inputs, including text inputs etc. You can specify the type of input you are selection: input[type=checkbox]:not(:checked)
In general, I would avoid selecting elements by their tag name. It's better to give the relevant checkboxes a class, and you can select them by class.
Here is a fixed version of your fiddle: https://jsfiddle.net/927sdh8n/
And here is a simpler and safer version using classes: https://jsfiddle.net/qz53wfxc/

Removing last ng-form from validation in angularjs

I have a master detail form in angularjs. The form is typical transactions form with some master data like Name, type etc. The detail part contains many lines (can be added and deleted). Each line has input fields for Credit, Debit and Account Number. I have been able to add the required validations both on master portion of the form and detailed portion as well using ng-form directive. My form looks like following
you can see that I already have Add Row button that will add row on detail portion. Now I have strange requirement that is to add a row automatically when user is entering data in last row. I have even done that using ng-focus directive but the next part of requirement is to remove the last row from validation context if it is not used (not dirty) and successfully submit the remaining form. How can I do it in angular. Please find the Code on Plunkr and guide me how I can remove last row of detailed portion from validation context if it is not dirty.
ngRepeat sets $last to true for the last row. So you can just disable ng-require if an input is on the last row.
You could do something like data-ng-required="!entry.DebitAmoun && !$last" and similar for each input.
The above will work if you assume that last row always contains empty input fields. Whenever the user adds any value on the last row, then a new row is created.

Cannot pass Array elements to restore a form

I am beginner in JavaScript. For exercise, I try to restore a form (at page closed / page reloaded) using cookies. I take the following steps:
Create an array with form selections
Convert to string
Create cookie
Retrieve cookie
Extract string
Convert to array
... Until here everything goes perfect. But the next step doesn't work anymore...
Pass array values to restore the form elements
Regardless the form selections (present correctly in the retrieved array) after reloading page I get every time only last the radio button checked (even if I increase or reduce the number of buttons) and all checkboxes checked.
I tried anything I know to find the error but no success. I also converted the string "true"/"false" values to Boolean, but no change.
The real situation:
frm[0]=true
frm[1]=false // for two radio buttons
frm[2]=false
frm[3]=false // for two checkboxes
document.getElementById("myradio1").checked=frm[0]
document.getElementById("myradio2").checked=frm[1]
document.getElementById("mycheckbox1").checked=frm[2]
document.getElementById("mycheckbox2").checked=frm[3] // pass the array values to the form elements
But, as I said, any values I pass I always get selected the last radio buttons and all checkboxes.
Probably this code doesn't follow the "best practices" of JavaScript, but before I change it I want to understand why it behaves like this. I thank you in advance for your comments, because I want very much to clarify this issue.
It happens because for a radio button, only one radio button can be clicked in a group of radio buttons.
And for the checkboxes, you are using the same ID twice, so the change isn't actually reflecting on the other checkboxes.

jqgrid password field not only in edit mode

I'm trying to implement 2 things:
Adding edittype:'password' to one of my columns so I will be able to see *** instead of the actual value itself. The problem here is that I see *** only when I edit the row, but when I select another row, I save the old row, and disable it from editing mode, but now when it's not an input I can see the actual value - so it's like I never used password input. What do I need to do in order to see the value as password also when I'm not in edit mode??
I want to condition the password column not to be on all rows of this column, is that possible to do? I want to check another value from the row and only if it equals a certain value I want to set the field as password, and if it's not equals to leave it as a regular field. How can this be done?
1) When you select another row and change the old row to disable edit mode, replace all characters in the textbox with a '*' after saving the row. Since it's saved you don't need to maintain the value since it's not an input anymore.
2) use jquery selectors to selectively place the password attribute based on the value of the other row, also selected using a jquery selector. Since it seems like a grid you are working with all cells should have a unique identifier to use for selection.
The conditioning of the column would probably be easiest to set after rendering. Without having more information about the grid layout and specifics about the columns some of this is guess work.

Categories