How to sent an id outside the loop of handlebars to the form inside the handlebars? - node.js

<form method="POST" action="/admin/update-blog/{{blogs._id}}">
<div class="form-group">
<label for="exampleInputPassword1">HEADING</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" value="{{blogs.heading}}" name="heading">
</div>
<br><br>
<div class="form-group">
<label for="exampleInputPassword1">BLOG</label>
<input type="text" class="form-control" id="exampleInputPassword1" value="{{blogs.blog}}" name="blog">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br><br>
<h2><i><b>Comments</b></i></h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Email</th>
<th scope="col">Message</th>
</tr>
</thead>
<tbody>
{{#each blogs.comments}}
<tr>
<th scope="row"></th>
<td>
<form method="POST" action="/admin/delete-comment">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="email" class="form-control" id="myInput"readonly aria-describedby="emailHelp" placeholder="Enter email" value="{{this.email}}" name="email">
</div>
<button type="submit" class="btn btn-danger">delete</button>
</form>
</td>
<td>{{this.message}}</td>
</tr>
{{/each}}
</tbody>
</table>
How can i pass the {{blogs._id}} to a form which is inside a loop called {{#each blogs.comments}} .Is that possible.I am trying to delete a comment based on the email and the id of blog.Here the blog id is there in the top of code which is the first form where it displays the blog .And in the second form it displays the comments for the blog.
For me it is not possible to pass the id from blog to second loop(display comment).
I want to pass the id of blog to the action of the form in second loop(display comment)
THANKS IN ADVANCE😊

<option value="{{id}}">{{title}} {{../externalValue}}</option>
//The ../ path segment references the parent template scope that should be what you want.

Related

Sending Data to other route

Hello guys I'm working on a project with Nodejs, Handlebars and Mysql and i want to ask something. I have 2 routes, /page1 and /page2. In /page1 im doing UPDATE and SELECT queries. One of table's column i want it to redirect to /page2 in a label without refresing, is it possible to do that?
Page 1 is 'home'
<script src="/socket.io/socket.io.js"></script>
{{#if removedUser}}
<div class="alert alert-success alert-dismissible fade show" role="alert">
User has been removed.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{/if}}
<div class="row">
<div class="col-6">
<h1>Users</h1>
</div>
<div class="col-6 d-flex justify-content-end">
+ add user
</div>
</div>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
<th scope="col">Credits</th>
<th scope="col" class="text-end">Action</th>
</tr>
</thead>
<tbody>
{{#each rows}}
<tr>
<th scope="row">{{this.id}}</th>
<td>{{this.first_name}}</td>
<td>{{this.last_name}}</td>
<td>{{this.email}}</td>
<td>{{this.credits}}</td>
<td class="text-end" id="text-end">
<div class="input-group input-group-sm mb-3 credits_container">
<form action="/credits/{{this.id}}" method="post" id="form_container">
<input type="number" class="form-control" placeholder="Credits" name="input_credits" id="input_credits"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
<div class="col-12 d-grid">
<button class="bi bi-plus" id="post_credits" type="submit">Add</button>
</div>
</form>
</div>
{{!-- <i class="bi bi-plus"></i> Add --}}
<i class="bi bi-eye"></i> View
<a href="/edituser/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-pencil"></i>
Edit</a>
{{!-- <a href="/{{this.id}}" type="button" class="btn btn-light btn-small"><i class="bi bi-person-x"></i>
Delete</a> --}}
</td>
</tr>
{{/each}}
Label {{this.credits}}
</tbody>
</table>
Page 2 is 'label'
{{#each rows}}
<div class="row">
<label class="label label-default" id="set_input" name="set_input"> {{this.credits}}</label>
</div>
{{/each}}

How to do I pass unique identifier from button to Modal in Handlebars?

I'm creating a Accounting Web System using Nodejs and Express with Handlebars (.hbs), while using Bootstrap as my main Frontend toolkit. I have a dynamic table with each row consisting of information and three buttons. With delete button ("eliminar"), I'm adding a modal to verify that the user actually wants to delete information instead of by accident.
However, when inserting the modal into my handlebar, the information no longer belongs to its appropriate row but rather the first row from the query object rendered into the handlebar. My code looks like this:
<table class="table table-bordered">
<thead class="thead-dark text-center">
<tr>
<th scope="col">Tipo ID</th>
<th scope="col">Tipo Codigo</th>
<th scope="col">Tipo Descripcion</th>
<th scope="col">Acciones</th>
<th scope="col">Usuario</th>
{{!-- <th scope="col">Tiempo Creado:</th> --}}
</tr>
</thead>
<tbody class="text-center">
{{#each tipoparametro}}
<tr>
<th scope="row">{{this.tipoparid}}</th>
<td>{{this.tipoparcodigo}}</td>
<td>{{this.tipodescripcion}}</td>
<td class="text-center">
<a href="/viewuser/{{this.tipoparid}}" type="button" class="btn btn-outline-info btn-small"><i
class="bi bi-eye"></i>Ver</a>
<a href="/edituser/{{this.tipoparid}}" type="button" class="btn btn-outline-primary btn-small"><i
class="bi bi-pencil"></i>Modificar</a>
<a href="/delete/{{this.tipoparid}}" type="button" class="btn btn-outline-danger btn-small"
value={{this.tipoparid}} data-bs-toggle="modal" data-bs-target="#staticBackdrop"
data-target={{this.tipoparid}}><i class="bi bi-person-x"></i>Eliminar - {{this.tipoparid}}</a>
</td>
{{!-- New --}}
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true" value={{this.tipoparid}}>
<div class="modal-dialog text-center">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="staticBackdropLabel">Eliminar
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body ">
Estas seguro que quieres eliminar este Tipo Parametro:
<hr>
<p class="card-text"><strong>Id:</strong> {{this.tipoparid}}</p>
<p class="card-text"><strong>Codigo de Parametro:</strong> {{this.tipoparcodigo}}</p>
<p class="card-text"><strong>Usuario:</strong> {{this.usuarionombre}}</p>
<p class="card-text"><strong>Descripcion:</strong> {{this.tipodescripcion}}</p>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<a type="button" class="btn btn-outline-danger yes" href="/delete/{{this.tipoparid}}">Eliminar</a>
</div>
</div>
</div>
</div>
{{!-- New --}}
<td>{{this.usuarionombre}}</td>
</tr>
{{/each}}
</tbody>
</table>
Is there a simplified way to pass the unique identifier this.tipoparid into the modal so I can obtain the correct info from each row and not from the first all the time?
It's important for me to output the information inside the modal according to its row.

how to submit form with multiple form field bearing the same name to database table in flask

I trying to submit items in a shopping cart to a database table but I can't get a clear understanding or how to implement it using the documentation on WTFORMS and other online materials I came across.
I have this forms in my forms.py:
class CartForm(Form):
amount = IntegerField('Price')
item_name = StringField('Product Name')
quantity = IntegerField('Quantity')
item_total_amount = IntegerField('Item Total')
class MainForm(FlaskForm):
total_amount = IntegerField('Total Amount')
cart_items = FieldList(
FormField(CartForm),
min_entries=1,
max_entries=20)
and this is the form in my template:
checkout.html
<form name="cart" action="{{ url_for('posts.checkout') }}" method="post"
enctype="multipart/form-data">
<table class="timetable_sub">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for item in user_cart %}
</tr>
<tr name="line_items">
<td><input type="text" name="item_name " value="{{item.item_name }}"></td>
<td><input type="number" name="quantity " value="{{item.quantity}}"></td>
<td><input type="number" name="amount" value="{{item.amount}}"></td>
<td>
<input type="number" name="item_total_amount "value="item_total_amount
</td>
</tr>
{% endfor %}
</tbody></table>
<input type="number" name="total_amount" value="total_amount">
<input type="submit" value="Register">
</form>
I will appreciate a tutorial link or code base that can help me send this looped for fields to the database table

When editing item from table, it pulls/saves the wrong information

So, I am working on a CRUD application and I am trying to make it so that I can edit the project when I click edit. I can successfully get the project ID with the req.params.id and it is successfully printing the correct information into the console but when I go to send it to my front end it is still updating the information for the first entry in the collection. Below is the code that I used for this.
Backend:
router.get('/edit/(:id)', function (req, res, next) {
var o_id = new ObjectId(req.params.id).toString();
db.collection('projects').find({
"_id": ObjectId(o_id).toString
}).toArray(function (err, result) {
if (err) return console.log(err)
// if user not found
if (!result) {
req.flash('error', 'Project not found with id = ' + req.params.id)
res.redirect('/projects')
} else { // if user found
console.log(result);
// render to views/user/edit.ejs template file
res.render('edit.ejs', {
user: req.user,
title: 'Edit User',
//data: rows[0],
projID: result[0]._id,
projName: result[0].projectName,
projStat: result[0].status,
projEngineer: result[0].engineer,
projCost: result[0].finalCost
});
}
});
});
Frontend for listing the projects:
<tbody>
<form action="/edit/<%=projID%>" method="post" class="d-flex align-self-center mx-auto" style="width:500px;height:500px;padding:0px;margin:0px;background-color:rgb(255,255,255);">
<tr>
<td>
<input type="text" class="form-control" name="projName" value="<%=projName %>">
</td>
<td>
<input type="text" class="form-control" name="projStat" value="<%=projStat %>">
</td>
<td>
<input type="text" class="form-control" name="projEngineer" value="<%=projEngineer %>">
</td>
<td>
<input type="text" class="form-control" name="projCost" value="<%=projCost %>">
</td>
</tr>
<button class="btn btn-primary btn-block" type="submit" style="background-color:rgb(4,148,74);">Submit</button>
</form>
</tbody>
Front end for editing
<tbody>
<form action="/edit/<%=projID%>" method="post" class="d-flex align-self-center mx-auto" style="width:500px;height:500px;padding:0px;margin:0px;background-color:rgb(255,255,255);">
<tr>
<td>
<input type="text" class="form-control" name="projName" value="<%=projName %>">
</td>
<td>
<input type="text" class="form-control" name="projStat" value="<%=projStat %>">
</td>
<td>
<input type="text" class="form-control" name="projEngineer" value="<%=projEngineer %>">
</td>
<td>
<input type="text" class="form-control" name="projCost" value="<%=projCost %>">
</td>
</tr>
<button class="btn btn-primary btn-block" type="submit" style="background-color:rgb(4,148,74);">Submit</button>
</form>
</tbody>
So I figured out my issue, the way I was querying the db returned all of the objects, I just had to loop over it and find where the id matches up. Thanks to #andreiNikolaenko for pointing out to check that.

How can I differentiate between two POST calls in expressjs?

I currently have two different forms on one inven.ejs file:
One for simple description:
///inven.ejs
<form method="POST" value="inven">
<div id="some-form" style="display: none;">
<table>
<tr>
<td><label for="item">Item</label></td>
<td><input type="text" name="item" required/></td>
</tr>
<tr>
<td><label for="text-box-value">Value</label></td>
</tr>
<tr>
<td><label for="comments">Comments</label></td>
<td><textarea rows="4" cols="50" required></textarea></td>
</tr>
<tr>
<td><input type="submit" /></td>
</tr>
</table>
</div>
</form>
and another for file upload:
///inven.ejs
<div id="fileUp">
<form id="fileUpload" name="fileUpload" enctype="multipart/form-data" method="post">
<fieldset>
<input type="file"id="fileSelect">
<input type="submit" name="upload" value="upload">
</fieldset>
</form>
</div>
In express, how can I differentiate between these two posts in my list.js file?
router.post('/list', function(req,res){
// ???
});
Do I need two routers? Am I completely doing this incorrectly?
Thank you!
EDIT:
Included an image, if it helps?
It makes sense to have forms post to a different address.
That is, <form id="fileUpload" action="file_upload" ... >
Then, if the form is found at http://server/my_form, it will post to http://server/file_upload
In your Node.js router you need to catch that and done.
If you still desire to send both forms to the same address, you can then use hidden fields.
Example: <input type="hidden" name="form_type" value="file_up_form">. Then in your Node.js you check for the argument form_type and check its value.

Resources