Pass foreach id outside loop to update a form using JavaScript

Question

I want to update the status of permission time by time and the permissions will be given depending on the role given.

Each role has its own Id and it is being displayed but I also have to update permission with respect to the Role id but with foreach loop is given out to the form my UI is just scattered. So any way how to give id to the form to update the elements in form.

I am getting Id through javascript but it always give first id of the loop.

Blade.php

            <div class="col-lg-3 col-md-3">
                <a href="#" id="createType" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i> Add Positions</a>
                @foreach($data as $key=>$item)
                <div class="roles-menu">
                    <ul class="nav" id="item_id" onclick="item()">
                        <li><a href="" onclick="giveinput()">{{ $item->name }}</a></li>
                        {{--<div id="input">{{ $item->id }}</div>--}}

                    </ul>
                    <input id="input" value="{{ $item->id }}">
                </div>

                @endforeach
            </div>

                <form method="post" action="{{ url('/system-configurations/roles-permission/permission') }}">
                    {{ csrf_field() }}


                    <div class="col-sm-9 module-access">
                            <h6 class="panel-title mb-20 display-ib">Module Access</h6>
                            <div class="pull-right  mb-10">

                            </div>

                        <div id="divID"></div>
</div>
                    <!-- /.row -->
                    <div class="row">
                        <div class="col-md-12 text-right">
                            <button class="btn btn-info">Save</button>
                        </div>
                    </div>
                </form>

script

<script>
function giveinput(){
    $("#input").each(function() {
        var input=document.getElementById("input").value;
        var div = document.getElementById('divID');
        div.innerHTML = div.innerHTML + input;
        alert(div.innerHTML );
        e.preventDefault();
        });
    }
</script>

ladj82 · Accepted Answer · 2018-04-12 08:48:54Z

1

Please take a look at the sample below on how to iterate with the DOM elements. The 'id' property is supposed to be used as a unique reference to a DOM element. That said, I recommend you to use the 'name' property instead and query the elements using it.

The code below may not answer your question but at least points to know how to iterate with the html in order to get the proper id values.

var htmlElements = $('input[name="input"]');

htmlElements.each(function (index, element) {
  console.log(element.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="input" value="1">
<input name="input" value="2">
<input name="input" value="3">
<input name="input" value="4">

answered Apr 12, 2018 at 8:48

ladj82

1612 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3603030 · Accepted Answer · 2018-04-12 09:07:54Z

1

I suggest you use class instead of id as ids are meant to be unique

<input class="input" value="{{ $item->id }}">

After that you can loop through the elements by selecting 'this' using the jquery selector in the .each function

$(".input").each(function() {
    var input= $(this).val();
    //... rest of your code
});

answered Apr 12, 2018 at 9:07

user3603030

111 bronze badge

Comments

Faiez · Accepted Answer · 2018-04-12 08:54:29Z

0

I have done it simply giving id direct from function. Instead of getting element using Id.

   <li><a  onclick="getID('{{ $item->id }}')">{{ $item->name }}</a></li>


        <script>
        function getID(val){
            $("#input").each(function() {
                var div = document.getElementById('divID');
                div.value = val;
                e.preventDefault();

                });
            }
        </script>

answered Apr 12, 2018 at 8:54

Faiez

3051 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Pass foreach id outside loop to update a form using JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related