#Render contents of a form on a server rendered page

8 messages · Page 1 of 1 (latest)

bold flame
#

Hi all i'm after some general guidance as to how I could take the contents of a form and render it as HTML I have SSR set up with npx astro add netlify
My pages directory:
index.astro
api/[render].astro

I was thinking my index.astro page contains a form that posts a fetch('/api/render') inside the function to fetch I include a window.location.assign('/api/render'). On the render.astro page I think I somehow get the form data from params? in to props and render it to the page,
Do I send the form data URLEncoded? I'm a little baffled here. Thanks

forest cliffBOT
#

Hi @bold flame. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, you can indeed use Astro's server-side rendering (SSR) capabilities to handle form submissions and render the form data as HTML. Here's a general approach:

  1. In your index.astro file, create a standard HTML form that submits data to the server. You can use the fetch API to send a POST request to your /api/render endpoint when the form is submitted. Make sure to prevent the default form submission behavior which causes the page to refresh.

  2. In your api/[render].astro file, you can access the form data from the request object. The Astro.params object contains the dynamic parameters from the URL. If you're sending the form data as URL parameters, you can access them from Astro.params.

  3. Once you have the form data, you can use it to render your HTML page. You can pass the data to your Astro components via props and use it in your HTML.

Here's a simplified example based on the information in the extracts:

In index.astro:

<form id="myForm">
  <!-- form fields here -->
  <button type="submit">Submit</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // gather your form data here
    const formData = new URLSearchParams(new FormData(e.target)).toString();
    fetch('/api/render', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: formData,
    }).then(() => {
      window.location.assign('/api/render');
    });
  });
</script>

In api/[render].astro:

---
const { slug } = Astro.params;
// use the slug to fetch your data
---
<!-- render your HTML here using the fetched data -->
#

@bold flame kapa.ai is still learning and improving, please let us know how it did by reacting below

bold flame
#

@forest cliff can you show me the code i would use to render the html on the api/[render].astro page

forest cliffBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information provided in the extracts, you can use the form data to render HTML in your api/[render].astro file. However, the extracts do not provide a specific example of how to do this in an api/[render].astro file.

Here's a general example of how you might render HTML in an Astro file:

---
// Fetch your data here using Astro.params
// For example:
const { slug } = Astro.params;
let article;
try {
  article = await fetchApi({ endpoint: 'articles', wrappedByKey: 'data', wrappedByList: true, query: { 'filters[slug][$eq]': slug || '', }, });
} catch (error) {
  return Astro.redirect('/404');
}
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{article.attributes.title}</title>
  </head>
  <body>
    <main>
      <img src={import.meta.env.STRAPI_URL + article.attributes.image.data.attributes.url} />
      <h1>{article.attributes.title}</h1>
      <p>{article.attributes.content}</p>
    </main>
  </body>
</html>

In this example, the form data is used to fetch an article from an API, and the article data is then used to render an HTML page. Please note that this is a simplified example and you might need to adjust it based on your specific requirements.

For more detailed information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/server-side-rendering/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: