javascript - Change the value of xforms element via javascript?

Question

I was wondering if it's possible to change the value of an xforms element via javascript and then submit the form with that value?

what i have tried is change the text of an xforms:input when an <input type="file"> is triggered and it works, the thing is that when i submit the form, the xforms:input doesn't seem to apply the value

<div id="ubi" class="controls">
     <xf:input ref="ubicacion"/>
     <input class="input-file" id="fileadjunto" type="file" onchange="uploadfile()"/>
</div>

<script>
        function uploadfile()
        {{
            var inp = document.getElementById('fileadjunto');
            var name = inp.files.item(0).name;
            var span1 = document.getElementById('ubi').getElementsByTagName('span')[0].getElementsByTagName('span')[0].getElementsByTagName('input')[0];
            span1.value = name;
        }};
</script>

why am i getting the spans and inputs? if you check the xforms:input element in the console you'll see that it's converted to

<span .....>
    <span.....>
         <input..../>
    </span>
</span>