<script type="text/javascript">
$(document).ready(function(){
$("#btn2").click(function(){
$("#addrunner").append('[[$formit]]');
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>
<button id="btn2">Append list item</button>
<div class="clear"></div>
<div id="addrunner" class="ten columns"></div>
In the [[$formit]] chunk it a complete formit form. I need to add a new form each time the button is clicked. It works if a add simple text or div but not the form.
What am I missing?
Everything I know I learned on the internet. Saved me thousands in College tuition,
My guess is that this is a parsing order issue.
You might try putting the full FormIt tag itself on the page inside a div with a class that's specified in the CSS as display:none. Then use your onClick function to change the div's class to one with display:block. It should be significantly faster as well and will use less code.
You could also do something like this, since you're using JQuery (this is off the top of my head and may not be quite right):
<div id='MyFormitForm'>
... formit tag here
</div>
You could also slide the form in if you like.
