I've a HTML form for editing existing data.
Let's say today is 10/06/2022 18:05 and i want to edit my course date time in my web app.
My course date on the data base is 21/08/2023 10:00. I want to change it to 22/08/2023 10:00. When I open my from on the web app all the inputs came with the existing data already selected. But date time picker comes as 10/06/2022 18:05. I've set the value as the date attribute of course object but it's not working. This works for the rest of the inputs but not for the datetime input.
I basically need the html date time picker comes with autoselected with the existing saved data <course.date> .
I'm writing this web app on python flask and using a postgresql for database. The other inputs comes with selected values but not datetime input.
Anyone has any ideas how to approach this one?
<form action="/courses/{{course.id}}" method="post">
<label for="course">Course Title</label>
<input type="text" name="title" value="{{course.title}}">
<label for="date">Date</label>
<input type="datetime-local" name="date" value="{{course.date}}">
<label for="capacity">Capacity</label>
<input type="number" name="capacity" value="{{course.capacity}}">
<label for="active">Active</label>
<select name="active">
<option value="True">Active</option>
<option value="False" {% if course.active == False %} selected {%endif%}>Deactive</option>
</select>
<input type='submit' value="Update Course">
</form>
If I am understanding the issue right:
course_date in the database is: 21/08/2023 10:00
course_date in the app remains as the local-current time: 10/06/2022 18:05 (example)
GET request properly loads data from the database into the other fields except course-date
you've tried making a POST request to update course_date, but the field doesn't change
My suggestion to debug this is to look at the responses to your GET request. What do they come out as?
Inside your GET request's response,
if the course-date is 21/08/2023 10:00, that means your problem is in your javascript or the code that plugs in your field value inside the HTML. Your frontend field is simply ignoring the response from flask or the data is not being mapped/handled right
if the course-date is 10/06/2022 18:05 or is null. That means your flask backend is broken, double-check the flow of your data from the SQL select -> storing the data in a python variable -> sending the data out
Also remember to Hard-Reload.
Based on our exchange in comments, it looks like the issue is with the date format being passed in your template.
Changing:
<label for="date">Date</label>
<input type="datetime-local" name="date" value="{{course.date}}">
To:
<label for="date">Date</label>
<input type="datetime-local" name="date" value="{{course.date.isoformat()}}">
Should correct the problem for you.
Related
I am having trouble structuring my data within MongoDB from user forms.
My ideal document structure is this:
As you can see the ingredients are within an array that would be iterable.
However I cannot work out a way when submitting my form to do this. My form for the ingredients section looks like this:
<h4>Ingredients</h4>
</div>
<div class="row">
<div class="input-field col s6">
<input id="ingredients_1_name" name="ingredients_name_1" type="text" class="validate" required>
<label for="ingredients_1_name">Ingredient</label>
</div>
<div class="input-field col s3">
<input id="ingredients_1_quantity" name="ingredients_quantity_1" type="text" class="validate" required>
<label for="ingredients_1_quantity">Quantity</label>
</div>
<div class="input-field col s3">
<input id="ingredients_1_unit" name="ingredients_unit_1" type="text" class="validate" required>
<label for="ingredients_1_unit">Unit</label>
</div>
</div>
The user is able to press a JavaScript button that adds a new row with the name "ingredients_2_name" and so on. This leads to a very unstructured DB:
This is obviously a mess which when it comes to using the data requires an unnecessary amount of manipulation.
I can't seem to find any information online about how to send data from a HTML form to MongoDB in a defined way.
Currently on form submission, the view looks like this:
#app.route('/insert_recipe/', methods=['GET','POST'])
def insert_recipe():
"""
This function is called when a user clicks the submit button on the add
recipe form. Uses the insert_one() method to add to the recipes document.
"""
recipes = mongo.db.recipes
dictionary = recipes.insert_one(request.form.to_dict())
return redirect(url_for("get_recipes"))
This simply takes the input names as keys and the user input as values.
Is anyone able to describe how I am able to store form data within MongoDB in a structured way?
What you require is to convert a plain HTML-form-post request into a JSON-like structure without any data manipulations. I highly doubt that it's even possible, because JSON-objects use nested data and a key/index approach to access it and HTML-form-post data is flat and follows unique-id-approach to access it's data. I can see 2 possible solutions:
Use serialization library WTForms which will do python-data -> html-form -> python-data conversion for you and you wouldn't have to do an unnecessary amount of manipulation by yourself.
Make a webpage (a front-end) post request for you as a JSON-object.
I am new to Angular, I am building a simple application which should do.
Accept couple of parameters from web page(client side)
Upon form submit, it should trigger a python code at server side
Get the output file(jpg image) generated by python and display below the submit form.
As part of this, I have just coded the app.component.html and a blank python refresh module in app.component.ts, but I'm unable to
A. Code to call python code at server side and retrieve the output
Also, upon searching across many places, I got answers to get data from web api call but not executing a python at server side and retrieving data.
Any reference or a code to this will be really very helpful !
My app.component.html looks like
<form (submit)="pytrigger(parm1.value,parm2.value)">
<div>
<label for="parm1">Parm1:</label>
<input type="text" #parm1>
</div>
<div>
<label for="parm2">Parm2:</label>
<input type="text" #parm2>
</div>
<div >
<input type="submit" class="button">
</div>
</form>
My app.component.ts has function(which needs to be extended)
pytrigger(parm1,parm2){
console.log('entered pytrigger');
}
How to access (in Google App Engine) the input that is created dynamically:
<form action="/add" method="post">
<input type="text" name="line[]">
<input type="text" name="line[]">
<input type=submit">
I tried to access it via:
for i in self.request.get('line[]'):
self.response.out.write(i)
#this only gives first value
or
self.response.out.write(self.request.get('line[]')[1])
#this gives index out of range.
Ok, i got it, i supposed to use self.request.get_all('line[]')
I use google app engine and python. I want to retrieve the id of an input and not the value. If I use self.request.get("thename") I get the value of the input.
Here is the html
<form method="post">
<input value=" " type="submit" name="thename" id="thenumberIneed"/>
</form>
I cannot put my data on the value tag because I have an image as a background on the input and if I enter there anything, the data shows infront of the image. So, I keep value empty.
If you don't want the value to show, change it to:
<input type="hidden" ... />
But I suspect there are other problems you should be solving, like why does your image get in the way of showing values in the page, and what kind of data you want to retrieve.
You shouldn't be using the id for this type of logic.
You would have better luck using a seperate hidden input field, for example.
<input type='hidden' name='myval' value='thenumberyouneed' />
And then you can just do your search for myval and get your answer.
I need to allow users to upload content directly to Amazon S3. This form works:
<form action="https://me.s3.amazonaws.com/" method="post" enctype='multipart/form-data' class="upload-form">{% csrf_token %}
<input type="hidden" name="key" value="videos/test.jpg">
<input type="hidden" name="AWSAccessKeyId" value="<access_key>">
<input type="hidden" name="acl" value="public-read">
<input type="hidden" name="policy" value="{{policy}}">
<input type="hidden" name="signature" value="{{signature}}">
<input type="hidden" name="Content-Type" value="image/jpeg">
<input type="submit" value="Upload" name="upload">
</form>
And in the function, I define policy and signature. However, I need to pass two variables to the form -- Content-Type and Key, which will only be known when the user presses the upload button. Thus, I need to pass these two variables to the template after the POST request but before the re-direction to Amazon.
It was suggested that I use urllib to do this. I have tried doing so the following way, but I keep getting an inscrutable HTTPError. This is what I currently have:
if request.method == 'POST':
# define the variables
urllib2.urlopen("https://me.amazonaws.com/",
urllib.urlencode([('key','videos/test3.jpg'),
('AWSAccessKeyId','<access_key'),
('acl','public-read'),
('policy',policy),
('signature',signature),
('Content-Type',content_type),
('file',file)]))
I have also tried hardcoding all the values instead of using variables but still get the same error. What am I doing incorrectly and what do I need to change to be able to redirect the form to Amazon, so the content can be uploaded directly to Amazon?
I recommend watching the form do its work with Firebug, enabled and set to the Net tab.
After completing the POST, click its [+] icon to expand, study the Headers, POST, Response tabs to see what you are missing and/or doing wrong.
Next separate this script from Django and put into a standalone file. Add one thing at a time to it and retest until it works. The lines below should increase visibility into your script.
import httplib
httplib.HTTPConnection.debuglevel = 1
I tried poking around with urllib myself, but as I don't have an account on AWS I didn't get farther than getting a 400 Bad Request response. Seems like a good sign, probably I just need valid host and key params etc.