I have a user update form that I'm working on. The user can pick an option from a select menu, and that option gets saved to the db as a string.
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral">Neutral</option>
<option value="Evil">Evil</option>
</select>
When the user picks an option, I'm able to post to the database. When I reload the page, I'd like to get the chosen value and use it to add a selected attribute to the corresponding option. So if a person picks Neutral and saves it, I'd like to show...
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral" selected >Neutral</option>
<option value="Evil">Evil</option>
</select>
you have to pass value morality to view when rendering page :
router.get('/edit/:id', function(req, res) {
Model.findOne({_id:req.params.id},function(err,data){
if(!err && data){
res.render('home',{morality:data.morality});
// or you can pass whole data object to view
//res.render('home',{data:data});
// inside view {{data.morality}}
}
});
});
and in view add condition like this :
<select name="morality" id="morality">
<option value="" {{morality==''?'selected':''}}>Choose down below!</option>
<option value="Good" {{morality=='Good'?'selected':''}}> Good</option>
<option value="Neutral" {{morality=='Neutral'?'selected':''}}>Neutral</option>
<option value="Evil" {{morality=='Evil'?'selected':''}}>Evil</option>
</select>
Related
I'm not sure if there's something wrong with my code or it's an existing bug with lit-html?
I'm trying to get value of the selected item when button is clicked.
number.js
<select class="form-control" name="number">
<option ?selected=${this.number === 1} value="1">One</option>
<option ?selected=${this.number === 2} value="2">Two</option>
<option ?selected=${this.number === 3} value="3">Three</option>
</select>
<button type="button" #click=${getSelectedValue}>Get Selected Value</button>
getSelectedValue() {
const selectOptions = this.querySelector('select[name="number"]');
const selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
}
I've tried selectOptions.value but I still can't get the selected value.
Note that, I've added createRenderRoot() {return this;} to disable the shadowDOM.
here is my code for select in html
<select class="status" name="status">
<option value="Pending">Pending</option>
<option value="Done">Done</option>
</select>
here is my code for server.js
App.post('/userAddedIntoTable',(req,res)=>{
console.log(req.body.status);
res.send("testing");
});
(For the solution check the last answer)
I'm creating object with rating system with default value of 0. What I'm trying to do is to update the rating value by choosing one of the options in the <select> dropdown menu. The problem is when I'm submiting the selected value it sends the 'Cannot POST / ...' error.
Here's the app.js code with post and get requests:
// Updating Single Object
app.post('project/:projectId', (req, res) => {
const project = {};
project.rating = req.body.rating;
Project.update({_id: request.params.projectId}, project, (err) =>{
if(err){
console.log(err);
return;
} else {
res.redirect('/project/:projectId');
}
});
});
// Route To Single Project
app.get('/project/:projectId', (req, res) => {
const requestedProjectId = req.params.projectId;
Project.findOne({_id: requestedProjectId}).populate('image_file').exec((err, project) => {
res.render('project', {
project: project
});
});
});
And the form:
<form action="/project/<%= project.id %>" method="post">
<select class="" name="rating">
<option value="0">Rate us</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="submit" value="Vote">
</form>
I think I'm missing something but can't figure it out.
Thank you in advance.
Just change your url in routes, use /project/:projectId instead of project/:projectId in app.post() method
Solved it after 3 hours, realizing I was missing the / before project in the url route.
app.post('project/:projectId', (req, res) => {
Maybe instead of:
<form action="/project/<%= project.id %>" method="post">
you should use:
<form action="/project/<%= project._id %>" method="post">
I am trying to pass a function as a variable and call that function using onclick=""
but the function is executing before passing.
Here is the code.
seminar.js
function getco(){
console.log('hello');
}
router.get('/add',(req,res)=>{
res.render('cms/seminar/add',{
getco:getco()
});
});
add.handlebars
<form action="/cms/seminar/add" method="post">
<div class="form-group">
<label for="sel1">Game Name of the Seminar</label>
<select class="form-control" id="seminar_gamename" name="seminar_gamename" required onclick="getco">
<option value="pubg">Pubg</option>
<option value="candy_crush">Candy Crush</option>
<option value="fortnite">Fortnite</option>
<option value="mortal_combat">Mortal Combat 11</option>
<option value="far_cry_city">Far Cry City Dowm</option>
<option value="fortnite">Fortnite</option>
<option value="prince_of_persia">Prince of Persia:The Forgotten Sand</option>
</select>
</div>
</form>
//But the result im getting is 'hello' without even clicking
As mentioned in the comment above you are directly calling the function instead of passing it to frontend.
Try removing () from getco
`function getco(){
console.log('hello');
}
router.get('/add',(req,res)=>{
res.render('cms/seminar/add',{
getco:getco
});
});`
This allows you to pass the method as a variable and then in frontend use,
onclick="getco()"
I have an parent SiliComponent and child SiliChildComponent.
Within SiliChildComponent I have an #Input() expdays:any[];
This is added within ngOnChanges interfaces like this:
Angular4 SiliChildComponent
data:any;
#Input() expdays:any[];
ngOnChanges() {
this.data = this.expdays;
}
**HTML from parent component SiliComponent **
<select (ngModelChange)="changeCar($event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
<expdays [expdays]='exp_searchData'></expdays>
HTML from child component SiliChildComponent where I am using the #Input data
<div *ngFor="let x of data" >
{{x}}
</div>
Fixed problem:
The issue was in another place of my code.