Tumgik
#@fruittables
imaf00die777 · 2 years
Text
750 notes · View notes
codehunter · 2 years
Text
Howto: Dynamically generate CSRF-Token in WTForms with Flask
I have a fruits form that has one FieldList object for the bananas:
bananas = FieldList(FormField(BananaForm))
In the frontend, initially, I add one of those fields to the FieldList
form.append_entry()
Now with Javascript I managed to create functions, that can dynamically add (plus button) or remove (minus button) the number of BananaForm fields that can be filled with information.
FielstList automatically creates ids for all of its fields. So to do dynamical adding with js, I duplicate the HTML code and set the field id += 1, like:
first field:
<tr> <td><input id="bananas-0-originCountry" type="text" /></td></tr>
duplicated field with += 1:
<tr> <td><input id="bananas-1-originCountry" type="text" /></td></tr>
When I name them accordingly like this and submitting the form, WTForms will automatically recognize the added fields in the backend (works fine).
So far so good, but here is my problem:For a form to be valid, I have to add CSRF-fields to every WTForm. In the Jinja template I do this with:
{{ form.hidden_tag() }}
However, when I just copy the HTML with my js function, I'm missing the CSRF-fields (because until submitted, the backend form object doesn't know about the added FormFields). So how can I generate these CSRF-fields dynamically? (An Ajax Request? If yes, how?)
This should be a standard use case with forms and flask. I hope my description was understandable, if not please let me know. Any help appreciated!
UPDATE: Here is my code
JS-functions
function addBanana(){ // clone and insert banana node var node = document.getElementById("fruitTable"); var trs = node.getElementsByTagName("tr"); var tr = trs[trs.length-2]; var tr2 = tr.cloneNode(true); tr.parentNode.insertBefore(tr2, tr); // in order to increment label and input field ids function plusone(str){ return str.replace( new RegExp("-(\\d+)-", "gi"), function($0, $1){ var i = parseInt($1) + 1; return "-" + i + "-"; } ); } // change inputs var inputs = tr.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++){ inputs[i].setAttribute("id", plusone(inputs[i].getAttribute("id"))); } var minusbutton = ['<td>', '<button class="btn" type="button" onClick="removeBanana()"><i class="icon-black icon-minus"></i></button>', '</td>' ].join('\n'); // only append at the first add // second add automatically copies minus button if (trs.length < 6){ tr.innerHTML += minusbutton }}function removeBanana(){ var node = document.getElementById("fruitTable"); var trs = node.getElementsByTagName("tr"); var tr = trs[trs.length-2]; var trParent = tr.parentNode; trParent.removeChild(tr);}
Jinja Template:
<form method="POST" action="newsubmit"> {{ form.hidden_tag() }} <table id="fruitTable" class="table"> {{ render_field(form.description) }} <tr><td><h3>Bananas</h3></td></tr> {% set counter = 0 %} {% for banana in form.bananas %} <tr> {{ banana.hidden_tag() }} {% set counter = counter + 1%} {% for field in banana if field.widget.input_type != 'hidden' %} {{ render_field_oneline(field) }} {% endfor %} {% if counter > 1 %} <td> <button class="btn" type="button" onClick="removeBanana()"><i class="icon-black icon-minus"></i></button> </td> {% endif %} </tr> {% endfor %} <tr><td></td><td><button class="btn" type="button" onClick="addBanana()"><i class="icon-black icon-plus"></i></button></td></tr> </table><input class="btn btn-primary" style="margin-left:300px;"type="submit" value="Submit" /></form>
Jinja Template Macros:
{% macro render_field_oneline(field) %}<td>{{ field.label }}</td><td>{{ field(**kwargs)|safe }} {% if field.errors %} <ul class=errors> {% for error in field.errors %} <li>{{ error }}</li> {% endfor %} </ul> {% endif %}</td>{% endmacro %}{% macro render_field(field) %}<tr> {{ render_field_oneline(field) }} </tr>{% endmacro %}
https://codehunter.cc/a/flask/howto-dynamically-generate-csrf-token-in-wtforms-with-flask
0 notes
chefbfoods · 5 years
Photo
Tumblr media
When It All Falls Down!!! #fruit #love #fruitdisplay #fruittable #strawberries #CHEFB #CulinaryMastersbyChefB #catering #EATPRAYSHARE https://www.instagram.com/p/Bu1SEvrn0kh/?utm_source=ig_tumblr_share&igshid=1lg7lt3jsb9ok
1 note · View note
Photo
Tumblr media
Decent stage Book your events now. For call 0333-5546095 & 0345-2525250 For whatsapp +92-345-2525250 #MehriaWeddingMarquees #AStyleBeginsFromHere #YouInviteTheGuestWeDoTheRest #MehriaTownAttock #EventManagent #WeddingPlanners #CorporateEvents #OutdoorEvents @studiografixsign #ImranPhotography #FruitTable (at Mehria Wedding Marquees) https://www.instagram.com/p/BpjaizNH-NR/?utm_source=ig_tumblr_share&igshid=tl69lofzd085
0 notes
lci-caterers-blog · 6 years
Photo
Tumblr media
LCI Caterers serving up DELICIOUSNESS from Midtown to The Upper West Side of Manhattan! #lovemyjob #weddingcatering #WEDDINGCATERER #eventplanner #weddingcoordinator #THEKNOT #bestofweddings #bklofts #midtownloftandterrace #dumboloft #26bridge #wloft #greenpointloft #fruit #fruittable #fruitdisplay #lcicaterers #nycaterers #bestcaterersinNY #nyccaterer #churrosstation (at Midtown Loft & Terrace)
0 notes
chefbfoods · 4 years
Photo
Tumblr media
Wedding Season is COMING!!!! Order your Fruit Presentations from the BEST in the business!!! #CHEFB #fruit #fruitdisplay #fruittable #fruitpresentation #catering #banquet WWW.CHEFBFOODS.COM LIKE! SHARE! FOLLOW @chefbfoods https://www.instagram.com/p/CAX7_JbnIZ_/?igshid=1m8r9t3ua3vre
0 notes
chefbfoods · 5 years
Photo
Tumblr media
#CHEFB The Fruit Display KING!!! #fruittable #fruitdisplay #fruit #fruitti https://www.instagram.com/p/BznqCQontaa/?igshid=1rakxckyjqnep
0 notes
chefbfoods · 5 years
Photo
Tumblr media
If you give me a piece of fruit and a knife... at any giving moment I will give you a work of art!!! #CHEFB #batonrouge #chef #gourmet #culturesportsbar #executivechef #culinaryskills #prettyplate #happyplate #talent #followme #celebritychef #restauranteur #restaurants #cajun #creole #shrimp #tasso #cuisine #neworleansfood #foodie #louisiana #delicious #tasty #sacrifice #fruit #fruitdisplay #fruittable https://www.instagram.com/p/B2MQKsMHOR40DeHILYCE63IaJkKsG2UC3QgtfE0/?igshid=f7ouyy8ugvqm
1 note · View note
chefbfoods · 5 years
Video
#fruit #fruittable #fruitdisplay #CHEFB https://www.instagram.com/p/B0zuWpqn_34/?igshid=1rippjuwvlmyc
0 notes
chefbfoods · 5 years
Photo
Tumblr media
Oooops... We tipped over the fruit basket! #CulinaryMastersbyChefB #CHEFB #fruittable #fruitdisplay https://www.instagram.com/p/Brdf4hzHZXC/?utm_source=ig_tumblr_share&igshid=12yd1e1yaja7z
0 notes
lci-caterers-blog · 6 years
Photo
Tumblr media
LCI Caterers kicking it with our friends at #queensbotanicalgarden Always a great time opening up soon to be Wed couples to a whole new world of modern catering. Tje Skies the limit and beyond in our kitchen. #weddingcatering #WEDDINGCATERER #eventplanner #weddingcoordinator #THEKNOT #bestofweddings #bklofts #midtownloftandterrace #dumboloft #26bridge #wloft #greenpointloft #fruit #fruittable #fruitdisplay #lcicaterers #nycaterers #bestcaterersinNY #nyccaterer #churrosstation #lovemyjob #queensbotanicalgarden #weddingwire #rstudios #atlantishall #foodies (at Queens Botanical Garden)
0 notes