Question

我的网络应用程序中有一个带有这些标记的表单：

<p>
    <label>Imponibile</label>
    <span class="field">
 <input type="text" name="imponibile" id="imponibile" class="width100" value="<?php echo  $pagamento['imponibile'] ?>"  />
 </span>
</p>
<p>
    <label>Iva %</label>
    <span class="field">
 <input type="text" name="iva" id="iva" class="width100" value="<?php echo  $pagamento['iva'] ?>"  />
 </span>
</p>
<p>
    <label>Totale</label>
    <span class="field" id="totale"> 0.0
 </span>
</p>

我希望当用户输入Iva％和Imponibile的值时，span totale应该填充由prevuous标签上的公式给出的值。这是我写的：

<script type="text/javascript">
  jQuery(document).ready(function(){

  ...
  $("#totale").text($("#imponibile").val()+($("#imponibile").val() * $("#iva").val()));   
  });
</script>

哪个不起作用。我没有JS或jQuery的经验。有什么帮助吗？

代码： jQuery的（文件）。就绪（函数（）{

jQuery('#datepicker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: "-80:+0",
    dateFormat: 'dd-mm-yy'
});

jQuery("#form1").validate({

    errorPlacement: function (error, element) {
        //check whether chosen plugin is initialized for the element
        if (element.data().chosen) { //or if (element.next().hasClass('chosen-container')) {
            element.next().after(error);} 
        else {element.after(error);}
    },

    ignore: [],
    rules: {
        id_progetto: "required",
        imponibile: "required",
        data_pagamento: "required",
        metodo_pagamento: "required",
        tipo_pagamento: "required",
        iva: "required",
        is_pagato: "required",
    }, 

    messages: {
        id_progetto: "Specifica il progetto di riferimento",
        imponibile: "Inserisci il valore dell'imponibile del pagamento",
        data_pagamento: "Inserisci la data del pagamento",
        metodo_pagamento: "Seleziona un metodo di pagamento",
        tipo_pagamento: "Seleziona la tipologia del pagamento",
        iva: "Inserisci il valore corretto dell'IVA",
        is_pagato: "Indica se il pagamento è stato versato",

    }
});

var value = parseFloat($("#imponibile").val()) + (parseFloat($("#imponibile").val()) * parseFloat($("#iva").val()));
$("#totale").text(value);

jQuery(".submit").click(function(){
    if(jQuery("#form1").valid())
    jQuery("#caricamento").css("display","block");
});

});

Answer 1

您应该对数值使用parseFloat：

var value = parseFloat($("#imponibile").val()) + (parseFloat($("#imponibile").val()) * parseFloat($("#iva").val()));

$("#totale").text(value);

Documentation

Answer 2

在输入更改时触发此计算

 $('#iva').on('input',function(){
    var imponibile = parseInt($("#imponible").val(), 10);
    var iva = parseInt($("#iva").val(), 10);

    // calculate
    var totale = imponibile * iva;
    // output to frontend
    $("#totale").text(totale); 
});

Answer 3

您永远不会将任何输入或任何其他事件分配给您的输入。

function Total(){
    var tIva = $('#iva');
    var tImp = $('#imponibile');
    var tT = $('#totale');

    tT.html((parseFloat(tIva.val()) + parseFloat(tImp.val())).toFixed(2))
}

$(document).ready(function(){
    $('#iva').bind('input', function(){Total()})
    $('#imponibile').bind('input', function(){Total()})
})

https://jsfiddle.net/vdfjrhu9/

或者使用jquery

https://jsfiddle.net/vdfjrhu9/1/

Answer 4

试试这个..

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

 <script>
 $('#iva').on('input',function(){
    var value = parseFloat($("#imponibile").val()) +      (parseFloat($("#imponibile").val()) * parseFloat($("#iva").val()));
$("#totale").text(value);
});
</script>

Working Fiddle Here

如何自动填充跨文本

4 个答案: