JS code function not working inside another JS function

Rajan Sharma 0
Viewed 37

I'm trying to get value which i calculated in a tag in my repeat form. It works fine in my normal form but when i add another row it won't work. This code works fine with first row but when i add new row it didn't respond. Where am I making mistake and How can i solve this issue. Thanks in advance.

    ////This is the select Option/////


         <div class="form-group col-md-2">
           <select id="kriyakalap" onclick="display();" name="kriyakalap[]" class="form-control">
                                <option selected >क्रियाकलाप</option>
                                @foreach ($kriyakalap_array as $bi)
                                <option value="{{$bi->bujet}}"> {{$bi->kriyakalap}}</option>
                                @endforeach
          </select>
    </div>
    
    ////This is the select Option/////
    
    
    //////This the code for getting value////
    <!-- Display Budget By Kriyakalap -->
    <script>
        function display() {
        var x = document.getElementById('kriyakalap').value;
        document.getElementById('budget').innerHTML = x ;
        }
    </script>
    
    <!-- Display Budget By Kriyakalap -->
    
    
    //////This the code for getting value////




 <!-- form repeat -->
    

    <script type="text/javascript">
            $(document).ready(function() {
    
            var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" onclick="display();" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> @foreach ($kriyakalap_array as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> @endforeach </select> @foreach ($kriyakalap_array as $bi) @endforeach </div> <div class="form-group col-md-1"> <span id="budget" class="form-control"></span> </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" > <option selected="selected" >डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" > <option selected="selected" >डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-1"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
            var max = 5;
            var x = 1;
            $("#add").click(function() {
                
                if (x <= max) {
                    $("#form-field").append(html);
                    x++;
                }
            })
    
            $("#form-field").on('click', '#remove', function() {
                $(this).closest('span').remove();
                x--;
            });
        });
    
    </script>
    <!-- form repeat -->
ajax jquery javascript
1 Answers

You should have Id one time but your code contain many tag with the same id when you append your html element with js code So in your your html variable you should use class="kriyakalap" instead of id="kriyakalap" like the following

let html = '<div class="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select class="kriyakalap" onclick="display(event)" name="kriyakalap[]" class="form-control" required> <option selected disabled>a</option><option selected >b</option> <option selected >c</option> @foreach ($kriyakalap_array as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> 
@endforeach </select> @foreach ($kriyakalap_array as $bi) @endforeach </div> 
<div class="form-group col-md-1"> <span id="budget" class="form-control">  </span> </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" > <option selected="selected" >डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" > <option selected="selected" >डेबिट / क्रेडिट प्रकार</option> 
 </select> </div> <div class="form-group col-md-1"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> 
</div>  <div class="form-group col-md-2">  <input type="button" class="btn btn-danger" name="remove" class="remove" value="-">  </div> </div> </div>'

On your select tag in html call your display function do like this:

    <select class="kriyakalap" onclick="display(event)" name="kriyakalap[]" class="form-control" required>

Then set your display function like this:

function display(e){
   let x = e.target.value;
}

And your click listener like this:

$("#add").click(function() {
    if (x <= max) {
        $("#form-field").append(html);
        $('.kriyakalap').last().click(display)
        x++;
    }
})
Sunday KODONON0
Related