Jinja 2 - Django Form : rendering encodes HTML - python

I was testing Jinja2 in a Django project and have a strange output.
When I render the form, some characters are HTML encoded (< > etc.)
In the template :
{{ form.as_p() }}
It renders to the browser :
<p><label for="id_username">Utilisateur:</label> <input autocomplete="off" id="id_username" type="text" name="username" maxlength="100" /></p> <p><label for="id_password">Mot de passe:</label> <input autocomplete="off" type="password" name="password" id="id_password" /></p>
Looking at sources :
&lt;p&gt;&lt;label for=&quot;id_username&quot;&gt;Utilisateur:&lt;/label&gt; &lt;input autocomplete=&quot;off&quot; id=&quot;id_username&quot; type=&quot;text&quot; name=&quot;username&quot; maxlength=&quot;100&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;label for=&quot;id_password&quot;&gt;Mot de passe:&lt;/label&gt; &lt;input autocomplete=&quot;off&quot; type=&quot;password&quot; name=&quot;password&quot; id=&quot;id_password&quot; /&gt;&lt;/p&gt;
Does anyone know this problem ?

Jinja2 tries to be safe by HTML-escaping the data. So you have to use |safe filter.
Though I haven't used Django with Jinja2, I believe this should work:
{{ form.as_p()|safe }}

Related

automate filling in web forms

There is a text box (ID) on the website and I want to put 10,000 data in it. After placing each data in this text box, results are displayed in other text boxes according to the ID.
Textbox ID :
<input class="form-control ltr left text-box single-line" data-val="true" data-val-regex="It is 10 numbers" data-val-regex-pattern="^[0-9]{10}$" data-val-required="*required" id="NId" maxlength="10" name="NId" onblur="LoadInfo()" type="text" value="">
Textobx Name (fill after enter the ID in text box) :
<form action="/Employees/Manager/SavePerson" data-ajax="true" data-ajax-begin="onpostcreatebegin" data-ajax-complete="onpostcreatecomplete" data-ajax-loading="#ajaxloading" data-ajax-method="post" data-ajax-mode="replace" data-ajax-update="#result" id="form0" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="asdxBadsP7CpS53654as6dadH3865asdadKhjasdad"> <input type="hidden" name="empId" id="empid" value="0">
<div class="panel panel-info">
<div class="panel-body">
<input data-val="true" data-val-regex="It is 10 numbers" data-val-regex-pattern="^[0-9]{10}$" data-val-required="*required" id="NId" name="NId" type="hidden" value="1234567890">
<input data-val="true" data-val-number="The field PersonId must be a number." data-val-required="The PersonId field is required." id="PersonId" name="PersonId" type="hidden" value="254102232">
<input data-val="true" data-val-required="The GuidId field is required." id="GuidId" name="GuidId" type="hidden" value="665xs6asd-cxc2-wq56-8888-30654998b166">
<div class="form-group">
<div class="col-md-4">
<input class="form-control text-box single-line" data-val="true" data-val-regex="enter the name." data-val-regex-pattern="^[\u0600-\u06ff\s]+$|[\u0750-\u077f\s]+$|[\ufb50-\ufc3f\s]+$|[\ufe70-\ufefc\s]+$|[\u06cc\s]+$|[\u067e\s]+$|[\u06af\s]$|[\u0691\s]+$|^$" data-val-required="*required" id="Firstname" name="Firstname" type="text" value="jack">
<span class="field-validation-valid text-danger" data-valmsg-for="Firstname" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
</form>
The page will not reload after entering the value in the text box ID. Shows the value on that page. What solution do you suggest? I do not know which method to consider that is the most optimal method. Can you introduce the most optimal and practical method?
Depending on how complex the task is, you can use either Selenium (Selenium is a script-controlled Browser) with Firefox WebDriver, for example.
It is of course also possible to use the request methods GET and POST as a method with more work but much higher performance.

bootstrap tags input tag value is not submitting with form

Can someone explain what is going on here? I don't understand why the values that I submit in the tag input field are not being submitted with the form. I've tried this with both examples
and neither will send the values correctly.
I am using bootstrap4-tagsinput
HTML CODE:
<form class="needs-validation" action="/archive" enctype="multipart/form-data" method="POST">
<div class="form-group">
<label>Solution Name</label>
<input name="solution_name" type="text" class="form-control" required>
<label>Vendor Name</label>
<input name="vendor_name" type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Attachment</label>
<input name="file" type="file" class="form-control-file" required>
</div>
<div class="form-group">
<label>Tags</label>
<input class="form-select" name="tags" data-role="tagsinput">
</input>
</div>
<button type="submit" value="upload" class="btn btn-primary">Submit</button>
</form>
Server
#review_archive_host.route('/archive', methods=["GET", "POST"])
#login_required
def archives():
if "review_archive" not in session['u']['flags']:
flash("You do not have permissions to access that feature/page")
return redirect(get_redirect_url())
#archive search page
if request.method == "POST":
#create a new archive record
d = request.form.to_dict(flat=True) or {}
return d
Example form and response:
response:
{
"solution_name": "asdfs",
"tags": "",
"vendor_name": "asfsd"
}
In the documentation of the link you provided informs that this puglin was designed for Bootstrap 2.3.2 and 3. By the tag of your question, I saw that you are using 4.
And others people having issues using it on Bootstrap 4.
I uploaded a small example based on your form and method for Github, but using version 3 of Bootstrap and it worked as expected.
An alternative could be this. They fix the compatibility problem with bootstrap 4 based on the plugin you used initially
EDIT:
After your answer's update using Nodws/bootstrap4-tagsinput I made a small test using this plugin and I was able to reproduce the problem.
When analyzing the request.form sent, I noticed that with this version of the plugin the key tags are coming in duplicate.
ImmutableMultiDict([('vendor_name', u'vendor'), ('solution_name', u'solution'), ('tags', u''), ('tags', u'tag1,tag2')])
Because of that you dont get any value when your route parser the form to dict.
I replicate your code with this another version of plugin and now is working as expected.
The complete example continues on my Github.
The plugin in the documentation is for bootstrap 2.3.2 or 3 and would not work for bootstrap 4.
In order to use that plugin, you could downgrade your bootstrap to version 3.
An alternative would be the Bootstrap 4 Tag Input Plugin With jQuery - https://www.jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html

html dropdown containing list python output

I am trying to use the list from my python output into a dropdown menu in an HTML form.
I have a website built in HTML/ CCS, a server with nodeJS, and several scripts i want to use in python3.
I currently have no idea how to integrate the python output to the dropdown. Do i need to use Javascript or my node server is enough?
My HTML form
<form action="/LUNProvisionning" method="post">
<fieldset>
<legend>LUN Provisionning</legend>
<br />
<label>Choix du serveur : </label>
<select id="serveur" name="serveur">
# put python output here!!
<option value="1">no serveurs</option>
</select>
<br />
<label>Volumétrie en Go 5 - 1000 : </label>
<input type="number" min="5" max="1000" placeholder="500" name="volumetrie" required>
<br />
<label>Type de provisionning : </label>
<select id="provisionning" name="type" required>
<option value="Thin">Thin</option>
<option value="Deco">Deco</option>
</select>
<br/>
<input type="submit" value="Submit">
</fieldset>
</form>
python output:
SSD_r1
SSD_r5
SSD_r6
fs_cpg
CPG4S2
These need to be in the dropdown above.
I have a node server that i can show if it's relevant.
Thank you very much for your help.
Any informations or links, anything can help.

Tornado templates setting value field

I have a python array:
a=["a","b","c","d","e","f"]
I pass this as a value to tornado render:
self.render("index.html", a=a)
In my html I have the following:
<input type="hidden" id="xxx" value="
{% for c in a %}
{{c}}
{% end %}
"/>
Which gives me the following messy output:
<input type="hidden" id="xxx" value="
a
b
c
d
e
f
"/>
I tried to use a {{c.strip()}} but that did the same thing. I also trying to mix in javascript however the javascript didn't execute after rendering to populate the value field. I want the html to be normal that is value="a b c d e f"
Does anyone know how I can achieve this?
Try Tornado's filter_whitespace feature, new in version 4.3.
{% whitespace oneline %}
<input type="hidden" id="xxx" value="{% for c in a %}
{{c}}
{% end %}"/>
{% whitespace all %}
There will still be a few extra spaces but it's much closer to what you want.
Just join the list in the backend itself.
self.render("index.html", a=' '.join(a))
And use,
<input type="hidden" id="xxx" value="{{ a }}" />
in template
The same as #Avinash answered, only in-template:
<input type="hidden" id="xxx" value="{{ ' '.join(a) }}" />
Tornado templates, unlike some other templating engines like Django or Jinja, allows arbitrary Python expressions in the templates.

Friendly URL with get request form

i have this simple html form:
<form action="test/" method="get" accept-charset="utf-8">
<input type="text" name="first" value="" id="first">
<input type="text" name="second" value="" id="second">
<input type="text" name="third" value="" id="third">
<p><input type="submit" value="Continue →"></p>
</form>
when user click submit button, i want to get friendly URL like this:
www.site.com/test/first/second/third
how can i do this?
Where the user ends up after filling out the form and clicking "Continue" depends on what you set the action attribute in your form tag to. You've currently set it to test/.
If you want them to end up at test/<first_val>/<second_val>/<third_val>/, then you can either use some JavaScript (per pythonFoo's answer), or you can redirect in the view that test/ points to, using HttpResponseRedirect:
def test_view(request):
return HttpResponseRedirect('/test/%s/%s/%s/' % request.POST['first'],
request.POST['second'],
request.POST['third])
<input type="text" name="first" value="" id="first">
<input type="text" name="second" value="" id="second">
<input type="text" name="third" value="" id="third">
<p><input type="button" value="Continue →" onclick="submitFriendly();"></p>
<script type="text/javascript">
function submitFriendly() {
window.location.href = window.location.href + document.getElementById('first').value + '/' + document.getElementById('second').value + '/' + document.getElementById('third').value;
}
</script>
This should work. It doesn't check if all inputs are filled.

Categories