Multiple form fields with same 'name' attribute not posting

Question

I'm dealing with some legacy HTML/JavaScript. Some of which I have control over, some of which is generated from a place over which I have no control.

There is a dynamically generated form with hidden fields. The form itself is generated via a Velocity template (Percussion Rhythmyx CMS) and JavaScript inserts additional hidden form fields. The end result is hidden form fields generated with the same 'name' attribute. The data is being POSTed to Java/JSP server-side code about which I know very little.

I know that form fields sharing the same 'name' attribute is valid. For some reason the POSTed data is not being recognized the back end. When I examine the POST string, the same-name-keys all contain no data.

If I manipulate the code in my dev environment such that only a single input field exists for a given name, the data IS POSTed to the back end correctly. The problem is not consistent, sometimes, it works just fine.

Is there something I can do to guarantee that the data will be POSTed? Can anyone think of a reason why it would not be?

I should really update my answer and post code here, because POST requests without 
variable strings indicates the problem is on the client side.

Solution 1

I've worked out a brute-force solution. Note that I'm pretty aware this is a hack. But I'm stuck in the position of having to work around other code that I have no control over.

Basically, I've created an ONSUBMIT handler which examines the form for the repeated hidden fields and makes sure they are all populated with the correct data. This seems to guarantee that the POST string contains data regardless of how the form gets rendered and the Java back end appears to be happy with it as well.

I've tested this in the following situations:

1. Code generates single instances of the hidden fields (which does happen sometimes)
2. Code generates multiple instances of the hidden fields
3. Code generates no instances of the hidden fields (which should never happen, but hey...)

My 'else' condition contains a tiny bit of MooTools magic, but it's otherwise straight-forward stuff.

Maybe someone else will find this useful one day...

Thanks for the help!

<form method="post" name="loginform" id="loginform" action="/login" onsubmit="buildDeviceFP(this);">
    <script type="text/javascript">
        function insertFieldValues( fields, sValue )
        {
            if ( 'length' in fields ) 
            {
                // We got a collection of form fields
                for ( var x = 0; x < fields.length; x++ ) {
                    fields[x].value = sValue;
                }
            }
            else
            {
                // We got a single form field
                fields.value = sValue;
            }
        }

        function buildDeviceFP( oForm )
        {
            // Get the element collections for Device Fingerprint & Language input fields from the form.
            var devicePrintElmts = oForm.elements.deviceprint;
            var languageElmts    = oForm.elements.language;

            // 'devicePrintElmts' & 'languageElmts' *should* always exist.  But just in case they don't...
            if ( devicePrintElmts) {
                insertFieldValues( devicePrintElmts, getFingerprint() );
            } else if ( oForm.deviceprint ) {
                oForm.deviceprint.value = getFingerprint();
            } else {
                $('logonbox').adopt(
                    new Element( 'input', {'type':'hidden', 'name':'deviceprint', 'value':getFingerprint()} )
                );
            }

            if ( languageElmts) {
                insertFieldValues( languageElmts, getLanguage() );
            } else if ( oForm.language ) {
                oForm.language.value = getLanguage();
            } else {
                $('logonbox').adopt(
                    new Element( 'input', {'type':'hidden', 'name':'language', 'value':getLanguage()} )
                );
            }
        }
    </script>

Solution 2

How about this:

<script type="text/JavaScript">
    function disableBlankValues()
    {
        var elements = document.getElementById("form1").elements;
        for (var i = 0; i < elements.length; i++)
        {
            if (elements[i].value == "")
                elements[i].disabled = true;
        }
    }
</script>

<form action="page.php" method="POST" onsubmit="disableBlankValues()" id="form1">
    <input type="hidden" name="field1" value="This is field 1."/>
    <input type="hidden" name="field1" value=""/>
</form>

---

EDIT

I now realize the actual problem (multiple variables with the same name should be passed to JSP as an array) and my solution is probably not what the OP is looking for, but I'm leaving it here just in case it happens to help someone else who stumbles upon this post.