Inviare form con Alpine.js

In questo articolo vediamo come inviare un form in Alpine.js.

Invieremo i dati in POST.

A livello grafico il form usa Bootstrap, ma ovviamente non è obbligatorio.

Questo il codice:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<form class="form-horizontal form-bordered" x-data="useForm" x-on:submit.prevent="submit">

	<div class="form-group mb-3">
	  <label>Username</label>
	  <div class="input-group">
		<input type="text" class="form-control form-control-lg" id="ut_user" name="ut_user"
			   value="" required>
		<span class="input-group-text">
		  <i class="bx bx-user text-4"></i>
		</span>
	  </div>
	</div>

	<div class="form-group mb-3">
	  <div class="clearfix">
		<label class="float-start">Password</label>
	  </div>

	  <div class="input-group">
		<input type="password" class="form-control form-control-lg" id="ut_password" name="ut_password"
			   value="" required>
		<span class="input-group-text">
		  <i class="bx bx-lock text-4"></i>
		</span>
	  </div>
	</div>

	<div class="row">
	  <div class="col-sm-4">
		<button type="submit" class="btn btn-primary mt-2" x-text="buttonText" :disabled="loading">
		  Login
		</button>
	  </div>
	</div>

</form>

<script>
    document.addEventListener('alpine:init', () => {
      Alpine.data("useForm", () => ({
            response: false,
            loading: false,
            buttonText: "Login",
            submit() {
				const inputs = Array.from(this.$el.querySelectorAll("input"));
				const data = inputs.reduce(
                   (object, key) => ({...object, [key.name]: key.value}), {}
				);

              this.buttonText = "Loading...";
              this.loading = true;
              fetch(IL_VOSTRO_URL, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                  Accept: "application/json",
                },
                body: JSON.stringify(data),
              }).then((response) => response.json()).then((data) => {
                console.log(data.data);
              }).catch((error) => {
                console.error(error);
              }).finally(() => {
                this.buttonText = "Invia";
                this.loading = false;
              });
            },
          })
      );
    });
  </script>

Ovviamente come prendere i dati dal form dipende anche da voi.

Cosi cosa farci con la risposta.

Enjoy!