Handling forms with VanJS, Dear React users don't waste our sparse resources...
Tags: vanjs
Published: 2023-05-25 14:37:40

Why on earth things have to be complicated.

Dear React users, take care of our Planet, and don't waste tons or resources for simple projects...

[Demo](https://flems.io/#0=N4IgtglgJlA2CmIBcBmALAOgOwE4A0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHWoSAPFAgA3AATQAvGJC0ADhrUA+aQHpZcvZOrcQpeAh5sIA8kwBMSAIxoQAXzw16jEHNpqDAArcl4BIREmBDYFeDw2PGo8WGUAeQAjYPgbPAAndKyctgwAc3g2AAU8vjZagE8NeDTCPFJlAAp4xOTYAEplHS6AfmGOyzYAFQgGPgBXNg7evqT4AHcFAGUKvr6MWhgOthWoZWBy2IDYDr7gPIq5vOoFNhYIUgw2LwmFK67bmIKajKV7vFLKIJsADc8AAhMplLAAGRIpYYVII2DDNjKUhHJJ4Hh9JDwBEQ9EokpQKwVeBLFaQ5TxIJ8DCEPh5ACitB4LA6R0Gi3i-V2fS8Amo63+wFBH1ZGjmpD58DF4uUeQ6UBWECZg3gGGofGpk0a8GG8CQko2k3gAA8hSs5p14hhXcdBkc2bBaIsXPoAAx7dlcnl8gU6fWaJrUKAAYTesCgHQ17oRUGGa3xXT1uyQECOopWKrwtAh6wU1T4tvq-PxroNAx0wBiFFIeHrEAAuuqlhR-Z3RoGyXxhtQkFQvPXqJ2S8ooHweHMGIIMDx7j74JyEMvFscofc2I9nrAMMI2HkIPA8aQgxzubzaxQep3G82KgpUrQn534UzzYMvzYbsLVJHRaAwCYAEE2HPCAMgWOlEhVfd6TJdNM2SbMhmuYtaFFJANWoAYERHTMpwwakNDbfl6xVD1riCQgOlo3YS3whixVYuYOlodtXQgTjvAuJB8SIwUMAyCAYy6JJBIAfV1CMMB1fUIDZEghA1LD9TmYZlNIWMJWKeAtRWHhOlfQFgQoesgKhHFmXLbZFkY702AAWU0Do5N2Nk71DfkcSbGJgDky08DmJBYDwUoCI8EE2h7ciwC87TPlY6LktS0D9RFPooVIX9kVRQq-xPe4NG9Hh4AAdQgV5PSdfMb2JDpyvgMA+DkOkVhKJ0VU4hk-JDB80tSfVjjFPA1k6WzLPfVISlIWAIGqjp-TwABaFwVgKNgn3RYRSlebaZ1ODV6xPFKNH5HL0t2KEICY04mT6A8jwoTsoUBPgzjC6LIvzLUYri-cHieD9hvvMMguAYE8WSRJ+UbNFg2h7yGVelYXHgFBeuUjAFSVDo+EGvBWTmDwYVtDQOVialCFoOZYDYYADigJA5gSWhSlIJBeNINgNxJD1QrkjQajqOSwqgBISRSeWIHHGc+GVjwVkkmMkDWKnzEsaxbHsUR-VcFwcBwTxvBAOgGFEEIwhAfhBDPUQZlpvJLkCBRCBqMAFDUDB9ACIJQjUCQJCdwWFGABRSA0QI8AUFgXEToxE+DMBE6khVEg-WgMisRP4JggRE5YPIFA8BRlF+QJPh50hw+oSPYnZ6uFA6DJaEsPpq50DurGOPva6CdnO+7+I4hZvom5bl5aDyC52-nRcdzKCotw6s8ACF6gASSTNQozUfKm4kQg5mbw3nmW+B4BusAb2jiQFAUd6IatCtffeOkL6vuxnjJl7sAF+r9Y4VGmLMBYyZE6Pxns8Su8CPBNz-jYABCgABiHIwA3Gfgg0Bc9QGvxtvAduwcIJCyEB0AA5NQlYRC4gpRIGQuugsNw0LoXgBh8A8g1ArjXchbCqG0PoQg1+hA75QC7jwAA1iwoIQi6QiKhAw0BgIM41TyFGHhKixH+wQXPFggQ4DwAAHK+HjIEco7cujdUEL3QYeCwFAl8BgK4Nj4B2JKELReFQ3G0FgHMZCoCqZN1foY4xCBORMNgJY6g1ia62LPA4-uIC9EdVoCQfxsAPFePrr4koVwgmnwQaE0w4T7CxCMTGBAmw5gZEgLERJnjknDzSc4lpK4JadLYAAEXgIzZmiwSnOIkSZaRMjsntzDiAXRzi54Zy3E0722DNHaLyBgAAjkEvI9RtgGw5B0NQGcT7OLCWAp6HdYQkKmQAH1uQoWEGSslXGAQw1+PC+FTMSdQyoCAJ7exIDkqSCgAk5OIFYKAHw6FzOcW-cG1BYWvyrqA7hvCOTfP9uIWZRCiG33vh0AArP6QMnwWDCGRsPMZUieSTPcTXNQWC8h+1IPUxpQgoAn10Qw-FN1HDEtJa8CluDHHR30XChQFASGJ2edFOI6K8idihgFQgVLMUzJGXC6lEz1XYqRWAxZLMMD3AmDcfV6tVGlO5QgjRWitA8PbgoIwRy9HJyOSAAAEpEqSpRMHYNIEoZ4AA1QIAApTYJ8uF6Izi6iVzqY48G9KQPmWKIWJjUInAQvIrEWiTpEsxFjqnWK8OKiVecC7XDUOYhgkb3kXOoDnG4oi43yA6AmpNKbjmXnTdwBQWai25uqSY6JmTYkDsronOtr9vQVvdZ5Egta9HOOztA1idb40KETd3TtFg2X1TUBO0tEri51GoG2qdYC2CmiQFi1lDT93cAva-LNK1ZE3qHbUvdbA60lrUHexpJ94HOObWA8uNwo3OI3Vu5NN61CwD4KUcoeQD1eHXa24A0G+ZwYQ2mzllssXVtIa-WDvaSEgcg+hzDSBsOlFw2oX9IAR3MIUCRmVMTyNgPjVRmjdH8NqE5AqljWKZUKo46-LjHbqMgHg7R7teGGMYMkV3ORrHvZKdpUBsBmnNPv2eLa9ZEhkGmFQdfV+TDAFvIQWPKMfQOhMpwbsQzTdzM3DPmYAg+tigAIcCAE2-pNoAA4AtIH9JbHwtsmCrmTeYJ2kQ2CiAyEaeoTiFATNKDUS+HNUtVRkbC-g8G8g3qgAvGRHIc2wvZIITajNICwHqDeheEAAm6KMxIAAxFGMVoC0sZa1m-UoXcOj8sJXgFwhKABseANr+gwI4HasL44wB9Texw-oNC2gUKt9bm21sba27aWFaxoCvBvYS4l63YVCHtJtAJEBShjmqs7PIsKUqLykje-0oKFh8Ba03dSkKUtHagCdzb52DugNe6Ud7ChPtMzqC9heUPqCbUSyXMArhdu-dMDOqwKXZBx29PVqSK1JQo-g7Iy7do2A3ZWvdgid32AI7e8ji8pR2AY4u6AoHIPxuY6c6YCCX7AfHZYEgRw+2mdI5C19+HoCrvU9u3T1n7B+cSEF-e2IJ6BApcS3kakhXDSSlhT1+YfWyvxPgFjtXMmkMpcW7IeJm06gaA5+DhB3PRcoBJZzhBkPoew++5T67iuxwIEIN+6grWggydwylv3yPUd1HRy4Pnke9Y0jQUbJgKBgsWw8DOa2vhRDuSDQAVRDdQez5APBAA)

```js
import van from "./van.js";

const { span, h1, div, form, input, label, button, hr } = van.tags;

const add = (base) => (elt) => van.add(base, elt);

const target = document.getElementById("app");

function sleep(ms) {
  return new Promise(function (r) {
    setTimeout(r, ms);
  });
}

function Form() {
  const name = van.state(""),
    email = van.state(""),
    error = van.state(""),
    feedback = van.state("");

  let formWrapper;

  const handleNameChange = (event) => {
    name.val = event.target.value;
  };

  const handleEmailChange = (event) => {
    email.val = event.target.value;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    feedback.val = "";
    const formElt = formWrapper.querySelector("form");

    if (!name.val || !email.val) {
      error.val = "Please fill in all fields.";
      return;
    }

    error.val = "";

    sleep(500).then(() => (feedback.val = "Form submitted"));

    sleep(2500).then(() => {
      [name, email, error].forEach((f) => (f.val = ""));
      feedback.val = "";
      formElt.reset();
    });
  };

  formWrapper = div(
    h1("Handling Forms in VanJS"),
    form(
      div(
        { class: "field", onchange: handleNameChange },
        label("Name"),
        input()
      ),
      div(
        { class: "field", onchange: handleEmailChange },
        label("Mail"),
        input()
      ),
      div(
        { class: "submit" },
        button(
          {
            type: "submit",
            onclick: handleSubmit,
          },
          "submit"
        )
      )
    ),
    hr(),
    div(
      { class: "logger" },
      div({ class: "logfield" }, "Name   : ", name),
      div({ class: "logfield" }, "Email  : ", email),
      div({ class: "logfield" }, "Error : ", error),
      div({ class: "logfield" }, "Feedbak : ", feedback)
    )
  );
  return formWrapper;
}

function main() {
  add(app)(Form());
}

main();

```