I will be adding a record with very little user required information, and from a UX prospective, don't wish to direct the user to a blank "edit" page.
Instead, the user will click something, and a dialog requesting the minimum information will be presented, and upon a successful submission, the record will be displayed allowing them to use inline editing should they wish to modify.
What is the recommended design pattern to add the record? For instance:
Option
Present the dialog, user fills in the data and clicks "submit", the data is client side validated, and:
Use JavaScript to submit the form.
Server validates and either internally redirects to the page displaying the newly added record, or redisplays the previous page displaying the errors.
Option 2
Present the dialog, user fills in the data and clicks "submit", the data is client side validated, and:
Send data to the server via ajax post request.
Server validates and either responds with errors or the PK of the added record.
If successful, use JavaScript to redirect to the page with the PK to display the newly added record, else display the errors.
Option 3. ???
Please provide reasons why one patter is better than another.
My suggestion is to use a slightly modified version of option 2.
Once the validation in the server is successful, the record is inserted and the client gets the primary key of the newly created record, with javascript close the dialog (or modal) and add the relevant information of that record in the main page, this will let you avoid redirecting to another page.
Cheers
Related
How can I show the information I got from the place where I entered the title and text on the announcement page?
repo:https://github.com/qswezy/spa1
We have added the form and we want to show it in the announcements
Forms usually have target page. So, this is the page that will receive your submitted data, usually in some type of POST array (if you submitted it as a post.) If this assumes JavaScript, you probably need to run an Express server to do this.
Assume there is a process to be done for each user, the user may have filled up one or two forms already in the process. I want to code the UI (JS code) in such a way that the system only shows the form which is not filled, and the rest of them which are already completed are skipped.
My thoughts
On each FORM/page, check if the form is filled, and redirect the user to the next page. The issue in this approach is the time delay on each page, and then checking would irritate the user.
Check all 5 form's status once and then create his page redirects accordingly. The issue here is that this page path will be stored at what location? Because if the page path is removed from memory on page refresh or something like that would fail the whole process. What would be page path look like in JSON format?
What would be the best possible approach to such a UI problem?
Conditions:
For each form, an API call is linked, and each form can only reside on a new page.
I have a form that takes some input and sends a POST request back to a Spring Boot instance, which triggers a file download through content disposition header.
The browser handles the download perfectly but it does not navigate away from the page, which is the normal behavior.
Now, the inputs contain sensitive information that must not remain in the form.
I can only intercept the form's onsubmit function but I can not use ajax to make the requests because the server returns multiple pages depending the state of the data (i.e bad input, wrong information, etc)
Clearing the fields before submission erases the form and all data gets lost.
Is there a way to clear the fields before or after the form has been submitted?
So I have a NodeJS site and on the home page is a form containing some radio buttons. When the user clicks "Submit," I would like for the user to be redirected to another page based on the answer. This I have figured out (The buttons have an onclick attribute that changes the action attribute of the form element). However, I need to keep the data from the original form, so that after the user has "chosen their path," I know what path the took and the answers they made along it. Thank you in advance!
You could persist the client's state in a session. If you're using express, one alternative could be express-session. The way it works is that it assigns a unique identifier to the user in the form of a cookie and saves the data somewhere (memory, database, a file, etc. depending on which you choose). Then when the client makes another request, the server gets that data back with the identifier from the cookie.
I need to send form data to another page that will allow the user to do something in a form and return the result of that form back to the original page? Is this possible? I know it's not ideal, but the issue is that I need to make a "drop-in" solution that does not need to be integrated with other code. I know it's a very specific request and scenario.
I know how to send POST data that doesn't require any user input on the processing page. i.e. I can send POST data to 'calculate.php' which will do the math and send it back, but if I need additional user input on 'calculate.php', how can I still send it back?
An example of expected results would be:
Page #1: User enters a number and presses submit to go to next page.
Page #2: User enters a second number and presses submit to finish.
Back to Page #1: User receives sum of both numbers.
Obviously, this is a really redundant thing to do, but I'm trying to simplify the problem as much as possible.
EDIT: There a few restrictions I forgot to add.
Page #1 is not my application, I am developing Page #2 as a "drop-in" solution for Page #1. Essentially, I can only use Page #1 to call Page #2 and receive a response from it. The problem is that I need to be able to allow for user input on Page #2.
I know I can post to Page #2 and then post to Page #1 again, but what if I need to maintain the state of Page #1. For example, if there's an open Web Socket connection.
Please note, I understand that this may be impossible or extremely difficult, but if I don't ask I'll never know right?
You want it with PHP or any other language. If you are running Php on server side then you can use Global variables like $_GET and $_POST.
Page #1: Use Post/Get method to send data to second page.
Page #2: Receive all fields' values using Globe variables ($_GET and $_POST). You can use these values as default values of form fields. Now submit this data to page 1 using post or get method.
Back to Page #1: Here you will receive the data of first page from second page and newly posted data from page 2
Either of these should work:
Never leave the page - use AJAX / XMLHttpRequest to call out to other pages to process chunks of data
Do everything on page 1 using "postbacks" -- the form targets are the same page, there is a state variable like "stage=1", and you use JavaScript to add set hidden variables for any additional state that's needed.
... PHP state validation and processing for the different stages ...
... one or more blocks of HTML for the page (PHP if / else can be used to choose between multiple page views) ...
Edit for added restrictions:
Have page 2 use postbacks or AJAX to collect the additional information
I figured out a few ways to do it.
Update a Database (or Data Store of some sort, depends on security needs) and have Page #1 listen for events from a separate page (on the same server as the database). Very similar to the way PayPal's Instant Payment Notification (IPN) works. I was actually able to set up server sent events with it as well.
Essentially, Page #1 sends data to Page #2 where the user will perform the function and then Page #2 will send POST data to a listener somewhere (either on the same server or Page #1's server), the listener will update a database and Page #1 will be listening or pulling to an event handler that will send an update once the database updates.
Use JavaScript Child/Parent Window functions. This is okay if Page #1 and Page #2 are on the same server, but can get messy and browsers have a lot of restrictions and it varies depending on browser.
Page #1 will open Page #2 in a child window, after the user performs a function, Page #2 will call a function that accepts the result data on Page #1.