42 lines
1.4 KiB
HTML
42 lines
1.4 KiB
HTML
{% extends "base_main.html" %}
|
|
{% block title %}{{ recipe.title }}{% endblock %}
|
|
{% block main %}
|
|
<form action="" method="post" id="add-version-form">
|
|
{%csrf_token %}
|
|
{{ recipe_form.as_div }}
|
|
<table>
|
|
{{ version_form.as_table }}
|
|
</table>
|
|
{{ ingredients_formset.management_form }}
|
|
{% for ingredient_form in ingredients_formset %}
|
|
{{ ingredient_form.as_div }}
|
|
{% endfor %}
|
|
<button id="add-ingredient" type="button">Add Ingredient</button>
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
|
|
<script>
|
|
let firstIngredientDiv = document.querySelector("input[id^=id_ingredient][id$=text]").parentElement;
|
|
let addIngredientButton = document.querySelector("#add-ingredient");
|
|
let form = document.querySelector("#add-version-form");
|
|
let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");
|
|
|
|
addIngredientButton.addEventListener('click', addIngredient);
|
|
|
|
function addIngredient(e) {
|
|
let nextIngredientIndex = document.querySelectorAll("input[id^=id_ingredient][id$=text]").length
|
|
e.preventDefault();
|
|
|
|
let newIngredientDiv = firstIngredientDiv.cloneNode(true);
|
|
let formRegex = new RegExp('ingredient-(\\d){1}-', 'g');
|
|
|
|
newIngredientDiv.innerHTML = newIngredientDiv.innerHTML.replace(formRegex, `ingredient-${nextIngredientIndex}-`);
|
|
|
|
form.insertBefore(newIngredientDiv, addIngredientButton);
|
|
totalIngredientFormsInput.setAttribute('value', `${nextIngredientIndex + 1}`);
|
|
}
|
|
|
|
</script>
|
|
|
|
{% endblock %}
|