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

Rod2rick's avatar

Empty input field after submit

I would like to empty my input after submit Here is my code :

<script setup>
const form = reactive({
  supply_name: "",
  supply_email: "",
  supply_phone: "",
  supply_address: "",
  supply_city: "",
  supply_zip_code: "",
});

const { errors, storeSupply } = useSupply();

const saveSupply = async () => {
  await storeSupply({ ...form });
};
    const storeSupply = async (data) => {
        errors.value = ""
        try {
            await axios.post("http://127.0.0.1:49146/" + "supply", data);
        } catch (e) {
            if (e.response.status === 422) {
                for (const key in e.response.data.errors) {
                    errors.value = e.response.data.errors
                }
            }
        }
    }
</script>
<CardBoxModal
        v-model="modalOneActive"
        title="Ajouter un fournisseur"
        has-close
      >
        <form @submit.prevent="saveSupply">
          <CardBox>
            <FormField label="Noms & Email">
              <FormControl
                id="supply_name"
                v-model="form.supply_name"
                name="supply_name"
                :icon="mdiAccount"
                placeholder="Nom du fournisseur"
                required
              />
              <FormControl
                id="supply_email"
                v-model="form.supply_email"
                name="supply_email"
                type="email"
                :icon="mdiMail"
                placeholder="Email du fournisseur"
                required
              />
            </FormField>

            <FormField label="Adresse & Téléphone">
              <FormControl
                id="supply_address"
                v-model="form.supply_address"
                name="supply_address"
                :icon="mdiMapMarker"
                type="tel"
                placeholder="Adresse du fournisseur"
                required
              />
              <FormControl
                id="supply_phone"
                v-model="form.supply_phone"
                name="supply_phone"
                :icon="mdiPhone"
                type="tel"
                placeholder="Téléphone du fournisseur"
                required
              />
            </FormField>

            <FormField label="Ville & Code postal">
              <FormControl
                id="supply_city"
                v-model="form.supply_city"
                name="supply_city"
                :icon="mdiCity"
                type="tel"
                placeholder="Ville du fournisseur"
                required
              />
              <FormControl
                id="supply_zip_code"
                v-model="form.supply_zip_code"
                name="supply_zip_code"
                :icon="mdiPost"
                type="tel"
                placeholder="Code postal du fournisseur"
                required
              />
            </FormField>

            <template #footer>
              <BaseButtons class="flex justify-center">
                <BaseButton
                  class="mr-2"
                  type="submit"
                  color="jt_orders"
                  label="Valider"
                />
                <BaseButton
                  class="ml-2"
                  type="reset"
                  color="danger"
                  outline
                  label="Annuler"
                />
              </BaseButtons>
            </template>
          </CardBox>
        </form>
      </CardBoxModal>

Somehow, when it submits very well , but it doesn't empty the input filed after submit.

0 likes
2 replies
LaryAI's avatar
LaryAI
AI
Best Answer
Level 58

To empty the input fields after submit, you can simply reset the form object to its initial state. You can do this by adding the following line of code to the saveSupply function after the await statement:

Object.assign(form, {
  supply_name: "",
  supply_email: "",
  supply_phone: "",
  supply_address: "",
  supply_city: "",
  supply_zip_code: "",
});

This will reset all the form fields to their initial empty state. Here's the updated saveSupply function:

const saveSupply = async () => {
  await storeSupply({ ...form });
  Object.assign(form, {
    supply_name: "",
    supply_email: "",
    supply_phone: "",
    supply_address: "",
    supply_city: "",
    supply_zip_code: "",
  });
};

Please or to participate in this conversation.