Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

JackJones's avatar

How to submit form after using .prevent?

I've used

<form method="post" @submit.prevent="submitShifts">

So I'm able to perform some actions, how do I then go on to submit the form after my logic inside of a method called submitShifts?

0 likes
4 replies
gych's avatar

Post the form in the submitShifts method. Are you using Vue with Inertia ?

JackJones's avatar

I'm only using Vue 3, how do I submit the form from the method?

gych's avatar

Use a ref or reactive property that holds the entered data. On submit post that data to your backend, you can do that with axios.

Here is an example that should head you in the right direction:

<template>
<form @submit.prevent="submitShifts">
	 <input type="text" v-model="form.name" />
	 <input type="text" v-model="form.email" />
</form>
</template>

<script setup>
import {ref} from 'vue';

const form= ref({
	name: "";
	email: "";
})

const resetForm = () => {
	form.value = {
		name: "",
		email: "",
	};
};

const submitShifts = () => {
	const formData = new FormData();
	formData.append("name", form.value.name);
	formData.append("email", form.value.email);
	formData.append('_method', 'PUT')

	axios.post('/your-endpoint', formData.value, {
    	headers: {
      		'Content-Type': 'multipart/form-data'
    	}
	})
  	.then(function (response) {
    	console.log(response);
		resetForm();
  	})
  	.catch(function (error) {
    	console.log(error);
 	});
}
</script>
1 like
Tray2's avatar

I would do something like this using the fetch api.

async function postRequest(url, parameters = {}) {
  try {
      let responsePromise = await fetch(connectionString + url, {
          method: 'POST',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: new URLSearchParams(parameters)
      });
      if (!responsePromise.ok) {
          throw new Error(responsePromise.status);
      }
      return await responsePromise.json();
  } catch (error) {
      return error;
  }
}

async function updateProgress(order) {
 
    let params = {
      list_number: order,
      part: formData.part,
      quantity: formData.quantity
    };
  
    return await postRequest('/api/v1/updateprogress', params);
}

Please or to participate in this conversation.