How to collect data from two different routes/urls then at the end use the collected data to post a request to the server? - html

Lets assume that i have a URL http://localhost:3000/choose1 which will provide the user with different choices to choose from, after the user choose he will be redirected to http://localhost:3000/choose2 to choose another thing and then at the end i want to collect these choices upon it i will do a post request to the server.
So my question is what are the approaches to store these choices and forward it to the next URLs?
I am using expressJS

there are multiple ways to achieve what you want:
using functions as middleware for example: app.get('/custom/route/',functions1(req,res,next),function2(req,res,next),function3(req,res,next),..);
using request library you can combine as many you want
personally, i will prefer the first one

You can put all the the options on a multi step form (where the options are separated by JS on thefrontend). Then you only make need to make one submission at the end. This also means you only need one route to handle everything. Here is an example: https://www.w3schools.com/howto/howto_js_form_steps.asp

Related

Review before writing to database from UI

This is more of a question on design approach. I have an application which has the following details:
UI in Angular
UI uses an api which is in Node/Express
Database is just a JSON file for now.
I want to move to mongoDb from the JSON file. What I'd like is, whenever anyone uses the UI to make changes to the database, I'd like to review the changes before they are updated in the database. what is the best way to achieve this?
This was easier for me with the JSON file because I was creating a pull request on git where I would review all the changes and then update.
Things that I have thought:
Let the UI write to a separate clone collection(table) and then review them and update the main collection accordingly. Not sure if this is the right way to do it.
Are you yourself wanting to review changes, or wanting an end user to review before saving? If it's you, you have a few options:
You can create a mongodb collection of pending objects that will get moved to a different collection once they're approved. This is OK, but not great because you'll end up shuttling objects around and it's probably more reasonable to use a flag to do aggregate grouping instead of collection-based delineation
You can simply use a property on an object as a flag and send objects that are pending review to your db with that flag enabled (using some property like true, 1, or another way of saying "this is true/on/enabled etc.")
If you want an end-user to be able to save, you can use mongoose hooks/middleware to fire off validators or whatever you want and return a response with meaningful data back to your angular UI. From there, you can have a user 'review' what they're saving. This doesn't persist or get saved, it's only saved once they send everything back up again (if that's how you choose to build the save process).

How to fill initial values for select on HTML form from database?

I'm new here. Can you help me with a newbie question, please? Maybe provide a link to solution.
I have a RESTful service and a web form for editing a model (e.g. user preferences). I want to prepare initial values on form. I request "new" model from the service and it sends me a JSON that contains object with initial values set (for example gender or birth date). It is easy to fill text inputs with those values. But also form has several select elements which should be filled with options from a database. And then I can set appropriate initial options (id) from the model for those select elements.
What is the way to do this?
I see couple ways:
Service might send options together with the model in JSON;
Form can request options itself before getting initial values (but it is another request and if form has several selects it is several requests).
Is there any conventional or best practice way?

How to get default values on a form submitted via rest?

I'm surprised this hasn't been asked already. I have a form on a web page which is being submitted via a restful web service (it's actually using angular js). The question is how should I set default values on the form? (This is for creates as obviously on an edit I'll be getting values from the server anyway)
An example
Let's say we have a checkbox on the form to opt in/out of marketing emails.
I would like to receive marketing emails [x]
In this case the checkbox is defaulted to checked so they have to physically opt out. In the old world of generating html on the server I probably would have returned these defaults from the business layer and then generated the form html with the defaults set.
Solution 1
Set the default values in the client. As I'm using angular I could have a JS object that represents the default state of the form and use this to initialize the form on a create.
My problem with this approach is that it just feels a bit wrong to be putting business rules like this in the client.
Solution 2
Another option might be to hide fields that have default values and only let them be changed on an edit. This might be ok for some types of field but for our optin field they definitely need to review this. This could be done if the form initially displayed those fields without defaults, then when you click a button to continue the form is saved. The client could then do a get on the object just saved and display all fields with the now populated defaults.
I can't decide if I like this approach or not. It's more requests to the server so in that respect it's not very efficient. Depending on which fields have defaults it might look a bit odd suddenly being presented with some extra fields.
Solution 3
Finally we could create a rest web service to get the default state. I haven't seen any other examples of this so not sure of any conventions. Something like:
GET http://server/rest/myresource/default
Are there any conventions on this kind of thing? Something I've missed? Anyone done this themselves and found a way that works best?
Thanks
If you are talking about an editing form, you have some "defaults" (i.e. the already saved data) and the data that the user is inserting. So you basically get the data (via $http) and use it for extend the form fields (via angular.extend). Here is a fiddle which explains it better: http://jsfiddle.net/F9rD8/
After reading through your comments, I think the problem might be thinking of Angular framework as Presentation Layer. Yes - It is a client side framework, but when running on the client side, Angular provides the MVC Presentation Layer. The recommendation is to augment the presentation layer with Angular "Services".
You might want to have an Angular Business "Service" that provides the defaults for the new form.
In the Angular world, your Layered architecture is essentially on the client side with Views and Controllers forming the presentation layer and both client side angular services and Server side APIs forming the business layer.
Angular services - https://docs.angularjs.org/guide/services
Hope that makes sense.

Filter entries using form

I have an ExpressionEngine site that I'm building with Bootstrap. It's a site for volunteers to find projects to help with. On the home page I have a modal with a form for them to select when they're available and what categories of jobs they're looking for. Then they can click submit and it'll go to a new page with filtered entries.
I don't know if this is possible using the GET method or POST method on the form. I've figured out how to use the GET method and get a query string into my URL but I don't know how to use that data to filter my entries on the entries page. Or would using POST and JSON be a better option? I don't know really how to implement either so any help would be great.
Thanks a lot!
It depends on how the information you would like to show is stored.
If you are using MySQL (a common RDMS), or any other form of SQL Database for that matter, the most common way is to send your GET query string (for example) to your server, have a sever-side language (such as PHP) handle that request by accessing your database, and then echo the result. This can be done synchronously, or with AJAX.
For example, the flow of everything might look like this:
User selects an option (say, "Gardening Projects").
JavaScript converts the value of that input option to a query string and sends an HTTP request using the GET method.
The destination of this request is "filter.php" (for example).
"filter.php" access your database using an SQL query, which searches for any entries in your database, say, having a tag of "gardening".
"filter.php" echos a statement with those entries (or, better yet, returns a JSON object)
JavaScript then parses the resultant JSON object into the DOM, which displays as a bunch of links in a result area that your user can click on.
The question you have about how to handle this is very broad, so I would recommend simply doing some Google searches or looking around this site for resources that show you how to set up databases, access those databases with possibly PHP/SQL, and maybe even use AJAX to return those results, etc.
To get you started (these are in no particular order):
AJAX Tutorial
PHP - JSON encode
SQL tutorial
jQuery AJAX
I got it figured out with some help from #JoshBeam. It turns out that I was trying to make it way more complicated than it actually is. Rookie mistake. In the end I just ended up using method=get in my form and the setting the action as the page with the filtered entries. I then used php to echo the inputs into my EE channel:entries tag.
One thing I still haven't figured out is how to make it so that my query string will combine values for matching names. Currently I have checkboxes for days of the week, each with name="day" and different values for each day. If there are multiple checked, my query string becomes example.com/?day=sun&day=mon when I'd rather have it as example.com/?day=sun&mon. So if anyone has any tips on that, I'd welcome them! I also wonder if there's a way to add pipes between each value when I echo them in my EE tag so that I can have multiples - e.g. {exp:channel:entries category="1|2|3"}. But I have really yet to Google either of these questions so I'll do that.
Thanks!

Database and html DOM id mapping

I am working on a portal, where users can submit and retrieve data from a database via ajax and servlet responses.
My question is how should i not reveal the real ids of the database in the html DOM. To be more spesific, i need to know which is the best way for mapping between "real" and DOMS's ids, and if this should be happening on server or client side.
Thanks!
I think you would like to populate the doms with unique IDs to identify the element in the page. In that case there will be numerous ways.
easy one would be a Fancy value put in the dom like
dom_id = 'itu~#'+(your_id*1001)+'#rand()'
Then when requested you can retrieve your_id with the '#'separated and divide by 1001 .
OR
be more complex you may write any complex function
Happy coding.