Ooker•7mo ago

How to pass value from one form to another?

I want to design a form which has two input text field. What users type in field 1 will be passed to field 2. How can I do this in Deno Fresh? Here is the current code, suggested from https://discord.com/channels/684898665143206084/991511118524715139/1194335634228256828 routes/index.tsx:

import FormIsland from "../islands/form.tsx";

export default function Home() {

  return (
    <div> 
      <FormIsland />
    </div>
  );
}

import FormIsland from "../islands/form.tsx";

export default function Home() {

  return (
    <div> 
      <FormIsland />
    </div>
  );
}

islands/form.tsx:

import { useState } from "preact/hooks";

export default function FormIsland() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        name="Field 1"
        type="text"
        onInput={e => setInput(e.target.value)}
      />
      <input
        name="Field 2"
        type="text"
        value={input}
      />
    </div>
  );
}

import { useState } from "preact/hooks";

export default function FormIsland() {
  const [input, setInput] = useState("");

  return (
    <div>
      <input
        name="Field 1"
        type="text"
        onInput={e => setInput(e.target.value)}
      />
      <input
        name="Field 2"
        type="text"
        value={input}
      />
    </div>
  );
}

It returns empty to me. Any idea?

2 Replies

Ooker•7mo ago

nevermind, it's just that I didn't see the form due to not doing css

Deno AI Helper•7mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you've provided, there doesn't seem to be any obvious syntax errors or mistakes. The logic for passing the value from one input field to another appears to be correct, assuming that the useState and onInput event handler are being used as intended with Preact. The code you've shown should theoretically work to copy the value from the first input field to the second input field in a Preact component. When a user types in the first input field, the onInput event handler is triggered, which updates the state with setInput(e.target.value). The second input field is then controlled by this state, meaning it should display whatever is currently stored in the input state. Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of the advice given. If the problem persists, it might be helpful to ensure that the Preact environment is set up correctly and that there are no other conflicting pieces of code or issues outside of what has been shared.

Helpful Links: Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more Form submissions | Fresh docs Interactive islands | Fresh docs Forms | Fresh docs