使用javascript进行Xforms - 确定是选中还是取消选中复选框

时间:2014-01-10 15:45:41

标签: javascript forms checkbox xforms xforms-betterform

我正在使用betterFORMS开发一个表单,它允许用户检查哪些字段适用于它们,然后发送数据进行处理。表单已完成且正常工作 - 我只想添加一些表单验证,如果没有选中任何复选框,则会停止用户发送请求。

模型和命名空间:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
xmlns="http://www.w3.org/2002/06/xhtml2" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema"
<xsl:output method="xml" />
<xsl:template match="/">
<xforms:model id="documentsChecklist">
    <xforms:instance>   
        <actionform xmlns="">
            <xforms:model id="documentsChecklist">
                <xforms:instance>   
                <actionform xmlns="">
                    <detail>        
                        <other></other>
                        <otherText></otherText>
                    </detail>
                </actionform>
    </xforms:instance>
    <xforms:bind id="other" nodeset="/actionform/detail/other" calculate="choose(. = 'Y', ., 'N')"/>
    <xforms:bind nodeset="/actionform/detail/otherBox" relevant="/actionform/detail/other ='Y'" /> 
</xforms:model> 

我的表单:

<div id="formBody"><br />
    <xforms:select bind="other" appearance="full" align="right">
        <xforms:item>
            <xforms:label>Other</xforms:label>
            <xforms:value>Y</xforms:value>
        </xforms:item>
    </xforms:select>
    <xforms:input ref="/actionform/detail/otherText">
        <xforms:label>Please specify:*</xforms:label>
    </xforms:input>
    <xforms:submit submission="formSubmit" id="send" class="ui-button" onclick="checkForm(this);return false;">
        <xforms:label>Send</xforms:label>
    </xforms:submit>
</div>

    <xforms:submit submission="formSubmit" id="maskButton" class="ui-button">
        <xsl:attribute name="style">display:none</xsl:attribute>
    </xforms:submit>

    <script type="text/javascript">
        function checkForm(){
            var otherCheckValue = document.getElementById('otherCheck-value');
            alert(otherCheckValue.value);
            if(boxesChecked != 0){
                document.getElementById('maskButton-value').click();
            }
        }
    </script>

</xsl:template>
</xsl:stylesheet>

这个想法是显示给用户的提交按钮调用javascript函数checkForm()然后被禁用。

javascript函数查看我的每个文本框,如果至少检查了一个,则使用maskButton提交发送表单,该提示对用户是隐藏的。否则,显示警告消息。

我一直在使用getElementById()函数,但似乎无法从我的复选框中获取任何值(选中或取消选中),这就是为什么我只是尝试在警报中显示值。如果未更改或未选中,此警报应显示Y为已选中或为空(与表单提交相同)。但无论我尝试过什么,警报都是空的。

另一种方法是在表单后面添加一个确认页面,这样一切都不会丢失。我问你看看我想做什么是可能的。感谢

1 个答案:

答案 0 :(得分:1)

如果没有任何Javascript指令,您可以使用xforms:group技巧呈现特定条件的提交控件。像这样:

<xforms:group ref=".[detail/other != '']">
  <xforms:submit .../>
</xforms:group>

-Alain