Some fields of a form in foundation reveal - forms

Question

I wish to display some fields of my form in foundation reveal along with the submit button.
Something like:
<form action="" method="POST">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div id="display_detail" class="reveal-modal" data-reveal>
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
But when the link "Submit" is clicked, I see that the reveal-data div is actually put outside the form. How can this be rectified?

Answer 1

To make sure the Reveal modal actually hovers above the page, and not within some relatively positioned element, it is necesary to move the html to the top level body element.
To deal with this I didn't try to hack into the Reveal plugin to stop this behaviour, instead I added an event listener to a new form that duplicated the entries:
<form action="" method="POST" id="baseform">
{% csrf_token %}
<div class="large-8 columns">
<input type="text" name="name" label="name"></input>
</div>
Submit
<div>
<!-- preferably hide this block using JS -->
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</div>
</form>
<div id="display_detail" class="reveal-modal" data-reveal>
<form data-linked-form="baseform">
<input type="text" name="age" label="name"></input>
<input type="submit" value="Submit" class="button">
</form>
</div>
Then using coffeescript:
# duplicate values
$(document).on('input', 'form[data-linked-form]', (e)->
form = e.currentTarget
input = e.target
document.forms[form.dataset.linkedForm].elements[input.name].value = input.value
)
# submit the linked form, instead of itself
$(document).on('sumit', 'form[data-linked-form]', (e)->
form = e.target
document.forms[form.dataset.linkedForm].submit
)