Jahongir Sobirov

Posted on Dec 1

Getting Input Values by ID or Class… On the Backend

#backend #node #javascript #tooling

Ever wanted to read or manipulate HTML form inputs on the backend—just like document.getElementById in the browser—without setting up jsdom?

Meet FetchTL, a lightweight library that lets you sync, read, and update form/input data directly in Node.js. Perfect for server-driven HTML or JS-free forms.

Why Use FetchTL?

Backend developers often face these scenarios:

Server-side form handling: Access input values without relying on frontend JS.
Dynamic templates: Read and modify HTML inputs for emails, reports, or static pages.
Simplified backend forms: No complex DOM emulation needed.

FetchTL provides a mini DOM store on the server—fast, simple, and easy to integrate with Express.

Installation

# Install via npm
npm install fetchtl

Import in your backend code:

const express = require("express");
const $ = require("fetchtl");

const app = express();
app.use(express.json()); // Parse JSON bodies

Syncing Form Data from Frontend

On the frontend, you can send form data with $post, $put, $patch, or $delete attributes.

Example form:

For using frontend you shoul import frontend fetchtl also:
<script src="https://cdn.jsdelivr.net/gh/jahongir2007/fetchtl/fetchtl.js"></script>

<form $post="/api/form" $reload="false" $single-fetch="true">
  <input id="age" name="age" value="18" />
  <input class="email" name="email" value="user@mail.com" />
  <input name="username" value="Jahongir" />
  <button type="submit">Send</button>
</form>

Backend route to sync form data:

app.post("/api/form", (req, res) => {
  // Sync form data into FetchTL store
  $.sync(req.body);

  // Access input values
  const username = $.input("username").val()[0]; // array for names/classes
  const age = $.input("#age").val();            // single value for ID
  const emails = $.input(".email").val();       // array for class

  console.log("Synced $ store:", $.store);

  res.json({
    status: "success",
    data: { username, age, emails }
  });
});

Getting and Setting Input Values

FetchTL uses selectors just like the browser:

Selector	Example	Returns / Updates
ID	`#age`	Single string
Class	`.email`	Array of values
Name	`username`	Array of values

Get Values

const age = $.input("#age").val();           // "18"
const emails = $.input(".email").val();      // ["user@mail.com"]
const usernames = $.input("username").val(); // ["Jahongir"]

Set Values

$.input("#age").val("19");
$.input(".email").val("new@mail.com");
$.input("username").val("John");

console.log($.store);

Why FetchTL is Easier than jsdom

No virtual DOM setup needed.
Works directly with req.body from forms.
Automatically syncs and stores input values.
Supports IDs, classes, and names with minimal code.
Ideal for server-driven UIs or JS-free frontend.

Example: Complete Express App

const express = require("express");
const $ = require("fetchtl");

const app = express();
app.use(express.json());

app.post("/api/form", (req, res) => {
  $.sync(req.body);

  const username = $.input("username").val()[0];
  const age = $.input("#age").val();

  res.json({
    status: "success",
    data: { username, age }
  });
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

Conclusion

FetchTL makes it ridiculously easy to handle form and input data on the backend. No DOM emulation, no complicated setup—just sync, access, and update.

Next time you want to grab input values like in the browser—but on Node.js—reach for FetchTL.

DEV Community