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

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") selects 包含 class="input" 的所有元素。所以要么给你的 inputText 的这个 styleClass（styleClass="xxx" 在 html 中输出为 class="xxx"），要么使用 select 或 $("input") 相反，这将 select 所有 html <input>-tags.

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

How to calculate two input form fields and put the value in another without submitting the form using jquery with JSF

jquery

jsf-2.2