I'm trying to create a form in web2py.
I'm not sure on the correct syntax and don't understand from the examples in the site how this is done. Could someone give a better explanation?
How is a simple form like this created?
<form>
<select>
<option>Paint</option>
<option>Brushes</option>
<option>Erasers</option>
</select>
Quantity: <input type="text" />
<input type="submit" />
</form>
How can I validate more complex forms?
items = ['Paint','Brushes','Erasers']
form = FORM(
SELECT(*items),
INPUT('Quantity', _type='text'),
)
return dict(form=form)
(in view):
{{ extend 'layout.html' }}
{{ =form}}
To validate this form, or a "more complex" form:
(in controller)
form = FORM(...) # This is the same form def as above, must be before form.process()
if form.process().accepted:
# Valid!
else:
# invalid.
If you have a more specific question, I'll attempt to answer it, but I highly recommend you check out the book and try to create and validate your own simple forms. You can use the welcome app as a place to start. Or you could google around for web2py apps and download and play with them.
Read these two chapters in their entirety and I'll help you with anything web2py in the future (there will be a quiz!):
Database Abstraction layer (important for unlocking the full power of web2py's DB-driven forms):
http://web2py.com/books/default/chapter/29/6
Forms and Validators (everything you ever needed to know about creating forms and linking it to data:
http://web2py.com/books/default/chapter/29/7
Related
I'm using Statamic CMS
I've got a checkbox group with two checkboxes, I'd like both of them to be checked before the form will submit.
Setting the field as 'required' half works. The form will error if nothing is checked, but it submits if one of the boxes is ticked.
I can see under the validation tab, there's a list of additional rules. But I'm not sure which rule to use.
If it helps, this is what the HTML checkbox group looks like:
<div>
<label>Contact permissions</label>
<span>Please tick both checkboxes</span>
<label>
<input type="checkbox" name="checkboxes[]" value="gdpr" />
Please contact me with the details I've provided
</label>
<label>
<input type="checkbox" name="checkboxes[]" value="terms" />
I agree with the terms and conditions
</label>
</div>
I'm using the {{ fields }} tag to generate the HTML
Within the CMS, under the validation tab, there's a link to the Laravel docs. As I want to validate two checkboxes, I think I need the required_with: rule, but I can't get it to work...
required_with: is looking for two values, the example shows this:
required_with:foo,bar,..
The values of the checkboxes are, value="gdpr" and value="terms" so I (wrongly) assume this should work...
required_with:gdpr,terms
After saving the changes and testing the form, it still submits? Even though only one of the checkboxes might be ticked...
What is the correct syntax/values to use to get this to work?
:) foo,bar in the docs are field names in your form. What you're doing with gdpr,terms are values.
Plus, since both your buttons are named checkboxes[], the form is validating that if either one is selected, then it should be passed. Hopefully this helps!
i'm running locally a python file. when i access 127.0.01:5000/string i get to a specific html page. Up to now, using javascript, i managed to put some checkbox (boolean form) on that page, but how can i assign the value of each one of them (True or False) to a variable in the python file?
i'm being unable to use the user's response in anyway.
i'm using flask-ext-wtforms, render_template, etc.
this is what i have on the html file so far.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var creature=0
var artifact=0
function suggest(){
if ($('#Creature').is(':checked')){creature=1;}
if ($('#Artifact').is(':checked')){artifact=1;}
}
</script>
<input type="checkbox" id = "Creature">Creature<br>
<input type="checkbox" id = "Artifact">Artifact<br>
<input type="checkbox" id = "Enchantment"> Enchantment<br>
<input type="checkbox" id = "Sorcery"> Sorcery<br>
<button type="button" onclick = "suggest(); alert('creature ' + creature + ' artifact ' + artifact)">Submit</button>
It tells me whether or not the user has clicked one of the first two boxes, but that's it. i don't know how to make the python file access such information.
It'd be useful to see what you have in the actual Python file, but I'll give it a go. Also I'll state right off the bat that for these sorts of questions the documentation should be your best friend and first go-to, but here's a start.
From the html you've posted it doesn't look like you're actually using a Flask-WTF Form instance. You would want to first create a Form with BooleanFields like so:
from flask.ext.wtf import Form
from wtforms import BooleanField
class MyForm(Form):
creature = BooleanField()
# etc
submit = SubmitField()
then in your template render the form & the fields like so:
<form method="POST" action="/string">
{{ form.creature.label }}
{{ form.creature() }}
{# ... etc ... #}
{{ form.submit() }}
</form>
Then finally in your view, you have to (A) specify that the view accepts POST requests, (B) create the form, and (C) make sure you pass the form to the template for rendering. If you do all these things, then when you, or someone else, or a robot or whatever click submit, then the browser will POST the data from the form to the flask view, and you will be able to access it in the view as, say, form.creature.data. Example:
#route('/string', methods=['GET', 'POST']) # part A
def get_critters():
form = MyForm() # part B
if form.validate_on_submit():
# do something with form.creature, or form.whatever
return render_template("string.html", form=form) # part C
All of this is very ably covered in multiple parts of each project's documentation. See:
https://flask-wtf.readthedocs.org/en/latest/quickstart.html
https://wtforms.readthedocs.org/en/latest/fields.html#wtforms.fields.BooleanField
and virtually everything at http://flask.pocoo.org/docs/0.10/ but especially http://flask.pocoo.org/docs/0.10/patterns/wtforms/ and http://flask.pocoo.org/docs/0.10/tutorial/.
I am building a Lift application, where one of the pages is based on the "File Upload" example from the Lift demo at: http://demo.liftweb.net/file_upload.
If you look at the source code for that page... you see that there is a Lift "snippet" tag, surrounding two "choose" tags:
<lift:snippet type="misc:upload" form="post" multipart="true">
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
</choose:post>
<choose:get>
Select a file to upload: <ul:file_upload></ul:file_upload><br >
<input type="submit" value="Upload File">
</choose:get>
</lift:snippet>
The idea is that when a user hits the page for the first time (i.e. a GET request), then Lift will show the form for uploading a file. When the user submits the form (i.e. a POST request to the same page), then Lift instead displays the outcome of the file being processed.
With my application, the new wrinkle is that my "results" POST view needs to also contain a form. I want to provide a text input for the user to enter an email address, and a submit button that when pressed will email information about the processed file:
...
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!-- BEGIN NEW STUFF -->
Output: <br/>
<textarea rows="30" cols="100"><ul:output></ul:output></textarea>
<br/><br/>
Email the above output to this email address:<br/>
<ul:email/><br/>
<input type="submit" value="Email"/>
<!-- END NEW STUFF -->
</choose:post>
...
However, both the GET and POST versions of this page are wrapped by the same Lift-generated form, which has its "action" set to the same snippet in both cases. How can I change this such that in the POST version, the form's action changes to a different snippet?
In a typical web framework, I would approach something like this with an "onclick" event and two basic lines of JavaScript. However, I haven't even begun to wrap my mind around Lift's... err, interesting notions about writing JavaScript in Scala. Maybe I need to go down that route, or maybe there's a better approach altogether.
First, I will suggest you use Lift's new designer friendly CSS binding instead of the custom XHTML tag.
And one thing you should remember when you're using Lift's snippet, is that it is recursive, you could put an lift snippet inside another snippet's HTML block.
For example, if you wish there is another form after POST, then just put it into the block.
<choose:post>
<p>
File name: <ul:file_name></ul:file_name><br >
MIME Type: <ul:mime_type></ul:mime_type><br >
File length: <ul:length></ul:length><br >
MD5 Hash: <ul:md5></ul:md5><br >
</p>
<!--
The following is same as <lift:snippet type="EMailForm" form="post" multipart="true">
-->
<form action="" method="post" data-lift="EMailForm">
<input type="text" name="email"/>
<input type="submit" />
</form>
</choose:post>
Then deal with the email form action at snippet class EMailForm.
Finally, you may pass the filename / minetype and other information by using hidden form element or SessionVar.
I agree with Brian, use Lift's new designer friendly CSS binding.
Use two separate forms, one for the file upload and one for the submitting the email. Use S.seeOther to redirect the user to the second form when the first has finished processing.
I also prefer the new 'data-lift' HTML attribute.
File upload HTML:
<div data-lift="uploadSnippet?form=post">
<input type="file" id="filename" />
<input type="submit" id="submit" />
</div
File upload snippet:
class uploadSnippet {
def processUpload = {
// do your processing
....
if (success)
S.seeOther("/getemail")
// if processing fails, just allow this method to exit to re-render your
// file upload form
}
def render = {
"#filename" #> SHtml.fileUpload(...) &
"#submit" #> SHtml.submit("Upload", processUpload _ )
}
}
GetEmail HTML:
<div data-lift="getEmailSnippet?form=post">
<input type="text" id="email" />
<input type="submit" id="submit" />
</div
Get Email Snippet:
class getEmailSnippet {
def processSubmit = {
....
}
def render = {
"#email" #> SHtml.text(...) &
"#submit" #> SHtml.submit("Upload", processSubmit _ )
}
There's a bit more on form processing in my blog post on using RequestVar's here:
http://tech.damianhelme.com/understanding-lifts-requestvars
Let me know if you want more detail.
Hope that's useful
Cheers
Damian
If somebody comes up with a more elegant (or "Lift-y") approach within the next few days, then I'll accept their answer. However, I came up with a workaround approach on my own.
I kept the current layout, where the view has a GET block and a POST block both submitting to the same snippet function. The snippet function still has an if-else block, handling each request differently depending on whether it's a GET or POST.
However, now I also have a secondary if-else block inside of the POST's block. This inner if-else looks at the name of the submit button that was clicked. If the submit button was the one for uploading a file, then the snippet handles the uploading and processing of the file. Otherwise, if it was the send email submit button shown after the first POST, then the snippet processes the sending of the email.
Not particularly glamorous, but it works just fine.
I'd like my form to include a certain value if the quantity is equal to 1 (via a text box).
I've managed to show what the total cost is using JavaScript and I could submit it with this value but I'm worried that when JavaScript is turned off the user will be able to submit the form without the extra fee being added. Therefor escaping the fee.
<form>
<label>Qunatity</label>
<input type="text" name="qyt" />
<input type="text" name="fee" value="250" />
<div class="total">[whatever the total is]</div>
<input type="submit" value="submit" />
</form>
Is there a way I can submit this form so that it submits 250 only if a quantity of 1 is added to the form? I'd like to avoid using a select input.
Will I need to split my form out into two stages to achieve this?
You need to check your logic in server-side code.
Most people have Javascript enabled, so you should do it in Javascript to provide a better experience, but you must always reproduce the logic on the server.
If you need to validate your input without JavaScript, have a server-side component (PHP?) to do the job and return the same form with an error message if no quantity was given. That way you don't have to split your form into two steps.
The best/safest way to handle this would be to do your total calculation on the server side. That way the data you store will always be correct.
im pretty new to jQuery, and i dont know how to do that, and if it can be done without editing manually the plugin.
Assume to have a simply form like that:
<form action="page.php" method="post">
Name: <input type="text" name="Your name" id="contact-name" value="" />
Email: <input type="text" name="Your email" id="contact-email" value="" />
</form>
When you submit it, both in 'standard' way or with ajaxSubmit(), the values of the request take the label of the field name, so in the page.php i'll have:
$_POST['Your name'];
$_POST['Your email'];
Instead i'll like to label the submitted values with the id of the field:
$_POST['contact-name'];
$_POST['contact-email'];
Is there a way to do that with jquery and the ajaxsubmit() plugin?
And, maybe, there is a way to do it even with the normal usage of a form?
p.s: yes, i know, i could set the name and id attributes of the field both as 'contact-name', but how does two attributes that contain the same value be usefull?
According to the HTML spec, the browser should submit the name attribute, which does not need to be unique across elements.
Some server-side languages, such as Rails and PHP, take multiple elements with certain identical names and serialize them into data structures. For instance:
<input type="text" name="address[]" />
<input type="text" name="address[]" />
If the user types in 1 Infinite Loop in the first box and Suite 45 in the second box, PHP and Rails will show ["1 Infinite Loop", "Suite 45"] as the contents of the address parameter.
This is all related to the name attribute. On the other hand, the id attribute is designed to uniquely represent an element on the page. It can be referenced using CSS using #myId and in raw JavaScript using document.getElementById. Because it is unique, looking it up in JavaScript is very fast. In practice, you would use jQuery or another library, which would hide these details from you.
It is reasonably common for people to use the same attribute value for id and name, but the only one you need to care about for form submission is name. The jQuery Form Plugin emulates browser behavior extremely closely, so the same would apply to ajaxSubmit.
It's the way forms work in HTML.
Besides, Id's won't work for checkboxes and radio buttons, because you'll probably have several controls with the same name (but a different value), while an HTML element's id attribute has to be unique in your document.
If you really wanted, you could create a preprocessor javascript function that sets every form element's name to the id value, but that wouldn't be very smart IMHO.
var name = $("#contact-name").val();
var email = $("#contact-email").val();
$.post("page.php", { contact-name: name, contact-email: email } );
This will let you post the form with custom attributes.