i tried putting my form inside the foreach so that the value passed in the form is the right value for the result not the last value. but the button inside the form is not submitting (nothing happens after clicking the button).
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Receiver's Name</th>
<th>Receiver's Contact</th>
<th>Package Type</th>
<th>Date Requested</th>
</tr>
</thead>
<tbody class="list">
#foreach($result as $res)
<form role="form" method="POST" action="/search ">
<input type="hidden" name="requestID" value="{{ $res->id }}">
<tr>
<td class="name"> {{ $res->receiverLname }},
{{ $res->receiverFname }}</td>
<td class="contact"> {{ $res->receiverContact }} </td>
<td class="type"> {{ $res->packType }} </td>
<td class="date"> {{ $res->updated_at }} </td>
<td><button class="btn"> View Transaction </button></td>
</tr>
</form>
#endforeach
</tbody>
</table>
nevermind guys. i just tried putting the value in the button instead in the input hidden type and im getting the right value in the post. :D
i get rid of the input type="hidden"
and make my button this way
<button class="btn" name="requestID" value="{{ $res->id }}">
Related
I have a HTML table with checkboxes. I want to read the first column value based on the row selected using the checkbox. To read the values, a function is called after selecting the checkbox and clicking a button.
Table look this way
<a href="{% url 'app-analyze_retina' %}">
<button onclick="" class="patient-add-btn button1"> Send for Analysis </button>
</a>
{% if btn_clicked %}
<div>
<table class="table" id="patient_list">
<thead class="thead-dark">
<tr>
<th scope="col">Patient ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Result/Severity Level</th>
<th scope="col">Tested on</th>
<th scope="col">AI confidence</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody>
{% for patient in data %}
<tr>
<td bgcolor="mediumaquagreen">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="checks" id={{patient.0}} value="{{patient.1}}">
<label class="custom-control-label" for={{patient.0}}>{{patient.1}}</label>
</div>
<!-- <td bgcolor="mediumaquagreen" > {{ patient.1 }}</td>-->
<td bgcolor="mediumaquagreen">{{patient.2}}</td>
<td bgcolor="mediumaquagreen" >{{patient.3}}</td>
<td bgcolor="mediumaquagreen">2.846</td>
<td bgcolor="mediumaquagreen">-</td>
<td bgcolor="mediumaquagreen" >Cristina</td>
<td bgcolor="mediumaquagreen" >913</td>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
Function to read the values
def analyze_img(request):
c = request.POST.getlist('checks')
print(c)
return render(request, 'workspace.html')
First I was trying to check whether I am able to read a checkbox but it returns an empty list.
I removed an if statement within the for statement and now I have this endlock error that is clearly there... I checked some other posts on here and I think my indentation is correct and I dont have any extra spacing... Im not sure what it could be...
{% extends 'layout.html' %}
{% block content %}
<h1>Users <small>Admin {{session.username}}</small></h1>
<a class="btn btn-success" href="/add_user"> Add User</a>
<hr />
<table class="table users">
<tr>
<th>ID</th>
<th>Roles</th>
<th>Email</th>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th></th>
<th></th>
</tr>
{% for user in users %}
<tr>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>EDIT</td>
<td>
<form action="{{url_for('edit_user', id=user.id)}}" method="post">
<input type="hidden" name="_method" value="post" />
<input type="submit" value="DELETE" class="btn btn-danger" />
</form>
</td>
</tr>
{% endfor %}
</table>
{% endblock %}
i don't see any problem with your code, but i guess you need to disable cache and force reloading templates:
app.config['TEMPLATES_AUTO_RELOAD'] = True
refer to https://flask.palletsprojects.com/en/1.1.x/api/?highlight=templates_auto_reload#flask.Flask.templates_auto_reload
let me know if it works.
So here's my html code:
<div class="container">
<div>
<h1 class="table-title">Employees</h1>
<table class="table">
<thead class="thead-dark">
<tr>
<th>User Name</th>
<th>Email</th>
<th>Role</th>
<th>References</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tempEmployee of employees">
<td class="align-middle">{{ tempEmployee.userName }}</td>
<td class="align-middle">{{ tempEmployee.email }}</td>
<td class="align-middle">{{ tempEmployee.roleId }}</td>
<td class="align-middle">
<a routerLink="/projects">Assigned Projects</a>
<br />
Assigned Tickets
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h4>Select 1 or multiple users</h4>
<select id="user-list" multiple size="employees.length" >
<option
*ngFor="let employee of employees; let indexOfEmployee=index;"
value="indexOfEmployee"
>{{ employee.userName }}</option>
</select>
<button id="submit" type='submit' class="btn btn-primary" (click)="onSubmit()">Submit</button>
</div>
</div>
I'm confused on how I can know if an option is selected so that in the component on the onSubmit() function i can check if an option is selected and submit it. Also multiple options can be selected.
I tried to console.dir the option element to see if it has a selected property but maybe i'm missing something.
some quick and easy javascript:
for(var i = 0; i < document.getElementById("user-id").length; i++){
if(document.getElementsByTagName("option")[i].selected == true){
console.log("selected")
}
}
i want to add gap betweenw my input boxes in input form.
They are heavily packed together and not looking good.
so that the input form looks and feels good...form is a object passed from views.py....
createcustomer.html
{% extends 'customer/base.html' %}
{% block title %}Create Customer{% endblock %}
{% block body %}
<div class="container-fluid" style="background-color: #f2f2f2; width:100%; height:135%;" >
<div class="row ">
<div class="col-lg-4"></div>
<div class="col-lg-8 text-left" align="center">
<h2>Create a Customer</h2>
<form action="." method="post">
<div class="form-group" >
{% csrf_token %}
<table>
<tr style="width:100%;" class="highlight">
<td>First Name:</td>
<td>{{form.fname}}</td>
</tr>
<tr>
<td>Last Name:</td>
<td>{{form.lname}}</td>
</tr>
<tr>
<td>Email:</td>
<td>{{form.email}}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{form.address}}</td>
</tr>
<tr>
<td>City:</td>
<td>{{form.city}}</td>
</tr>
<tr>
<td>State:</td>
<td>{{form.state}}</td>
</tr>
<tr>
<td>Zip:</td>
<td>{{form.zip}}</td>
</tr>
<tr>
<td>Username:</td>
<td>{{form.uname}}</td>
</tr>
<tr>
<td>Phone:</td>
<td>{{form.phone}}</td>
</tr>
</table>
<div style="margin-left:200px; margin-top:20px;margin-bottom:20px">
<input type="submit" class="btn btn-success" value="Submit">
</div></div>
</form>
</div>
</div>
</div>
{%endblock%}
you can try with css:
table tr {
margin-bottom: 10px;
display: table;
}
add table to cellspacing & cellpadding
<table cellspacing="1" cellpadding="1">
You can apply padding to the input itself by applying a class and css:
HTML
<input id="padded" type="submit" class="btn btn-success" value="Submit">
CSS
#padded {
padding: 10px;
}
This will create space around the input form, giving it room to breath.
Cant I display one value of th element in tr with ng-repeat?
This is how my html looks
<div class="center layout-column flex">
<section layout="row" layout-align="left left">
<md-button class="md-primary" ng-click="vm.showDialogAdd($event)">Add new movie</md-button>
<md-button class="md-primary" ng-click="vm.showDialogDetails($event)">Add details</md-button>
</section>
<div class="simple-table-container md-whiteframe-4dp">
<div class="ms-responsive-table-wrapper">
<table class="simple" ms-responsive-table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>Country</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="movie in vm.movies">
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.country }}</td>
<td class="text-center">
<md-button class="md-warn" ng-click="vm.deleteMovie(movie)">Remove</md-button>
<md-button class="md-noink" ng-click="vm.showDetails(movie)">Details</md-button>
</td>
</tr>
<tr ng-repeat-end ng-show="movie._detailsVisible" ng-repeat="detail in vm.movieDetails">
<th>Actors: </th>
<td>
{{ detail.name }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to display "Actors:" like a title of all tds, something like that:
How can I do this?
Just move ng-repeat to td
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>Actors: </th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>
I'm not sure what do you mean by display "Actors:" in one td, but you can try adding it in front of the detail name so that it will be displayed with the value in one single td.
Edit: Please try the below code to achieve your requirement.
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>
Actors:
</th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>