Sending POST with checkbox value changes with Django - html

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}}&nbsp{% 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.

Related

Jquery not looping inside parent loop

I have a jquery code that clones a "selector" wherein it is a parent of many other elements.
EDIT : I added the function that calls the "cloneMore". It supposed to be called when the user clicks the button inside the row and creates another row below it.
EDIT 2 : I added the table that the <tr> belongs to. I tried to run it without the <tr> <td> tags and the function works! But sadly it removes it from the html table. Why does this happen?
jquery snippet
$(document).on('click', '.add-form-row', function(e){
alert("Button Click!");
e.preventDefault();
cloneMore('.form-row.spacer:last', 'form');
return false;
function cloneMore(selector, prefix) {
var newElement = $(selector).clone(true);
newElement.find('input[type=text]').each(function() { //loops through the textfields
console.log("print1");
});
newElement.each(function () {
console.log("print2");
});
html code
<div class="display_table">
<table class="table table-hover table-striped">
<thead class="thead-dark">
<tr class="tablerow">
<th scope="col">Item</th>
<th scope="col">Item Description</th>
<th scope="col">Quantity</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
{{ formset.management_form }}
{% for form in formset %}
<div class="row form-row spacer">
<tr scope="row">
<div class="input-group">
<td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
<div class="input-group-append"><td><button class="btn btn-success add-form-row">+</button></td></div>
</div>
</tr>
</div>
{% endfor %}
</tbody>
</table>
</div>
However, it doesn't even pass through the loop even once and I don't get a "print" in the console. I'm sure that there is a text field inside the parent. In this case its the div with class "row form-row spacer"
Is there something wrong with my syntax? I've seen somewhere where they get the parent through a selector but in my case I put it in a variable. Is there anything wrong or any work around this?
I think I kind of figured it out. I was trying to select the <input> tags even without referencing the <td> and <tr> tags. So jquery didn't know what I was trying to select. So after I made some changes in the whole table and the jquery script, it works just as I intended it would. However, any suggestions on how I could improve this code will be appreciated! I'm putting this up in case someone needs it.
Also, I forgot to credit to this Stack Overflow answer for the snippets.
html code
<table class="table table-hover table-striped" id="part_table">
<thead class="thead-dark">
<tr class="tablehead">
<th scope="col">Item</th>
<th scope="col">Item Description</th>
<th scope="col">Quantity</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
{{ formset.management_form }}
{% for form in formset %}
<div class="row form-row">
<tr class="tablerow">
<td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
<td><button class="btn btn-success add-form-row">+</button></td>
</tr>
</div>
{% endfor %}
</tbody>
</table>
jquery snippet
<script type="text/javascript">
function cloneMore(prefix) {
var lastrowtbl = $('#part_table tr.tablerow:last').clone(true);
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
var currentnum = total - 1
lastrowtbl.find('input[type=text]').each(function (i, el) {
console.log(this);
var name = $(this).attr('name');
if(name) {
name = name.replace('-' + currentnum + '-', '-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name' : name, 'id' : id}).val('').removeAttr('checked');
}
});
total++;
$('#id_' + prefix + '_TOTAL_FORMS').val(total);
$('#part_table tr.tablerow:last').after(lastrowtbl);
var conditionRow = $('#part_table tr.tablerow:not(:last)');
conditionRow.find('.btn.add-form-row')
.removeClass('btn-success').addClass('btn-danger')
.removeClass('add-form-row').addClass('remove-form-row')
.html('-');
return false;
}
$(document).on('click', '.add-form-row', function(e){
alert("Button Click!");
e.preventDefault();
cloneMore('form');
return false;
});
</script>

HTML / FLASK - Dynamic Table with Checkboxes per row

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

How to send table data to the controller after click in submit button

I have a table where data are poulate from database, I want to update the table after giving value into the Text1,Text2 and send it to the controller, how could i do this.
html
<form action="/update" method="post" >
<table border="1">
<thead>
<tr>
<th data-field="id"> ID </th>
<th data-field="details"> Details </th>
<th data-field="report"> Report </th>
<th data-field="value"> value </th>
<th data-field="destination"> Destination </th>
</tr>
</thead>
<c:forEach items="${List2}" var="as">
<tr >
<td>${as.id}</td>
<td>${as.rulDetails}</td>
<td>${as.rulName}</td>
<td><input type="text" name ="Text1">
<td>${as.rulValue}</td>
<td><input type="text" name ="Text2">
</td>
</tr>
</c:forEach>
</table>
<input type="submit" value="Update"></input>
Here is my servlet for update table, i did't write anything because i don't understand how could i do this.
#RequestMapping(value = "/update", method = RequestMethod.POST)
public String update(#ModelAttribute("SpringWeb") AssignmentDetails asd ModelMap model) {
//what i should write here..?
return "hello";
}
Please tell me/help me what i need to do? What i need to modified.?Please give me an advice or help to do this.
Thank you
See this tutorial.
You can use the spring taglibs.
<form:form method="post" modelAttribute="SpringWeb" action="/update">
<form:input path="Text1" type="text" />
<form:input path="Text2" type="text" />
</form:form>

AngularJS Table is not working as in should

AngularJs table is not working as expected.
I am trying to show the values of "sets" where it contains 10 values.
So what is want to do is that i want to create 10 rows, where it will show "set number" 1 to 10.
But it is displaying all the 10 values in a single rows, how i can make it 10 rows !!
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>Sets Number</th>
<th>Score of Sets 1</th>
<th>Score of Sets 2</th>
</tr>
</thead>
<tbody>
<tr>
{% for x in sets %}<td>{{ x }}</td>{% endfor %}
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
Which is looking like so --
You need to use the ng-repeat directive provided in angular as follows
<tr data-ng-repeat="x in sets">
<td> {{ x }} </td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
You can follow the example on http://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_array
DEMO: http://plnkr.co/edit/NHfCZ7FgcKGCNpIQVpfU?p=preview

html submit data which not in Text Fields

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.