I have a form on my page where one of the items input is a list of services available, and there are buttons to add and remove inputs for more or fewer services (i.e. enter first service click add service button and another service input spot appears, click remove service button and the last service input spot is removed)
Now I need a way to handle that input information on the back end using node.js and express of course without knowing ahead of time how many services are entered. I've read in other places about posting to an array but I don't know how that works with node.js/express.
Get all the fields that can be added /removed via an array of values in the html form. On the server side, the array with be available under req.body.
Note - You will need body parser or something similar to get hold of the form inputs.
Also, if you are using ajax, serialize the form inputs before posting the form.
So for that would I just make the name properties of the inputs things like "service[0]" and "service[1]" and so on?
Related
I have to create a large form that will at the submit at the end.
However since this form is large, it is split into smaller steps. Each step is displayed on the same page but only accessible in order (so first have to complete step 1 before being able to open step 2 etc).
Therefore I need to validate the inputs for each section before giving access to the next.
1.Should I break apart the form (so create 5 forms that each get validated on submit and then have a final button that checks them all and sends them off to backend)
Or
2. can I keep it as one large form and is there a way to only validate certain parts of the form? From what I understand nesting forms is not possible
(I am using jquery)
As you said, the steps are merely a UX improvement to a long form. So stick to one form tag and validate the inputs either on blur / input for each field or when your user is about to move from one step to the next.
You could maintain a small object with the state of each step and upon submit validate that each step is marked as "validated" before sending your request to the backend.
Alternatively, as forms can be tedious to validate properly, have a look at the many libraries out there that could help you in the process.
I'm trying to build a way to update a user profile one question at a time.
Essentially I want a div on my page that displays a form that lets the user submit the most important information, say firstname. When that has been filled out (success on the form) I want to refresh that div and show the second most important form, for say lastname, or if that is already filled in then birthday and so on.
Much like linkedin prompts you to add one more piece to your profile.
How would you do it?
My first thought was to use elements. But I need to fetch existing profile data to populate the form and how would the element get that data, abusing requestAction is not an option.
So I guess I in that case need to call a controller action that determines which element should be rendered, renders it to a variable and submits that (response->body) in json to the js that updates the page. Seems a bit .. unclean but should work.
Then we have view cells. They seem ideal for the task until I want to call them via ajax. That is not possible right?
So how would you go about to build something like that?
A form that needs to have the ability to be prepopulated with data if there is any and then refreshed automagically to display the form for the next piece of info needed.
View cells can't really be used in AJAX requests. This is not what they thought for.
The best thing you could do, if you want to keep the cell, is to make sure you followed SoC properly and put all your business logic into the model layer.
Now have a separate controller and action that is reachable from the outside throught a request (a cell is not) and return the data as JSON from there using the same code.
You could try to instantiate the cell in the controller action as well and send it's output. But honestly, I think that's a pretty fugly way of doing it.
Say, I have 50 input fields and in each field there is a dropdown list having options 1, 2, 3, .., 100.
Simply it can be done by inserting the long list of options in every input fields by commands.
Is there anyway by which we can write the full list only for one input field and refer it in the other input fields
If I'm understanding this question correctly this sounds like it would be a great case for using some server side logic like php or asp. A simple FOR loop would make it easy to maintain without adding the complexity / reliance on JavaScript that a client - side function brings into play.
You could use jQuery to append the options list to all dropdown lists with a certain class name in the $().ready() event handler.
JSFiddle Link
How the reset button (input type="reset") works under the hood?
(I want to extend it so it'll clear the inputs after post in asp.net mvc.)
It makes the browser set the current value of every form control back to its default value (as specified in the HTML, e.g. with the value or selected attributes).
Since it is client side, it cannot be extended with a server side technology like ASP.NET.
If you want to clear inputs after post, then forget reset, just send back the form without any data in it in the HTTP response.
There's a form.reset (docs) method that does the same thing as clicking the form's reset button.
Alternatively you could write some jQuery code that resets the form fields, the topic is covered in this question - Resetting a multi-stage form with jQuery
In my project i have a scenario like this if i click submit in a jsp which has two forms i have send data from two forms to destination,how can i do that,Please help me out.
If you mean that you want to send the data from the two forms in the same request, that is not possible.
You would have to copy the data, either from one form to the other, or from both forms into a new form.
You can put hidden fields in a form for the values that you need to copy to it.
The only way i think you can do this is completely bypassing the FORM- mechanism. You could put an onclick() javascript event on the submit buttons which calls a javascript function you could call sendAll() or something.
In this function you could get all your formfields and values and then send an XMLHttpRequest (this is the basic of an ajax request) with all that values in it.
That is indeed complicated but it seems to me that this is the only way it could work.