jordanreger•3y ago

preact form not working?

hi all, i'm just trying to make a simple form but for some reason it keeps submitting the form as if there's no onSubmit function... inputbar.jsx

/** @jsx h */

import { h, Component } from "https://esm.sh/preact";

export default class InputBar extends Component {
  state = { value: '' }

  onSubmit = e => {
    console.log("submit");
    e.preventDefault();
  }

  onInput = e => {
    const { value } = e.target;
    this.setState({ value });
  }

  render(_, { value }) {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="text" placeholder="enter your RSS URL" name="import" value={value} onInput={this.onInput}/>
          <button type="submit" style="visibility: hidden"></button>
        </form>
        <br/>
        <br/>
        <details>
          <summary>your feeds</summary>
          <div>feed list</div>
        </details>
      </div>
    )
  }
}

/** @jsx h */

import { h, Component } from "https://esm.sh/preact";

export default class InputBar extends Component {
  state = { value: '' }

  onSubmit = e => {
    console.log("submit");
    e.preventDefault();
  }

  onInput = e => {
    const { value } = e.target;
    this.setState({ value });
  }

  render(_, { value }) {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input type="text" placeholder="enter your RSS URL" name="import" value={value} onInput={this.onInput}/>
          <button type="submit" style="visibility: hidden"></button>
        </form>
        <br/>
        <br/>
        <details>
          <summary>your feeds</summary>
          <div>feed list</div>
        </details>
      </div>
    )
  }
}

root.ksx

/** @jsx h */
/* https://todo.sr.ht/~jordanreger/feeds/5 */

import InputBar from "./inputbar.jsx";
import FeedList from "./feedlist.jsx";

import { h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";

const root = `
<!DOCTYPE html>
<html lang="en">
    ...
    <article>
      <div class="body">
        feeds is a very basic rss reader. view the source on <a href="https://git.sr.ht/~jordanreger/feeds">sourcehut</a>.
        <br/>
        (for links that don't work, please add an issue to <a href="https://todo.sr.ht/~jordanreger/feeds" target="_blank">todo.sr.ht/~jordanreger/feeds</a>)
        <br/>
        <br/>
        ${render(<InputBar/>)}
      </div>
    </article>
    ...
</html>

`;

export { root as page_root };

/** @jsx h */
/* https://todo.sr.ht/~jordanreger/feeds/5 */

import InputBar from "./inputbar.jsx";
import FeedList from "./feedlist.jsx";

import { h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";

const root = `
<!DOCTYPE html>
<html lang="en">
    ...
    <article>
      <div class="body">
        feeds is a very basic rss reader. view the source on <a href="https://git.sr.ht/~jordanreger/feeds">sourcehut</a>.
        <br/>
        (for links that don't work, please add an issue to <a href="https://todo.sr.ht/~jordanreger/feeds" target="_blank">todo.sr.ht/~jordanreger/feeds</a>)
        <br/>
        <br/>
        ${render(<InputBar/>)}
      </div>
    </article>
    ...
</html>

`;

export { root as page_root };

2 Replies

Unknown User•3y ago

Message Not Public

jordanregerOP•3y ago

oh right, i forgot i was using that custom built server. i'm handling other things than just rendering so i chose to just build my own server

preact form not working?

Did you find this page helpful?