Question

我的HTML代码：

    <div class="form-group col-sm-12">
    <label for="input-text-help" >Select Vendor 
    </label>

    <select name="vname" class="form-control">
    <option value="">Select Vendor</option>

    <?php
    foreach($Fetchvendors as $Fetch){
                                               ?>
    <option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->name; ?> 
    </option>       
                                <?php   
                                }
                                ?>
                                </select>

                          </div>
                          <div class="form-group col-sm-12">
                            <label for="input-text-help"> Date</label>

                            <input type="text" name="date"  id="datepicker" class="form-control">

                          </div>
                            <table class="table">
                                    <i class="fa fa-plus" style="margin-left:500px;">**Add More**</i>
                                    <thead>
                                            <th>Material Name</th>
                                            <th>Quantity</th>
                                            <th>Price</th>
                                    </thead>
                                    <tbody>
                            <tr >
                                <td>
        <select name="mname[]" class="mname">                              
                <option value=""> Select Material </option>
                <?php
                foreach($FetchMateril as $Fetch){
                ?>
                <option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->mname; ?></option>      
        <?php   
        }
        ?>
        </select>
                            </td>
                                <td>
                                    <input type="text" name="qty[]" class="quanitity" id="qty" placeholder="Material Unit">
                                    <!--
                                <select name="qty[]" class="quanitity">

                                    <option>Select Quanitity</option>
                                    <?php for($i=1;$i<=50;$i++){?>
                                    <option><?php echo $i;?></option>
                                    <?php }?>
                                </select>
                                -->
                                </td>
                                <td>
    <input type="text" name="price[]" class="price" id="**price**" *oninput="calculate()"*>
                        <input type="text" name="Totalprice[]" id="Totalprice" >

                        &nbsp;&nbsp; </td>
                            </tr>
                            </tbody>
                            </table>
                            <div class="form-group">
                                <div class="form-group">
                                <div class="col-sm-10">
    <input type="submit" name="submit" class="btn btn-primary" id="input-text-help" style=" margin-left:300px;" >
                                </div>
                                </div>
                                </form>
                            </div>
                </div>

在我的html代码中有一个选项可以为多个插入添加更多行，当我点击添加更多选项时，它会通过javascript添加一行。在我的输入价格 oninput 调用计算函数，其中calculate函数计算两个输入字段并返回第三个字段。

它在第一行工作，但在第二行中，totalprice not work意味着计算不返回第三个字段中的任何值。

我的问题可以oninput="calculate()"在JavaScript下运行，如

点击添加更多选项

时的代码

    <script>
        $(document).ready(function(){
            //alert();
             var i = 0;
            $(".fa-plus").click(function(){
                $(".table").append('<tr><td><select name="mname[]" 
    class="mname"><option>Select Material</option><?php foreach($FetchMateril as 
    $Fetch){?><option value="<?php echo $Fetch->id;?>"><?php echo $Fetch- 
    >mname;?></option><?php }?></select></td><td><input type="text" name="qty[]" 
    ></td><td><input type="text" name="price[]" class="price" value=""></td> 
    </tr>');

            i++;
            });
        });
    </script>

我的计算功能

    function calculate() {
    var myBox1 = document.getElementById('qty').value; 
    var myBox2 = document.getElementById('price').value;
    var result = document.getElementById('Totalprice'); 

    var myResult = myBox1 * myBox2;
    //alert(myResult);
    document.getElementById('Totalprice').value = myResult;

    }

Answer 1

今年五月尝试这将有助于您

$('#price').on('keyup', function(){
   var myBox1 = document.getElementById('qty').value; 
   var myBox2 = document.getElementById('price').value;
   var result = document.getElementById('Totalprice'); 
   var myResult = myBox1 * myBox2;
   document.getElementById('Totalprice').value = myResult;
});

为什么oninput函数在JavaScript下不起作用？

1 个答案: