Ok, let me give you some answers (finally). The solution will depend on your JS skills - upon clicking on 'Add product' you'll need to add a new row and clone the dropdown with javascript. CouchCMS will take care of the rest if you do the steps below -
(a) I suggest to make your 'bill' form as a whole - a databound form, bound to 'bills.php' template with mode='create'. So upon a successful submission the form will create a new cloned page in backend with relation of a bill to the products as one-to-many (you have to have that relation established).
(b) Initially place one pre-filled dropdown in the form as a regular input (use cms:pages to create the list of options), mind the name must have [] brackets and final look could be like this with value having the id of the page:
- Code: Select all
<select name="my_products[]">
<option disabled selected value> -- select a product -- </option>
<option value="11">Volvo</option>
<option value="12">Saab</option>
<option value="13">Fiat</option>
<option value="14">Audi</option>
</select>
That dropdown is your first visible dropdown. I hope you can use JS to clone that dropdown and place it in a new row if user wishes to add a new product below.
At the end, user will submit the form and Couch must catch all those submitted dropdowns. We will use the comma-separated list of values, which are product ids, and place it into cms:db_persist_form tag to populate the editable of relation - remember that saving relation editables via cms:db_persist take comma-separated string of ids. CouchCMS can catch regular inputs into a dummy cms:input of type 'checkbox' and generate such comma-separated string for us - this is exactly why names of 'select' must have brackets and names must be identical ('my_product' in the sample).
(c) Using checkbox in hide to catch those -
- Code: Select all
<cms:hide>
<cms:input type='checkbox' name='my_products' />
</cms:hide>
Final sample of a simple non-databound form below -
- Code: Select all
<cms:form method="post" anchor='0'>
<cms:if k_success>
<cms:if frm_my_products>
<h2>Selected product id(s) are: <cms:show frm_my_products /></h2>
<cms:else />
<h2>Nothing selected!</h2>
</cms:if>
</cms:if>
<cms:hide>
<cms:input type='checkbox' name='my_products' />
</cms:hide>
<select name="my_products[]">
<option disabled selected value> -- select a product -- </option>
<option value="11">Volvo</option>
<option value="12">Saab</option>
<option value="13">Fiat</option>
<option value="14">Audi</option>
</select>
<select name="my_products[]">
<option disabled selected value> -- select a product -- </option>
<option value="11">Volvo</option>
<option value="12">Saab</option>
<option value="13">Fiat</option>
<option value="14">Audi</option>
</select>
<cms:input type='submit' name='submit' value='Submit'/>
</cms:form>
You'll need to take this sample, run it and understand how things work. Then adapt it to the databound form and add warranty js.