如何在表单提交之前将 bean 值传递给 JavaScript

Question

我正在使用 JSF 制作关于乘坐 sharing/selling 公交车票的网页。
在一个特定页面上，登录用户可以发布他们的广告（提供或寻找乘车服务）。
他们应该输入如下信息：广告标题、出发城市、目的地城市、出发时间等。

我想要的是，用户获得目的地城市的天气预报显示在弹出窗口之后他们点击 提交.
这也意味着我正在使用像 openweathermap 这样的服务。

基本上，我有一个 h:form 和 h:commandButton 是这样的：

<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup()">
</h:commandButton>

问题是我不知道如何传递

的bean值

<h:inputText value="#{adBean.ad.destinationCity}"/>

到JavaScript方法showPopup()。

我试过了，但 destinationCity 结果为空。

<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup(#{adBean.ad.destinationCity})">
</h:commandButton>

为什么会发生这种情况，如何将其值传递给 JavaScript 代码？

Answer 1

它是 null 因为它被放在一个用于 javascript 的属性 (onclick) 中。像这样的属性在页面显示时是 'rendered'，而不是（再次）在提交时或其他时刻。所以如果当时初始化null，从服务端传给客户端的就是

<button value="Publish" ... onclick="showPopup(null)" />

@BalusC 在 How to invoke a bean action method using a link? The onclick does not work 中对此的引述：

In JSF, only the attributes which interpret the EL expression as a MethodExpression can be used to declare action methods. All other attributes are interpreted as ValueExpression and they are immediately executed when the HTML output is generated by JSF. This covers the onclick attribute, whose value should actually represent a JavaScript function.

客户端的 (h:?)inputText 呈现为纯 html 输入文本，因此如果您想在提交之前访问其值（例如我怀疑你想要），你可以像在普通 html/javascript 中那样在 showPopup 中这样做。

如何做到这一点 mentioned in many Whosebug Q/A so either pick one that suites you best e.g. How do I get the value of text input field using JavaScript?, but make sure to also read How can I know the id of a JSF component so I can use in Javascript

如何在表单提交之前将 bean 值传递给 JavaScript

How to pass bean value to JavaScript before form submit

javascript

forms

jsf

managed-bean

commandbutton