无法使用 JavaScript 访问 <h：selectOneRadio ...>

Question

我正在开发一个JSF 2.2应用程序，并希望使用JavaScript更改单选按钮。 我在 JavaScript 中使用 HTML5 地理位置获取纬度和经度，并希望将它们传递给连接到 Java Bean 的 xhtml 页面，以便在提交时将其发送到服务器上的 Java 代码进行处理。

地理位置以度和度的分数获取纬度和经度，我将其转换为度、分和秒，然后使用如下代码将值传递给 JavaScript 中的输入字段：

document.getElementById("lat-deg").value = latDeg;

它将 XHTML 代码中的纬度插入

为

<h:inputText class="coord" id="lat-deg"
validatorMessage="Error: Degrees of latitude must be a number between 0 and 90"
value="#{solarPower.latDeg}">
<f:validateRegex pattern="[0-9]+" />
<f:validateLongRange minimum="0" maximum="90" />
</h:inputText>

同样，纬度的分秒，以及经度的度、分和秒。 当单击按钮以调用 JavaScript 代码时，这完全可以正常工作。

但是，我想对负纬度(南(和负经度(西(使用单选按钮，但经过多次尝试，我无法使其工作。

在我的JavaScript代码中，我有以下内容：

var lat = position.coords.latitude;
var latMinus = false;
if (lat < 0) latMinus = true;
lat = Math.abs(lat);
var latDeg = Math.floor(lat);
// Get also latMin and latSec, then update the <h:inputText ...> fields
if (latMinus) {
document.getElementById("south").checked = true;
} else {
document.getElementById("north").checked = true; // <===
}

代码在 Firefox 控制台显示消息时指示的行处失败：

TypeError： document.getElementById(...( 为 null

当它尝试将单选按钮设置为"N"时。 在南半球，它将在前一个文档中失败。陈述。

对应的 xhtml 代码是：

<h:selectOneRadio id="lat-radio" value="#{solarPower.latNS}">
<f:selectItem id="north" itemValue="N" itemLabel="N" />
<f:selectItem id="south" itemValue="S" itemLabel="S" />
</h:selectOneRadio>

对经度重复此操作。

我尝试用这个替换上面的JavaScript代码：

if (latMinus) {
document.getElementById("lat-radio").itemValue = "S";
} else {
document.getElementById("lat-radio").itemValue = "N";
}

但它仍然失败，但这次控制台中没有打印任何内容。

在查看浏览器看到的 html 源代码时，以下代码是由 JSF 生成的

<td>
<input type="radio" checked="checked" name="lat-radio" id="lat-radio:0" value="N" /><label for="lat-radio:0"> N</label></td>
<td>
<input type="radio" name="lat-radio" id="lat-radio:1" value="S" /><label for="lat-radio:1"> S</label></td>

显然，它将id="lat-radio">

更改为"lat-radio：0"和"lat-radio：1"，这可能与我遇到的问题有关。 最后，我还尝试在 JavaScript 代码中访问 ids "north" 和 "south"，但没有成功。

到目前为止，在网上找到有关如何使用 JavaScript 更改 JSF 单选按钮的信息并不容易，并且非常感谢解决此问题的一些帮助 - 提前非常感谢。

Answer 1

如果您希望能够提交输入值，请将输入组件放入表单中：

<h:form id="frmGeo">
<h:panelGroup id="radioNorthVsSouth">
<h:selectOneRadio id="lat-radio">
<f:selectItem itemValue="N" itemLabel="N" />
<f:selectItem itemValue="S" itemLabel="S" />
</h:selectOneRadio>
</h:panelGroup>
</h:form>

客户端都是纯html，选择"jsf单选按钮"就像在纯html中选择单选按钮一样。因此，在这种情况下，您可以像这样调整输入：

if (latMinus) {
document.getElementById('frmGeo:radioNorthVsSouth')
.querySelectorAll('input[value=S]')[0].checked=true;
} else {
document.getElementById('frmGeo:radioNorthVsSouth')
.querySelectorAll('input[value=N]')[0].checked=true;
}

或者这个不那么冗长但也不太富有表现力的：

if (latMinus) {
document.getElementById('frmGeo:lat-radio:1').checked=true;
} else {
document.getElementById('frmGeo:lat-radio:0').checked=true;
}

Answer 2

非常感谢 - 我得到了不那么冗长的版本，但没有更详细的版本。 我已经在表单中拥有 xhtml 代码，但发现 h：panelGroup 标签是多余的。

这是我的 xhtml 代码：

<h:form id="index-form" prependId="false">
<!-- Other code -->
<h:selectOneRadio id="lat-radio" value="#{solarPower.latNS}">
<f:selectItem itemValue="N" itemLabel="N" />
<f:selectItem itemValue="S" itemLabel="S" />
</h:selectOneRadio>
<!-- Other code including the equivalent for longitude -->
</h:form>

我的JavaScript代码的相关部分如下：

if (latMinus) {
document.getElementById("lat-radio:1").checked=true;
} else {
document.getElementById("lat-radio:0").checked=true;
}

经度也是如此。

请注意，在我的情况下，没有必要用"index-form："作为id的前缀，因为我在h：form tage中添加了prependId="false"属性。