Seit 2002 Diskussionen rund um die Programmiersprache Python
https://www.python-forum.de/
Die Hauptarbeit macht doch jQuery. Lediglich das notwendige durchnummerieren der Namen der Formfelder ist plattes JS ohne Query.Das ist ganz schön viel Javascript, ich glaube mit jQuery müsste es einfacher gehen.
Dann hast du mit Sicherheit den Übertrag von Bottle nach Flask falsch gemacht. in Bottle steht das `!` dafür, dass der nachfolgende String im Template _nicht_ escaped wird.jinja2.exceptions.TemplateSyntaxError: unexpected char '!' at 7296
Code: Alles auswählen
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Forms</title>
<script src="static/jquery-2.2.0.min.js"></script>
</head>
<body>
<form action="/ingredients" method="POST">
<div class="input_fields_wrap">
<!-- here goes the form fields -->
</div>
<button class="add_field_button">Add field</button>
<button class="remove_field_button">Remove field</button>
<input type="submit">
</form>
<script>
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var addButton = $(".add_field_button"); //Add button ID
var removeButton = $(".remove_field_button"); //Add button ID
var htmlString = '<div id="input_fields_0">{{ !form.ingredients }}</div>';
var field_counter = 0;
$(wrapper).append(makeString()); //add the first form
$(addButton).click(function(e){ //on add input button click
e.preventDefault();
if(field_counter < max_fields){ //max input box allowed
field_counter++;
$(wrapper).append(makeString());}
else { window.alert('max number of ingredients reached!')}
});
$(removeButton).click(function(e){ //on remove input button click
e.preventDefault();
if(field_counter > 0){ //make sure at least one field is there
$('#input_fields_'+field_counter).remove();
field_counter--;}
else { window.alert('Cannot delete, one input has to remain.')}
});
function makeString() {
var myString = htmlString;
return myString.replace(/0/g, field_counter);
};
});
</script>
</body>
</html>