I need display a table contain text field and button like:
<table border="1">
<tr>
<td>name</td>
<td>id</td>
<td>icon</td>
<td> </td>
</tr>
{% for i in gs %}
<tr>
<td align='center'>{{ i.id }}</td>
<td align='center'>{{ i.name }}</td>
<td align='center'><input type="text" name="icon" value="{{ i.icon }}" /></td>
<td align='center'><input type=submit value="update" style="width:100%"></td>
</tr>
{% endfor %}
If user want to modify 'icon', then input new value in the text field and click update. But the problem is in django function, I only gets 'icon' value in 'request.POST', I don't know which id is updating. So how to pass 'i.id' into POST with icon together?
You can add hidden input field in the form to get id. In your template add another input field
<td align='center'><input type="text" name="icon" value="{{ i.icon }}" /></td>
<td align='center'><input type="hidden" name="icon_id" value="{{ i.id }}" /></td>
Then your view you will have icon_id field in submitted data.
Related
<tr ng-repeat="item in groups">
<td hidden><input type="hidden" value="{{item.id_group}}" /></td>
<td><input type="text" value="{{item.description}}" class="form-control" /></td>
<td>
Edit |
Delete
</td>
</tr>
So this code was supposed to show values in a table and when the user changes anything in the description and click on Edit, it should POST the new value to the server. Instead it's posting the old value, I need some help please to identify why this is happening.
Try using Ng-model
<tr ng-repeat="item in groups track by $index">
<td hidden><input type="hidden" ng-model="groups[$index].id_group" /></td>
<td><input type="text" ng-model="groups[$index].description" class="form-control" /></td>
<td>
Edit |
Delete
</td>
</tr>
With Flask / HTML, I am dynamically populating a table of directory listings where I would like the user to have the option to select single or multiple directories via a checkbox, however when I check the box on any table row besides the first, only the first row's checkbox is being selected. I have ensured that the value of the checkboxes are independent, however I would like to have each row's checkbox to be unique to one another.
HTML:
<div id="select-form">
<form action="" method="post">
<h1>{{ directory.user_entered_path }}</h1>
<table cellspacing="0" class="table">
<tbody>
<tr>
<td class="head">Filename</td>
<td class="head">Type</td>
<td class="head">Size</td>
<td class="head">Select</td>
</tr>
{% for file in dir_list %}
<tr>
<td name="name"> {{ file.file_name }}</td>
<td> {{ file.file_type }} </td>
<td> {{ file.file_size }}</td>
<td><input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="{{file}}">
<label class="form-check-label" for="inlineCheckbox1"> </label></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
I tried the following:
To the end of your html, within the <form></form> I added a submit button for convenience, I don't know of another way to create a post request.
<form action="" method="post">
<h1>{{ directory.user_entered_path }}</h1>
<table cellspacing="0" class="table">
<tbody>
<tr>
<td class="head">Filename</td>
<td class="head">Type</td>
<td class="head">Size</td>
<td class="head">Select</td>
</tr>
{% for file in dir_list %}
<tr>
<td name="name"> {{ file.file_name }}</td>
<td> {{ file.file_type }} </td>
<td> {{ file.file_size }}</td>
<td><input class="form-check-input" type="checkbox" name="check" id="inlineCheckbox1" value="{{file}}">
<label class="form-check-label" for="inlineCheckbox1"> </label></td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- added this button -->
<button type="submit" name="submit-button" value="Submit">submit</button>
</form>
Then I added this route to a flask app.py
from flask import request, render_template
#app.route('/stack-dynamic-checkboxes', methods=["POST", "GET"])
def dynamic_checkboxes():
if request.method == 'POST':
if request.form['submit-button'] == "Submit":
for checkbox in request.form.getlist('check'):
print(checkbox)
def afile(x):
return {'file_name':f'file {x}',
'file_type':f'type {x}',
'file_size':f'size {x}'}
dir_list = [afile(x) for x in range(10)]
directory = {'user_entered_path':'a path'}
return render_template( 'testing/stack-dynamic-checkboxes.html',
directory=directory,
dir_list=dir_list )
When I run the app and navigate to the page with your html, select some checkboxes and press submit, I get information about the files printed to my console. They are all dictionaries in this format
{'file_name': 'file 0', 'file_type': 'type 0', 'file_size': 'size 0'}
I hope this was wat you were looking for.
I've been searching for a way to do this for a while. I'm glad you posted this question because I didn't understand the way I had to set up the HTML part correctly, so, thank you!
In the future, It would be nice to have a little bit more context, what your code looks like perhaps, as I'm uncertain whether this is what you were looking for
I have a question here and wondering if you could provide your help.
how I could merge second "stage" entries as a vertical table to the right side of the table IP_address ?
I don't want them merge into same , because that will cause some issue.
thank you in advance.
<table width="100%" class="table" >
<thead>
<tr>
<th >IP</th>
<th >Stage</th>
</tr>
</thead>
<tbody>
<form id="myform" name="myform" action="{{url_for('show_select')}}" method="post">
{% for entry in entries %}
<tr>
<td>
<div class="form-group">
<input id="IP" name="IP" class="IPS" value="{{entry.ip_address}}" readonly>
</div>
</td>
</tr>
{%endfor %}
</form>
{% for entry in entries %}
<tr>
<td>
<div id="f1_container" name="container">
<div id="cube" class="cube" >
<div class="cube__face cube__face--stage_1">
<input id="stage_1" type="button" class="btn-default" name="stage" value="test" >
</div>
</div>
</div>
</td>
</tr>
{%endfor %}
</tbody>
</table>
What Pablo was trying to point out in the comments was that the <form> HTML element is not a valid descendant of <tbody>. The documentation states under "Permitted content":
Zero or more <tr> elements.
Which means having a form directly inside a <tbody> is invalid markup, and as such can lead to unexpected behavior.
The option I see fit your use case best would be using the form attribute of the input element. However, unless the input has the type submit you won't be able to submit the form with it without the use of JavaScript.
For the form attribute to work you will need to generate a unique ID for each form and use it when generating the code. Due the lack of a template engine tag this solution will assume the use of Jinja2 (based on the syntax and the url_for call), but the concept should be the same for any other template language.
Your two options are to either use the iterator variable to make sequential IDs, or if your records have one, use a unique ID from the records themselves. For this solution I will use the loop variable to generate the IDs.
<table width="100%" class="table">
<thead>
<tr>
<th>IP</th>
<th>Stage</th>
</tr>
</thead>
<tbody>
{% for entry in entries %}
<tr>
<td>
<!-- moved form inside the table cell, gave it a unique ID -->
<form id="myform-{{loop.index0}}" name="myform" action="{{url_for('show_select')}}" method="post">
<div class="form-group">
<input id="IP" name="IP" class="IPS" value="{{entry.ip_address}}" readonly>
</div>
</form>
</td>
<td>
<div id="f1_container" name="container">
<div id="cube" class="cube">
<div class="cube__face cube__face--stage_1">
<!-- type changed to submit, added form attribute matching the value given to the form's id attribute -->
<input type="submit" form="myform-{{loop.index0}}" class="btn-default" name="stage" value="test">
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
I have a table and in the table a form with fields the user can change. Three of these fields use check boxes. I'm able to reflect what is currently in the database after following this post, but I haven't been able to find something else for the next piece of the puzzle.
The problem I'm having is that if a checkbox is set to true(checked) and then I unselect it, the POST data does not include anything that says that it is not checked anymore. It doesn't give a value of "off", "0" or false. How can I make sure that when the boxes are unchecked I still get those values("off", 0" or "false")? on the post data?
Below is my code:
<form id=result_form action= "{% url 'example:save_notes' %}" method="post">
{% csrf_token %}
<table id="results_table" class="formdata" summary="Example Search Results"
data-order='[[ 1, "des" ]]' data-page-length='25'>
<thead>
<tr>
<th style="width:5%" scope="col">Search Method</th>
<th style="width:20%" scope="col">Search Date</th>
<th style="width:5%" scope="col">City</th>
<th style="width:10%" scope="col">Example Name</th>
<th style="width:10%" scope="col">Article Title</th>
<th style="width:10%" scope="col">Article Link</th>
<th style="width:5%" scope="col">Reviewed </th>
<th style="width:5%" scope="col">J/J Related</th>
<th style="width:5%" scope="col">N Related</th>
<th scope="col">General Notes</th>
<th scope="col">Findings</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
{% for result in results %}
<tr>
<td>{{result.notes.method}}</td>
<td>{{result.retrieved_on}}</td>
<td>{% for e in result.search_result_t.all%}{{e.search_term_id.example_abbrev}} {% endfor %}</td>
<td>{% for e in result.search_result_t.all%}{{e.search_term_id.example_ID.example_name}}{% endfor %}</td>
<td>{{result.title}}</td>
<td width="5%">{{result.link}}</td>
<form action="{% url 'example:form_edit' %}" method="POST">
<td><input type="checkbox" name="reviewed" {% if result.notes.reviewed %}checked{% endif %}></td>
<td><input type="checkbox" name="jj" {%if result.notes.j_j %}checked{% endif %}></td>
<td><input type="checkbox" name="n" {%if result.notes.n_related %}checked{% endif %}></td>
<td><textarea cols="40" rows="15" name="general_notes" value = "{{result.notes.general_notes}}">{{result.notes.general_notes | default_if_none:""}}</textarea>
<td><textarea cols="40" rows="15" name="significant_findings" value = "{{result.notes.significant_findings}}">{{result.notes.significant_findings | default_if_none:""}}</textarea>
<td><button>Save</button></td>
<input type="hidden" name="result.id" value={{result.id}}>
</form>
</tr>
{% endfor %}
Unchecked boxes are not part of the request - see here. But why do you need this information as you should know what checkboxes you have sent.
Thank you for your guidance ger.s.brett. I used the answer to this post
to solve my problem.
This looks to see if the field is in the POST:
reviewed = request.POST.get('reviewed', "false")
If the field is present then it uses the POST value. If it is not present it sees it as false.
I have a quick question regarding Angular 4 and splicing.
Below is my Typescript code:
delete(appIndex: number): void {
this.apps.splice(appIndex, 1);
}
Below is my HTML Code:
<tr *ngFor="let app of apps; let i = index">
<td><input type="text" [(contenteditableModel)]="text1" tabindex="1"> {{ text1 }}</td>
<td><input type="text" [(contenteditableModel)]="text2" tabindex="2">{{ text2 }}</td>
<td><input type="text" [(contenteditableModel)]="text2" tabindex="3">{{ text3 }}</td>
<td class="actions">
<input type="button" value="Delete" (click)="delete(i)">
</td>
</tr>
The issue I am running into is 'Cannot read property 'splice' of undefined. When I further researched into this, I found that in Angular 1, '$scope' was used in order to access within the DOM. How do I replicate this in Angular 4?
UPDATE:
I have edited my code to read like:
Typescript:
delete(appIndex: number) {
this.apps.splice(appIndex, 1);
this.changeDetectorRef.detectChanges();
}
HTML:
<tr class="odd">
<td class="status"><img src="../../../assets/images/Red_Circle_1.png" class="redcircle"></td>
<td><input type="text" [(contenteditableModel)]="text4"> {{ text4 }}</td>
<td><input type="text" [(contenteditableModel)]="text5">{{ text5 }}</td>
<td><input type="text" [(contenteditableModel)]="text6">{{ text6 }}</td>
<td class="actions">
<input type="button" value="Delete" *ngFor="let app of apps; let i = index" (click)="delete(i)">
</td>
</tr>
Here is the plunker: http://plnkr.co/edit/2KaXodEe2CbQdLXZtVaC?p=preview
I'm not getting any errors now, but the delete button is not displaying at all.
Any suggestions would be appreciated.
Thank you.
Your code should work without problem so long as you are executing delete from the component whose template you called it from.
Here is basically the same code working: Live demo