Laravel Select list dropdown

Question

i'm new to Laravel and i'm trying to customize a form with laravel Breeze that has a dropdown to select user types, and input them into seperate tables. This is my dropdown code in my veiw :

<div>
            <label for="user_type">User Type:</label>
            <select name="user_type" id="user_type" required>
                <option value="">Select User Type</option>
                <option value="lecturer">Lecturer</option>
                <option value="student">Student</option>
            </select><br><br>
         </div>
            
            <div id="lecturerFields" style="display:none;">
                <label for="name">Name:</label>
                <input type="text" name="name" required><br><br>
                <label for="email">Email:</label>
                <input type="email" name="email" required><br><br>
                <label for="department">Department:</label>
                <input type="text" name="department" required><br><br>
                <label for="faculty">Faculty:</label>
                <input type="text" name="faculty" required><br><br>
            </div>
            <div id="studentFields" style="display:none;">
                <label for="name">Name:</label>
                <input type="text" name="name" required><br><br>
                <label for="email">Email:</label>
                <input type="email" name="email" required><br><br>
                <label for="id">ID:</label>
                <input type="text" name="id" required><br><br>
                <label for="level">Level:</label>
                <input type="text" name="level" required><br><br>
                <label for="department">Department:</label>
                <input type="text" name="department" required><br><br>
            </div>

 <script>
        
document.getElementById('user_type').addEventListener('change', function () {
    var userType = this.value;
    if (userType === 'lecturer') {
        document.getElementById('lecturerFields').style.display = 'block';
        document.getElementById('studentFields').style.display = 'none';
    } else if (userType === 'student') {
        document.getElementById('lecturerFields').style.display = 'none';
        document.getElementById('studentFields').style.display = 'block';
    } else {
        document.getElementById('lecturerFields').style.display = 'none';
        document.getElementById('studentFields').style.display = 'none';
    }
});
    </script>

The dropdown functions as it's suppose to but i'm not sure how to optimize it for laravel and have it add information to my database

Answer 1

For what you want to do, I have prepared simple and basic codes that you can use:

form section:

<form action="route_for_submit" method="POST">
    @csrf
    <div>
        <label for="user_type">User Type:</label>
        <select name="user_type" id="user_type" required autofocus>
            <option value="">Select User Type</option>
            <option value="lecturer">Lecturer</option>
            <option value="student">Student</option>
        </select><br><br>
    </div>

    <!-- use class "d-none" in bootstrap or create this class on your custom css file -->
    <div id="lecturerFields" class="d-none">
        <input type="text" id="lecturer_fields_status" name="lecturer_fields_status" value="" hidden>
        <p>please select lecturerFields</p>
        <label for="lecturer_name">Name:</label>
        <input type="text" name="lecturer_name" class="lecturer_fields"><br><br>
        <label for="lecturer_email">Email:</label>
        <input type="email" name="lecturer_email" class="lecturer_fields"><br><br>
        <label for="lecturer_department">Department:</label>
        <input type="text" name="lecturer_department" class="lecturer_fields"><br><br>
        <label for="lecturer_faculty">Faculty:</label>
        <input type="text" name="lecturer_faculty" class="lecturer_fields"><br><br>
    </div>

    <div id="studentFields" class="d-none">
        <input type="text" id="student_fields_status" name="student_fields_status" value="" hidden>
        <p>please select studentFields</p>
        <label for="student_name">Name:</label>
        <input type="text" name="student_name" class="student_fields"><br><br>
        <label for="student_email">Email:</label>
        <input type="email" name="student_email" class="student_fields"><br><br>
        <label for="student_id">ID:</label>
        <input type="text" name="student_id" class="student_fields"><br><br>
        <label for="student_level">Level:</label>
        <input type="text" name="student_level" class="student_fields"><br><br>
        <label for="student_department">Department:</label>
        <input type="text" name="student_department" class="student_fields"><br><br>
    </div>

    <div>
        <button type="submit">save</button>
    </div>
</form>

js and jquery scripts:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    $('#user_type').on('change', function () {
        let userType = $(this).find(':selected').val();

        if ( userType === 'lecturer'){
            //show lectureFields section
            $("#lecturerFields").removeClass('d-none');
            $("#studentFields").addClass('d-none');

            //add required and autofocus to lecturer inputs
            $('.lecturer_fields').attr('required', true).attr('autofocus', true);
            $('.student_fields').attr('required', false).attr('autofocus', false).val('');

            //set lecturer_fields_status val to 1 and student_fields_status to 0
            $("#lecturer_fields_status").val('1');
            $("#student_fields_status").val('0');

        }else if ( userType === 'student'){
            //show studentFields section
            $("#lecturerFields").addClass('d-none');
            $("#studentFields").removeClass('d-none');

            //add required and autofocus to student inputs
            $('.lecturer_fields').attr('required', false).attr('autofocus', false).val('');
            $('.student_fields').attr('required', true).attr('autofocus', true);

            //set student_fields_status val to 1 and lecturer_fields_status to 0
            $("#lecturer_fields_status").val('0');
            $("#student_fields_status").val('1');
        }
    })
</script>

In the related controller or root, we must check the following condition and then save the related fields

if ( request()->lecturer_fields_status ){
   //save the related fields === lecturer_fields

}

if ( request()->student_fields_status ){
    //save the related fields === student_fields
}