How to assign input value parameter in "useForm" variables. Inertiajs/Laravel

Question

I'm having a problem assigning the input "value" parameter to the useForm variable in Inertiajs.

Here is the scenario

1-I have a form with 6 fields, all of which are of text type. 2-There is a hidden input field which holds the user ID. 3- I will pass this data to controller for further processing. Problem

As I'm using Inertiajs so form values are reactive but problem is how can pass that hidden field in it?

Form Code

    <form @submit.prevent="submit"> <br> <br>
<!-- The hidden form field will store the value of child ID and save it in table -->
                <div v-for="data in sData" :key="data.ID">
                <input type="text" name="ChildID"
                 :value="data.ChildID">
                </div>
            
                 
                <input type="text"
                 name="hobbie"
                 placeholder="Enter hobbies"
                 v-model="form.hobbie"
                 required
                > 
                 <br> <br>

                <input type="text"
                 name="physical_health"
                 placeholder="Enter Physical Health"
                 v-model="form.physical_health"
                 required
                 >
                 <br> <br>


                <input 
                 type="text"
                 name="education"
                 placeholder="Enter Education"
                 v-model="form.education"
                 required
                 >
                <br> <br>

                <input
                 type="text"
                 name="mental_health"
                 placeholder="Enter Mental Health"
                 v-model="form.mental_health"
                 required
                 >
                 <br><br>

                <input
                type="text"
                name="behaviour"
                placeholder="Enter Behaviours"
                v-model="form.behaviour"
                required
                >
                <br><br>

                <input
                 type="text"
                 name="self_care"
                 placeholder="Enter Self Care" 
                 v-model="form.self_care"
                 required
                 >
                 <br><br>
                <input
                type="text"
                name="life_skill"
                placeholder="Enter Life Skills"
                v-model="form.life_skill"
                required
                >
                <br><br>
                <input type="submit" value="Add Station" class="submit"> <br><br>
            </form>

Vue Script Code

    <script setup>
import { useForm } from '@inertiajs/inertia-vue3';

const props = defineProps({
    sData: String
});

const form = useForm({
    
    hobbie: '',
    physical_health: '',
    education:'',
    mental_health:'',
    behaviour: '',
    self_care: '',
    life_skill: '',
});

const submit = () => {
    form.post(route('add_station_1'), {
        onFinish: () => form.reset(),
     });
};
</script>

ColinMD · Accepted Answer · 2022-10-09 09:31:12Z

0

You would need to assign the hidden field as a form field in the useForm

<input type="text" name="ChildID" v-model="form.child_id"
             :value="data.ChildID">
            </div>

const form = useForm({
    hobbie: '',
    physical_health: '',
    education:'',
    mental_health:'',
    behaviour: '',
    self_care: '',
    life_skill: '',
    child_id: sData[0].ChildID,
});

Only the fields set in the form array will be submitted with the form request. If this field is not to be cleared after submission, you will need to repopulate that variable after submission.

edited Oct 9, 2022 at 9:31

answered Oct 9, 2022 at 9:15

ColinMD

9646 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Muhammad Khan Over a year ago

The child ID is coming (along with other data) from parent component through props.

ColinMD Over a year ago

OK, yeah I see it and then you loop the sData to get the data? Will there only ever be 1 child ID?

Muhammad Khan Over a year ago

Exactly you got it. No like there is profile page when someone click on it it's ID will be send to this component I'm working on

ColinMD Over a year ago

OK, I'm a little rusty on my vue knowledge as I tend to use livewire now, but I have updated my answer, I think that should work. But as said you will need to repopulate the child_id with the sData value if you want that to persist between form submissions.

ColinMD Over a year ago

If you are happy with the answer then dont forget to mark as correct. You could also probably simplify the first loop as we are pre setting the value in the props

|

Collectives™ on Stack Overflow

How to assign input value parameter in "useForm" variables. Inertiajs/Laravel

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related