Xforms with javascript - determine if checkbox is checked or unchecked

Question

I am developing a form using betterFORMS which allows a user to check which fields apply to them and then send the data for processing. The form is complete and working - I just wanted to add some form validation which stops a user sending a request if none of the checkboxes are checked.

Model and Namespaces:

<?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> 

My form:

<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>

The idea is that the submit button displayed to the user calls the javascript function checkForm() and is then disabled.

The javascript function looks at each of my text boxes and if at least one is checked, sends the form using the maskButton submit, which is hidden from the user. Otherwise, display an alert message.

I have been playing around with the getElementById() function but cannot seem to get any value out of my checkbox (checked or unchecked), so that is why I am only trying to display the value in an alert. This alert should show a Y for checked or empty if unchanged or unchecked (same as the form submission). But no matter what I have tried, the alert is empty.

Another way would be to add a confirm page after the form, so all is not lost. I am asking you to see if what I want to do is possible. Thanks

Answer 1

Without any Javascript instruction, you could use the xforms:group trick to render the submit control for a specific condition. Something like this:

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

-Alain