using onkeyup inside of the append (input) in javascript

Question

 var tvalue = [];
  function add_purchase(value){

    if (value in tvalue) {

        return 0;
    }else{  
        tvalue.push(value);
    }
    var obj = document.getElementById('item');
    var item  = obj.options[obj.selectedIndex].text;


    $('#show_item').append(' <tr class="warning" >'+
                               ' <td class="title-text">'+
                                 item+
                               ' </td> '+
                               ' <td class="title-text">'+
                                   ' <input type="hidden" value="'+value+'" name="item_id[]">'+
                               ' </td>'+
                               ' <td class="title-text">'+
                                   ' <input type="text" id="txt2" name="quantity[]">'+
                               ' </td>'+
                               ' <td class="hidden-xs"> '+
                                   ' <input type="text" name="price[]">'+
                                '</td>'+
                               ' <td class="hidden-xs" > '+
                                    '<p> the total of every caculate must be here </p>'+
                               ' </td>'+


                           ' </tr>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
                        <label class="control-label col-md-3">Items
                            <span class="required"> * </span>
                        </label>
                        <div class="col-md-5">
                            <select class="form-control select2me" id="item" 
                               onchange="add_purchase(this.value)">

                                <option value=""></option>
                                    @foreach($items as $item)
                                        <option value="{{ $item->id }}"> {{ $item->name }} </option>
                                     @endforeach
                            </select>

                            </select>
                        </div>
                    </div>

                    <hr>


                    <table class="table table-striped table-hover">
                        <thead>
                            <tr class="active">

                                <th  colspan="2" class="hidden-xs"> Material </th>
                                <th class="hidden-xs" style="width:10%">Quantity </th>
                                <th class="hidden-xs" style="width:10%">Price</th>
                                <th class="hidden-xs" style="width:10%">Total</th>
                            </tr>
                        </thead>
                        <tbody id="show_item">

                        </tbody>
                        <tfoot>
                            <tr class="success">
                                <th colspan="2">Total</th>
                                <th class="ltr" style="text-align:center"></th>
                                <th class="ltr" style="text-align:left">($)</th>
                                <th class="ltr" style="text-align:center"></th>
                            </tr>
                        </tfoot>
                    </table>

there is a dropdown for items that we can select as many items as want, and every item has price, quantity and total. What I want here is to make a function that makes (price * quantity) real time and put the result in total, but don't know how to write onkeyup or any method like onkeyup in the append. Thanks in advance for your help.

[check this out](https://stackoverflow.com/questions/7316283/trigger-change-event-and-keyup-event-in-select-element) — Dastan, Dec 24 '19 at 09:21
@Artas tnx for ur time, but I have no problem with binding two method. I just wanna know how to get the value of the input inside of the append function. — Reza, Dec 24 '19 at 16:34

score 0 · Answer 1 · answered Dec 25 '19 at 05:49

0

Try changing this.value to $(this).val()

answered Dec 25 '19 at 05:49

Nathan Hawks

557
4
14

@Natan can you explain why you are suggesting to do the change and if you have a way to show it's solving the question even better – Tamir Klein Dec 25 '19 at 08:03
@Nathan Hawks thanks for ur time, that's exactly what i want to do, getting the value of the input, i didn't understand what u mean, could u put ur answer ( $(this).val() ) in one of the input inside of the append...? – Reza Dec 26 '19 at 06:04
I was referring to in your `select onchange` – Nathan Hawks Dec 26 '19 at 08:09

using onkeyup inside of the append (input) in javascript

1 Answers1