#AstroDB input support

10 messages · Page 1 of 1 (latest)

remote vine
#

@blissful hearth

---
import { db, desc, URLS } from 'astro:db';


// Obtener el último ID de la BD
const lastID = await db.select({id: URLS.id}).from(URLS).orderBy(desc(URLS.id));
console.log("LastID" + lastID[0].id)

const idsum1 = lastID[0].id + 1;
console.log("idsum1" + idsum1)

if (Astro.request.method === 'POST') { // Doesn't work
  const formData = await Astro.request.formData();
  const inputURL = formData.get("inputURL");
  console.log("inputURL: " + inputURL);
  // Maneja el valor del input como necesites
}
---

<html>
  <body>
    <div class="form">
      <form method="POST">
        <h1 class="h1URL">Introduce your URL</h1>
        <input type="text" id="inputURL" name="inputURL" required />
        <button type="submit" class="btnSubmit">SHORT</button>  
      </form>
      <p class="pURL"></p>
    </div>
  </body>
</html>

<script>

    const button = document.querySelector('.btnSumbit');
    button?.addEventListener("click", (event) => {
        event.preventDefault();
        shortURL();
        
    })
    // Función
    async function shortURL() {
        
        // Obtain inputURL
        const inputElement = document.getElementById("inputURL") as HTMLInputElement;
        
        //DB check
        // Convierte xxxxxx dónde las x sean numeros y letras random
        let result = '';
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        for (let i = 0; i < 6; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        const shortURLr = result;

        // Show result
        const pURL = document.querySelector('.pURL');
        pURL.innerHTML = 'Your short URL is: ' + shortURLr; 
        console.log("shortURLr" + shortURLr);
    }
    

    
</script>
<style>...</style>
#

I have output server with Vercel SSR

blissful hearth
#

is it working? On mobile so the syntax highlight doesn’t show haha

remote vine
#

if (Astro.request.method === 'POST') { // Doesn't work
const formData = await Astro.request.formData();
const inputURL = formData.get("inputURL");
console.log("inputURL: " + inputURL);
// Maneja el valor del input como necesites
}

This doesn't work, at least the console.log

blissful hearth
#

You would expect to see the console log come only when you submit the form and it would print the the terminal where you started the dev server

#

You can also try adding a console log inside the POST code block at the top to make sure it’s running at all

remote vine
#

Now works lol

remote vine
#

Do you have Github?

blissful hearth
remote vine