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

Issue

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>

Solution

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.

Answered By - ColinMD

Answer Checked By - Candace Johnson (PHPFixing Volunteer)