suhaskunte777
6 months ago

How to use multi select box on dynamically add fields & jquery .length function incorrectly

Posted 6 months ago by suhaskunte777

Hi,

  1. I added function to add remove field set. I can add field set but I am trying to remove field it not work only work on first table row.

  2. I need count of tr in current form so i used jquery .length function but it showing wrong result ( incrementing by 2)

  3. I am working on laravel project where i need to dynamically add field. I know i have to set name='variablename[]'. But how i can do same for multiple select box. In multi select box we already set name='variablename[]' I tried with name='variablename[][]' but i am just getting each option new array.

here is my code snippet

<body>
<div class="container">
    <div class="m-3">
        {!! Form::open(['route' => 'exam.store']) !!}
        {!! Form::token() !!}
        <div class="form-group row">
            {!! Form::label('name', 'Exam Name', ['class' => 'col-sm-2 col-form-label']) !!}
            <div class="col-sm-10">
                {!! Form::text('name', '', ['placeholder'=> 'Exam Name','class' => 'form-control']) !!}
            </div>
        </div>
        <div class="text-center"><i class="btn btn-success fa fa-plus 7x addrow" style="margin-bottom: 20px;"> Add New Title</i></div>
        <table class="inputtable">
            <thead>
            <tr>
                <th scope="col">Title</th>
                <th scope="col">Medium</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td data-label="title">{!! Form::text("title[]", "", ["placeholder"=> "Title","class" => "form-control"]) !!}</td>
                <td data-label="medium">{!! Form::select("medium[]", ["7" => "A","1" => "B","3" => "C"], null, ["class" => "form-control select2multiple", "multiple"=>"multiple", "required"]) !!}</td>
                <td data-label="Remove"><a href="#" class="remove"><i class="btn btn-danger fa fa-times"></i></a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
    $('.addrow').on('click', function () {
        addRow();
        alert($("tbody tr").length);
    });
    function addRow() {
        var tr = '<tr>\n' +
            '                <td data-label="title">{!! Form::text("title[]", "", ["placeholder"=> "Title","class" => "form-control"]) !!}</td>\n' +
            '                <td data-label="medium">{!! Form::select("medium[]", ["7" => "A","1" => "B","3" => "C"], null, ["class" => "form-control select2multiple", "multiple"=>"multiple", "required"]) !!}</td>\n' +
            '                <td data-label="remove"><a href="#" class="remove"><i class="btn btn-danger fa fa-times"></i></a></td>\n' +
            '            </tr>';
        $('tbody').append(tr);
    }
    $('.remove').on('click',function () {
        $(this).parent().parent().remove();
    })
</script>

Please sign in or create an account to participate in this conversation.