submit dynamically generated button - Jquery ajax

SamuelMaharjan
January 7, 2021
188 views
0 votes
2 Answers

I have a dynamic form where the data is being pulled through database and i want to send indivisual hidden data field by clicking the button to database through ajax.

Everytime i click the button only the first button works other button don’t work.

I’m using ajax because i want to add individual data to the database without refreshing the page.

<div class="topheader">
    <div class="container">
        <div class="row">
            <div class="header-wrap">
                <span class="header-phone"><i class="fas fa-utensils"></i>{{$clients->name}}</span>
                <span class="header-phone"><i class="fas fa-phone"></i> {{$clients->phone_number}}</span>
            </div>
        </div>
    </div>
</div>

<div id="menutabs" class="component-box res-features">
    <!--Scrollable tab example -->
    <div class="pmd-card pmd-z-depth container">
        <div class="pmd-tabs pmd-tabs-bg row" scroll="true">
            <ul class="nav nav-tabs" role="tablist">
                @foreach($categories as $category)

                    <li role="presentation" class="active"><a href="#{{$category->slug}}" aria-controls="home"
                                                              role="tab"
                                                              data-toggle="tab">
                            <p>{{$category->name}}</p></a></li>
            @endforeach

        </div>

    </div> <!--Scrollable tab example end-->

</div>

<!-- SECTION 1 -->
<div id="menutabcontent" class="home-section home-section-21">
    <div class="container">
        <div class="row">
            <div class="pmd-card-body">
                <div class="tab-content">
                    <?php
                    $active = 'active';
                    ?>
                    @foreach($categories as $category)
                        <div role="tabpanel" class="tab-pane {{$active}}" id="{{$category->slug}}">
                            <div class="card-group">

                                @foreach($category->menus as $menu)
                                    <div class="card mb-3 ">
                                        <div class="row g-0">
                                            <div class="col-md-4">
                                                <img src="http://restorma.abgroup/uploads/demo/dish/{{$menu->image}}"

                                                     alt="..." width="120px" height="120px">
                                            </div>
                                            <div class="col-md-8">
                                                <div class="card-body">
                                                    <h5 class="card-title">{{$menu->name}}</h5>
                                                    <p class="card-text">{{$menu->description}}</p>
                                                    <p class="card-text"><small
                                                                class="text-muted">RS. {{$menu->price}}</small>
                                                    </p>
                                                    <form class="form" id="order">
                                                        <input type="hidden" id="table_id" name="table_id" value="0">
                                                        <input type="hidden" id="dish_item_id" name="dish_item_id" value="{{$menu->id}}">
                                                        <input type="hidden" id="particular" name="particular" value="{{$menu->name}}">
                                                        <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                                                        <button type="button" class="btn btn-primary" id="btn-order" name="btn-order"
                                                                value="add">Order
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?php
                                    $active = '';
                                    ?>
                                @endforeach
                            </div>
                        </div>

                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
<script src='/theme-assets/website/js/jquery.js'></script>
<script>
    jQuery(document).ready(function (){
        jQuery('#btn-order').click(function(e){

            e.preventDefault();
            jQuery.ajax({
                url: "{{ url('#') }}",
                method: 'post',
                data: {
                    _token: jQuery('#_token').val(),

                    table_id: jQuery("input[name=table_id]").val(),
                    dish_item_id: jQuery("input[name=dish_item_id]").val(),
                    particular: jQuery("input[name=particular]").val(),

                    /*table_id: jQuery('#table_id').val(),
                    dish_item_id: jQuery('#dish_item_id').val(),
                    particular: jQuery('#particular').val(),*/


                },
                success: function(result){
                    //console.log(result);
                    //jQuery('.alert').show();
                    //jQuery('.alert').html(result.success);
                    window.alert(result.success);

                }});
        });
    });

</script>

Answers

your buttons are generated dynamically and in your case will have same IDs. Ids are unique. You will have to access those buttons by Class Selectors. Simple example of how you could do this

HTML

<input type="button" value="Car" class="btnSubmit" />   

<input type="button" value="Semi" class="btnSubmit" />   

<input type="button" value="Truck" class="btnSubmit" />

<input type="button" value="SUV" class="btnSubmit" />

<div id="result"></div>

JQuery

$(document).ready(function () {

    $('.btnSubmit').click(function () {
        $('#result').empty();

        var elementIndex = $('.btnSubmit').index(this);
        var selectedButton = $('.btnSubmit').eq(elementIndex).val();

        // show output in result div
        $('#result').append(selectedButton);
    });


});

You are assigning id to fields in loop. For every item in the loop, same id will be assigned which is not ideal because there should be only one id per page.

I cannot give perfect syntax but I can give you an idea.

You can assign onclick function to the button in the loop like:

<button type="button" class="btn btn-primary"  
 onclick="AddOrderFunc(name, description,price)" value="add">Order</button>    
               //Add parameters in function which you want to send

And in Javascript you can add function like:

    function AddOrderFunc(name, description,price){
jQuery.ajax({
                url: "{{ url('#') }}",
                method: 'post',
                data: {
                   name:name,
                    description:description,
                   price:price
                },
                success: function(result){
                    //console.log(result);
                    //jQuery('.alert').show();
                    //jQuery('.alert').html(result.success);
                    window.alert(result.success);

                }});
        });
}

Please signup or login to give your own answer.

Click here to cancel reply.

submit dynamically generated button – Jquery ajax

Answers