Question

我有三个字段，分别是数量，费率和总金额。每当我输入费率和数量字段时，两个值都应相乘并显示在总金额列中而不刷新页面。为此，我使用jquery但没有得到输出。在哪里我犯了错误，根本原因是什么......

这是我的JSF页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>ACIM</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/global.css" />
    <h:outputScript library="primefaces" name="jquery/jquery.js"
        target="head" />
    <h:outputScript target="head">
     $ = jQuery;
            $(document).ready(function(){
        $(".input").keyup(function(){
              var val1 = +$("#myForm\\:quantity").val();
              var val2 = +$("#myForm\\:rate").val();
              $("#myForm\\:totalAmount").val(val1+val2);
         }); 
    });
    </h:outputScript>
</h:head>
<h:body>

    <h:form id="myForm">
        <h:panelGrid columns="4" cellpadding="5">

            <h:outputText value="Quantity: " />
            <h:inputText id="quantity" value="#{myBean.quantity}">
            </h:inputText>

            <h:outputText value="rate" />
            <h:inputText id="rate" value="#{myBean.rate}">
            </h:inputText>

            <h:outputText value="totalAmount " />
            <h:inputText id="totalAmount" value="#{myBean.totalAmount}"
                disabled="true">
            </h:inputText>
        </h:panelGrid>
    </h:form>
</h:body>
</html>

Answer 1

你只有一个很小的错误; $(".input")选择class="input"的所有元素。因此，要么将inputText styleClass提供给styleClass="xxx"（class="xxx"在html中输出为$("input")，要么使用选择器<input>代替所有选择$(document).ready(function(){ var span = $("span[class]"); for(var i=0; i<span.length;i++){ animate = function(x){ //console.log(x); setTimeout(function(){ x.addClass("scale").prev().removeClass("scale"); }, i*2000); }; animate(span.eq(i)); }; }); html .animate { font-size:14px; -webkit-transition: font-size 1s; -moz-transition: font-size 1s; -ms-transition: font-size 1s; -o-transition: font-size 1s; transition: font-size 1s; } .scale { font-size: 3.5em; } .animate:hover{ font-size: 3.5em; } - 标签。

如何计算两个输入表单字段并将值放在另一个表中，而不使用jquery和JSF提交表单

1 个答案: