Node.js Express POST only changed inputs to router - javascript

Here is the case - I have a node.js + Express app using MySQL database. I read data from a table (example Employee). I show the necessary data in a HTML form. So employee name, email, phone, address etc.
In the form the user can update all or selected fields and hit submit to update the record.
On update I call my router and read the form inputs using body-parser:
<form role="form" action="/employee/update" method="post">
Name : <input type="text" name="ename"/>
Email : <input type="email" name="empEmail"/>
.
.
.
</form>
Now the user can either change all the inputs or just one. However when I do the sql update I only want to update the fields that were changed.
My Current Solution
What I do right now is that I have a hidden input in the form that stores the name of any input that was changed by the user. So on my public js file, the jquery code onchange of input, reads the "name" property of the changed input and creates a comma separated string which it then assigns to the hidden input as value.
So if the user changes the name and email, the hidden input will look like:
<input type="hidden" name="FormHiddenInput" value="ename,empEmail"/>
So when the user clicks submit, on my router I just do:
var fieldName = req.body.FormHiddenInput;
Then I split it and extract names of the individual fields that were change and perform req.body on them again.
This process works just fine but I do not like it. It takes too much code and for loops go through.
Is there another way I can only get the names of the inputs/textarea/select etc that were actually changed in the form directly in the router?

You should update the whole row. It reduces verbosity and complexity in your code and the overheads are negligible.
mysql UPDATE statement - overhead for same values?

Related

How to get only changed input fields

I'm developing a settings component which should have input fields, that are filled with the current settings on the page load via Firebase.
They are essentially filled like this:
<input type="text" #name="ngModel" name="name" value="{{ data.name }} ngModel">
After clicking on a Save Button, either only the changed data or all the data should be written to the database.
Easy right?
Unfortunately when using the ngForm directive, formData.name.value returns an empty string, if the form remains untouched. Only after changing the input fields, the value is recognized.
How can I surpass this issue without a huge hassle?
As far as I know there isn't event an option to check if a single input field was tampered with. Only the whole form can be dirty or not.

Choose endpoint to send request if any field of the page was changed

Consider we have SPA.
SPA consists of several dynamic pages.
Also there are a form for each page.
I need to save data once any field was changed (for example user types something to the input and we need immediately).
The main problem is that some fields must send data to one endpoint, and some fields sends data to another endpoint.
Also, if some field was changed, there is a $watch for it in controller, and controller sets some value to another field, and these change also need to be saved.
What I can do in that situation? There are many fields, so I don't want to set a $watch for each field.
An alternative would be to use ngChange. It's difficult to show code since you didn't post any, but using ngChange would allow you to make things as general or as granular as you need - A set of inputs could use the same ng-change function or you can have an ng-change function for a single input field.
Wire up inputs in "group one" to use groupOneChanged.
<input type="text" ng-model="somethingAwesomeForSure" ng-change="groupOneChanged()">
<input type="text" ng-model="somethingElse" ng-change="groupOneChanged()">
Wire up inputs in "group two" to use groupTwoChanged and so on.
$scope.groupOneChanged = function() {
// make your api call for group one
};
$scope.groupTwoChanged = function() {
// make your api call for group two
};

Fetching and storing data from form fields (email, password) without user clicking a button using Angular, Javascript

I am newbie to Angular and Java-script and trying to figure the following problem. I would appreciate any inputs.
I have 2 fields in our div class. One of them is a form entry (email) and other one is a drop down menu which has some static values of "occupation" where a user can select one from it. Both of them are in the same row.
I want to repeat this row (for second entry) as soon as the user finishes typing the valid email address in first row/entry. Also I want to store the values of first row in an array that is in the controller.
I want to do same thing for second entry and so on.
Once the user hits "OK" at the bottom, I want take an action on the array that has all the above values. I have the action defined and it works for a single entry but I am unable to figure out 2 things:
How can I store values of each row/entry in an array without user clicking any button but just on the event of completing typing the email address?
How can I automatically create a new row when user finishes typing the email on previous row? Is ng-repeat a good option?
Any help would be much appreciated. I just want to get started in right direction.
You should consider, that email addresses can be prefixes of each other - or at least that most of the regular expressions checking for validity of an email address will already allow "a#example.c" and not wait for the complete ".com".
Besides that, from a user perspective I would like it more to at least press enter to commit my inputs.
The best thing to do is probably to create the new line when you start to enter something in the previous one and just let the user decide when to switch to it (by clicking or hitting the tab key). When he or she enters something there you can then submit the data from the current line.
To check if the email address is valid you can use input type email in angular[1].
<input type="email" ng-model="user.email" name="uEmail" required="" />
[1]https://docs.angularjs.org/guide/forms

Radio buttons and checkboxes. Prevent changing of the value attribute

So you have a checkbox or a radio button with a predifined value to be sent to the database:
<input name="statement" type="radio" value="AWENSOME">
But someone or a script, with bad intention can easily change the value of your checkbox/radio button with for example a basic "browser page inspect" and then send other value to the databse. For example:
<input name="statement" type="radio" value="NOT SO AWENSOME! STUPID">
How can one prevent that guys? Thank you.
No, you can't, the best way is to gather all allowable input values in the database and check those values everytime on the server. It is easy in case of inputs like checkbox, select, radio, because you know exactly what the values can be. In case of text inputs, you have to use regex and sanitanization.
Maybe something like this in your model would help if your are using php:
if ($data['statement'] == 'AWENSOME' || $data['statement'] == 'FOOBAR' )
{
$statement = $data['statement'];
} else
{
// abort the app or return an error to the user
}
You cannot totally prevent the user from modifying the html scripts in the browser, but you can prevent unnecessary data to enter in your database..
In order to prevent that, you should have a validator in your php scripts in the server side.
There are many ways in preventing invalid data to enter in the db:
make a list of valid values in the database and once the user selects it, the server will check if the value in the checkbox or radio is existing
make the value fo radio/checkbox an encrypted or lets say there is some unique format like zkdie23doo44s that can be identified by your server..
periodically, check the html checkboxes and reload the values based from the original html script in the server
hope this helped you get an idea or two..
You can't do that you have to check once again on the server side and for the boxes like check box you know the value and for text box you can use regular expression

mvc 3 razor cannot clear form value with validation class

I'm using MVC 3 with Razor and using unobtrusive client validation. Things are working great, but I want to be able to reset the form if a user decides he wants to start over or cancel his action. It seems that there is a lot of meta data attached to each form element when using the validation.
<input type="text" value="" name="User.FirstName" id="User_FirstName" data-val-required="The First Name field is required." data-val-length-max="50" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val="true" class="text-box single-line">
The jQuery snippet here shows my problem. When you try to manually reset the value of the text field, some other javascript is intercepting execution after I clear the value and it sets it back to what it was:
$("#btnReset").click(function () {
alert($("#User_FirstName").val());
$("#User_FirstName").val("");
alert($("#User_FirstName").val());
});
I'm looking for pointers here on how to clear form values when a user clicks a button. It seems like such a simple task, but I can find no documentation how to accomplish this and I haven't found anything here or elsewhere to help.
I was using an html input of type reset rather than the button type. The reset should not have been used in this case.

Categories

Resources