How can I use input type submit with formaction?

Bootstrap Studio Help
1

Hi,
I have a program only with HTML that uses:

<form action="#" method="post" enctype="multipart/form-data">

and

<input type="submit" value="Report X" formaction="reportX.php">
<input type="submit" value="Report Y" formaction="reportY.php">

I’m trying to give it a new outfit with Bootstrap Studio.

What component I have to use to get the same effect of two Buttons, where each one calls a different link?

In my actual code, I’m usinf formaction that I coulnd’t find in BSS.

Thanks in advance

2

If you set an attribute on the two buttons like this
<button class="btn btn-primary" type="submit" data-report="X">Report X</button>
<button class="btn btn-primary" type="submit" data-report="Y">Report Y</button>
and your form has a class="report-form"
then you can use this javascript

(function (document) {
  "use strict";
  const ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
  };
  ready(() => {
    const API_URL = "https://YOUR-DOMAIN-HERE/YOUR-FOLDER-HERE/";

    const isValidElement = (element) => {
      return element.name && element.value;
    };
    const isValidValue = (element) => {
      return !["checkbox", "radio"].includes(element.type) || element.checked;
    };
    const isCheckbox = (element) => element.type === "checkbox";
    const isMultiSelect = (element) => element.options && element.multiple;
    const getSelectValues = (options) =>
      [].reduce.call(
        options,
        (values, option) => {
          return option.selected ? values.concat(option.value) : values;
        },
        []
      );

    const formToJSON = (elements) =>
      [].reduce.call(
        elements,
        (data, element) => {
          if (isValidElement(element) && isValidValue(element)) {
            if (isCheckbox(element)) {
              data[element.name] = (data[element.name] || []).concat(element.value);
            } else if (isMultiSelect(element)) {
              data[element.name] = getSelectValues(element);
            } else {
              data[element.name] = element.value;
            }
          }
          return data;
        },
        {}
      );

    const handleFormSubmit = (e) => {
      e.preventDefault();
      let REPORT;
      if (e.submitter.dataset.report === "X") {
        REPORT = "reportX.php";
      } else {
        REPORT = "reportY.php";
      }
      const data = formToJSON(form.elements);
      fetch(`${API_URL}${REPORT}`, {
        method: "POST", // or 'PUT'
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: JSON.stringify(data),
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data.message);
          form.reset();
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    };

    const form = document.querySelector(".report-form");
    form.addEventListener("submit", handleFormSubmit);
  });
})(document);
3

Thnks kuligaposten.
I was trying with <input ... > only.
Best,