Adding new input fields using the button

Question

I'm a novice at Laravel. How can I add new text input fields with the button and add data in each field separately? Add or plus button or whatever.

Below my code, which allows you to enter the sledge, but only in one field, in addition you have to separate the words with a comma.

<div class="card-body">
            <form method="post" action="{{route('randomizeTeam.store')}}">
                {{ csrf_field() }}
                <div class="form-group">
                    <label for="players">Add player names</label>
                    <input type="text" class="form-control" name="players">
                </div>
                <div class="form-group">
                    <label for="teams">Add team names</label>
                    <input type="text" class="form-control" name="teams">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-info">Send</button>
                </div>
            </form>
        </div>

You want this https://stackoverflow.com/a/42293411/4575350 – STA Jul 20 '20 at 17:32 — STA, Jul 20 '20 at 17:32

score 1 · Accepted Answer · answered Jul 20 '20 at 19:21

This is how you can do it in a simple way

$(function(){
    
    var more_fields = `
                    <div class="form-group">
                        <label for="players">Add player name</label>
                        <input type="text" class="form-control" name="players[]">
                    </div>
                    <div class="form-group">
                        <label for="teams">Add team name</label>
                        <input type="text" class="form-control" name="teams[]">
                    </div>
                `;

    $('#add-more-field').on('click', (function (e) {
        e.preventDefault();
        $(".input-fields").append(more_fields);
    }));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
        <form method="post" action="">
            {{ csrf_field() }}

            <div class="input-fields">
                <div class="form-group">
                    <label for="players">Add player name</label>
                    <input type="text" class="form-control" name="players[]">
                </div>
                <div class="form-group">
                    <label for="teams">Add team name</label>
                    <input type="text" class="form-control" name="teams[]">
                </div>
            </div>

            <div class="form-group">
                <button id="add-more-field" class="btn btn-secondary btn-sm">add more</button>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-info">Send</button>
            </div>
        </form>
    </div>

And in your controller, you will do something like this

foreach($request->get('players') as $i => $player) {
   YourModel::create([
      'player' => $player,
      'team'   => $request->get('teams')[$i]
   ]);
}

Adding new input fields using the button

1 Answers1