Using the product form tag and javascript to duplicate a product modifier field

Question

Im building a ticketing system with expresso store and I'm having issues duplicating the product modifier. My custom modifier is a text input field that adds a name to each ticket. Any Ideas on what would be the best way to go about this?

here is my product template:

    {embed="store_example/_header"}
<script type="text/javascript"> 
function repeat(obj) {
    var CurrentLi = $(obj).parent("li").append();
    CurrentLi.clone().insertAfter(CurrentLi);
}
</script>
{exp:store:product_form }
<div class="ticket-wrap">
    {exp:channel:entries channel="tickets"  }
        {exp:store:product entry_id="{entry_id}" disable_form="yes"}
        <p>Ticket Price: {price}</p>
        <div class="ticket">
            {modifiers}
                <ul>
                    <li><label>{modifier_name} {count} </label><input type="text"  name="items[{count}][{modifier_input_name}]" /> <a class="add" href="#" onclick="repeat(this)">+</a></li>
                    <li><input type="hidden" name="items[{count}][entry_id]" value="{entry_id}" /></li>
                </ul>
            {/modifiers}
        </div><!-- /ticket -->
        {/exp:store:product}
    {/exp:channel:entries}
</div> <!-- /ticket-wrap -->
<input type="submit" name="submit" value="Add to Cart" />
{/exp:store:product_form}
{embed="store_example/_cart"}
{embed="store_example/_footer"}

Answer 1

You can't simply submit extra modifiers which weren't specified when you created the product.

If you want to submit custom text fields with the product, you need to specify them in your product tag. This is known as "custom product modifiers":

https://exp-resso.com/docs/product_tag.html#inputcustom_modifier_name