Redirection upon POST request

[mahendrapaipuri]

Prerequisites

• I have read the documentation

What theme are you using?

core

What is your question?

Firstly, thanks for this awesome library, it makes complex forms more manageable and extensible. I have a situation where after posting the form data, the response will be either a redirect URL if form data passes all the server side checks or an updated HTML that shows the errors in current form page. I am submitting the form data in onSubmit callback via a fetch POST call.

As it is a case of server side rendering, the response of the POST call will be either redirected HTML page or updated HTML page as I said before. As I am doing the request with fetch, the browser neither redirects nor updates the page. I understood that fetch is not meant to do this sort of thing and we should resort to form submission using action if we want such behaviour. But it is not possible to use action with rjsf as onSubmit callback always prevents the default action.

So, after digging into several posts I ended up with a solution as follows:

const onFormSubmit = async (
    { formData }: IChangeEvent,
    event: FormEvent<any>
  ) => {
    console.log('Submitted Form Data', formData);

    const response = await fetch(POST_URL, {
      method: 'POST',
      body: formData
    });

    console.log(response);

    if (response.redirected) {
      window.location.replace(response.url);
      return;
    } else {
      const html = await response.text();
      document.open();
      document.write(html);
      document.close();
    }
);

I dont have an awful lot of experience in frontend development. So, I am not quite sure about the implications of such a solution. It seems to be a big hack to me. Could you please let me know if it is ok to have such a workaround?

Also, if someone can propose a better "realiable" solution, that would greatly help me. I guess this can be a frequent use case and I wonder how people get around this limitation using rjsf.

Cheers!!

[nickgros]

Tough to answer this without knowing about your existing architecture and security constraints. It seems sketchy to write HTML in client code. If you can control the backend service, then I would try to use a non-SSR API for your additional validation. If you cannot, maybe you could use some intermediate service like your own NextJS app so you don't have to write the SSR response to the document in the client.

Maybe you could reach out to other communities that focus on supporting general architecture problems like this, since this isn't really RJSF-specific.

[mahendrapaipuri]

Thanks a lot @nickgros for your response.

Well, it is to use for JupyterHub which uses SSR to post spawner form data. I was curious how others that use RJSF is handling similar situations, so posted here.

Actually, I found a better way to achieve this by using event.target.submit() which does POST the data as if it is from native HTML form action.

const onFormSubmit = async (
    { formData }: IChangeEvent,
    event: FormEvent<any>
  ) => {
    console.log('Submitted Form Data', formData);
   
    (event.target as HTMLFormElement).submit();
);

The above piece of code works given that we pass method, action props to Form component. The only little inconvenience is that the option values in SelectWidget are the indices of enums. Before submitting we just need to replace those option values with actual enum values.

Does it make sense to define a custom attribute on option element like index and use this attribute for the functional logic in getValue and set value attribute to actual enum value?

Cheers!

[mahendrapaipuri]

Finally, I ended up doing like the above comment. I made a custom SelectWidget component that set actual values in option values instead of indices of enum. It has been working very well. I am closing this issue as resolved.