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

stackoverflow.com/questions/11440128/… 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
– Pablo Mescher, Commented Jan 10, 2014 at 16:52
I tried using the checked property in place of .value but it always shows false — a.hrdie
– a.hrdie, Commented Jan 10, 2014 at 17:06

Alain Couthures · Accepted Answer · 2014-01-10 16:43:02Z

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, 2014 at 16:43

Alain Couthures

1,5239 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

a.hrdie Over a year ago

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

grtjn Over a year ago

@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 Over a year ago

@a.hrdie: woops, I'm afraid I made a typo. It's not &&, but and in XPath. Pity I can't edit my comment..

a.hrdie Over a year ago

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

Collectives™ on Stack Overflow

Xforms with javascript - determine if checkbox is checked or unchecked

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related