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

http://stackoverflow.com/questions/11440128/jquery-check-if-checkbox-is-not-checked/11440171#11440171 You want to look for the property "checked" inside each checkbox. Change your alert to otherCheckValue.checked and it should be true or false, depending on wether it is checked or not. — Pablo Mescher, Jan 10 '14 at 16:52
I tried using the checked property in place of .value but it always shows false — a.hrdie, Jan 10 '14 at 17:06

score 1 · Accepted Answer · answered Jan 10 '14 at 16:43

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

answered Jan 10 '14 at 16:43

Alain Couthures

1,488
9
5

This sounds like it could work, but I need to check multiple boxes. Could I have more than one xpath in the ref? Or would I have to create a group for each? Thank you – a.hrdie Jan 10 '14 at 17:08
1

@a.hrdie: the part between the square brackets is a boolean expression, that allows grouping in braces, ands, and ors. You could do something like `ref=".[detail/other != '' && detail/otherCheck-value != '']"` – grtjn Jan 10 '14 at 19:49
1

@a.hrdie: woops, I'm afraid I made a typo. It's not `&&`, but `and` in XPath. Pity I can't edit my comment.. – grtjn Jan 11 '14 at 16:54
This worked great! I used an 'or' operator instead of the 'and' though, @grtjn but it does exactly what I want without overcomplicating things. thanks guys – a.hrdie Jan 13 '14 at 09:31

Xforms with javascript - determine if checkbox is checked or unchecked

1 Answers1