CODEWITHSUNDEEP
javascriptjquerylaravel
j.sadne
j.sadne

Reputation: 39

Adding new input fields using the button

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>

Upvotes: 1

Views: 1194

Answers (1)

kenean50
kenean50

Reputation: 588

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]
   ]);
}

Upvotes: 1

Related Questions