如何计算两个输入表单字段并将值放入另一个表单而不使用 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 页面
<!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>
你只是犯了一个很小的错误; $(".input")
selects 包含 class="input"
的所有元素。所以要么给你的 inputText
的这个 styleClass
(styleClass="xxx"
在 html 中输出为 class="xxx"
),要么使用 select 或 $("input")
相反,这将 select 所有 html <input>
-tags.