Cannot PUT error in Node with express and mongodb - javascript

so im a begginner in Node.js and im trying to make a simple notes app with express and mongoDB, but im getting a problem at modifying one note that says "Cannot PUT " and the id of the note.
This is the code of the view of edit-note
<div class="col-md-4 mx-auto">
<div class="card">
<div class="card-header">
<h3>Edit Note</h3>
</div>
<div class="card-body">
<form action="/notes/edit-note/{{note._id}}?_method=PUT" method="POST">
<input type="hidden" name="_method" value="PUT">
<div class="form-group">
<input type="text" class="form-control" name="title" placeholder="Title" value="{{note.title}}">
</div>
<div class="form-group">
<textarea class="form-control" name="description">{{note.description}}</textarea>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
This is the code of the route configuration
router.get('/notes/edit/:id', async (req, res) => {
const note = await Note.findById(req.params.id);
res.render('notes/edit-note', {note});
})
router.put('/notes/edite-note/:id', async (req, res) => {
const {title, description} = req.body;
await Note.findByIdAndUpdate(req.params.id, {title, description});
res.redirect('/notes')
})
It is supposed to save the new note with the edited values and redirect me to the place where you can see all the notes saved, but it says Cannot PUT /notes/edit-note/63dfae9a9b9b5575065eaaad

Express is right, the endpoint /notes/edit-note/63dfae9a9b9b5575065eaaad does not exist. But this one /notes/editE-note/:id
Be careful with the typo.

Related

I have trouble choosing puppeteer css selector

i need puppetter page.type css select.
<div class="preloader">
<div class="cssload-speeding-wheel"></div>
</div>
<section id="wrapper" class="login-register">
<div class="login-box">
<div class="white-box">
<form class="form-horizontal form-material" id="loginform" method="post">
<h3 class="box-title m-b-20">Sign In</h3>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required="" name="login-username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" required="" name="login-password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="form-group">
<div class="col-md-12">
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button type="submit" name="doLogin" class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Log In</button>
</div>
</div>
<div class="form-group m-b-0">
i need username,password and dologin.
page.type("input[#placeholder='Username']", 'MYUSERNAME');
This code not working.. pls help me
There's no need for the # in your selector and placeholder is a pseudo element. You could use another attribute for your selector:
page.type("input[name='login-username']", 'MYUSERNAME');
Although I'd suggest giving your elements IDs as this will give better selector performance:
<input id="username" class="form-control" type="text" required="" name="login-username" placeholder="Username">
and then
page.type('#username', 'MYUSERNAME');
I think this will be helpful for you for solving your problem.I have tried to make it more simple understandable.So that you can be able to clarify your concept.
/**
* seperate your field information
*
*/
let loginAccount ={
username:"input[name='login-username']",
password:"input[name='login-password']",
loginSubmit:".btn"
}
/** Enter username */
await page.waitForSelector(loginAccount.username);
await page.click(loginAccount.username);
await page.keyboard.type('krdheeraj51');
/** Similiarly for login password */
await page.waitForSelector(loginAccount.password);
await page.click(loginAccount.password);
await page.keyboard.type('enter your password');
/** click your submit button */
await page.waitFor(2000);
await page.waitForSelector(loginAccount.loginSubmit);
await page.click(loginAccount.loginSubmit);

Why is the HTML button not responding to JavaScript redirect?

I am fairly new to Web development and I am struggling get a login form work with JavaScript. Basically, I am trying to hock it up to Firebase, but even before that; every time if hit the sign-in button it spits out the email and password in text on the browser URL and doesn't redirect, regardless where I am redirecting to.
I have tried to redirect to another HTML that I have in the same directory, I have tried Google's home page. Nothing works regardless of what I do with the JavaScript.
This is my HTML
Note: The CSS is not added so it will not get the look and feel.
<div class="login-form">
<div class="form-help-text">Looking for the Advertiser Login? Click here</div>
<div class="login-form-container">
<form name="loginForm" class="form-horizontal" role="form" novalidate>
<div class="form-group" show-errors>
<label class="col-sm-4 control-label">Email Address:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="email" class="form-control" name="email" id="email" ng-model="formData.username" required autofocus>
<span class="input-group-addon"><i class="fa fa-user"></i></span>
</div>
</div>
</div>
<div class="form-group" show-errors>
<label class="col-sm-4 control-label">Password:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="password" class="form-control" name="password" id="password" ng-model="formData.password" required>
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div>
<button id = "loginEmail" class = "btn btn-lg btn-block btn-wrapify-login">Sign In Email</button>
<!--<button id = "login" class="btn btn-lg btn-wrapify-login btn-block">Sign In </button>-->
<div class="member-login-container">
Not a member yet? Sign Up!
</div>
<div class="divider"><img src="img/button-divider.png" class="img-responsive"></div>
<button class="btn btn-lg btn-fb-login btn-block" <i class="fa fa-facebook-official fa-lg"></i> Sign In With Facebook</button>
<div class="divider"></div>
<div id="google-signin-button"></div>
<p class="text-center m-t-sm"><a href"#"">Forgot Your Password?</a></p>
</div>
</form>
</div>
</div>
This it the JavaScript. Everything seems to work fine when inspecting on Chrome JS Console, but I never redirect to the next page
const textEmail = document.getElementById("email");
const textPword = document.getElementById("password");
const btn = document.getElementById("loginEmail");
// const email = document.getElementById("signup");
btn.addEventListener('click', function(){
// Get email and passwrd
const email = textEmail.value;
const pword = textPword.value;
const auth = firebase.auth();
const promise = auth.signInWithEmailAndPassword(email, pword);
console.log("logging in ");
promise.catch(function(error){
console.log(error.message);
});
// console.log(promise);
window.location = "post-login.html";
//window.location.href = "post-login.html"; //just to see if it makes a difference
//window.location = "http://www.google.com";//tried this as well
//window.location.href = "http://www.google.com";//tried this as well
});
What am I doing wrong? Thanks in advance.
Can you try something like:<input type="button" onclick="location.href='http://google.com';" value="Redirect" />
Your JS runs when the submit button is clicked.
You set location to a new value, then the JS finishes and normal form submission takes over and the form is submitted.
Capture the event object and prevent the default behaviour of the button when the JS is successful:
btn.addEventListener('click', function(ev){
...
ev.preventDefault();
});

How to send an alert from node.js express function

Hi and thanks in advance,
I am using the following function in my main.js to send a contact us email. Upon success I am simply redirecting back to home.
How do I send the client a simple alert("Email Sent: Success"); to the client browser.
from main.js
app.use(bodyParser.json());
app.get('/sendMail', function(req, res){
res.sendFile("index.html"); // html file is within public directory
});
app.post('/sendMail',function(req,res){
var username = req.body.name;
var subject = req.body.subject;
var fromEmail = req.body.email;
var toEmail = 'support#domain.my';
var bodyMessage = req.body.message;
// var htmlData = 'Hello: ' + toEmail;
var mg = new Mailgun('key-0000000000000000000');
mg.sendText(fromEmail, toEmail,
'CS: '+subject,
bodyMessage,
fromEmail, {},
function(err) {
if (err)res.send('NOT SENT: STRUGGLE EVERYDAY');
else res.redirect('/');
// res.json({success: true});
// else res.send('Success: EMAIL SENT From: '+fromEmail+' - To: '+toEmail);
});
});
from my index.html page button to send..
<!-- START CONTACT FORM -->
<form method="POST" action="sendMail" accept-charset="UTF-8" class="contact-form" id="jvalidate" novalidate="novalidate">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="field-holder">
<input class="form-control input-lg field" placeholder="John Snow" name="name" type="text">
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="field-holder">
<input class="form-control input-lg field" placeholder="yourEmail#Address.com" name="email" type="email">
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="field-holder">
<input class="form-control input-lg field" placeholder="Subject" name="subject" type="text">
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="field-holder">
<textarea class="form-control" placeholder="Some text" name="message" cols="50" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="alert alert-success" role="alert" style="display: none;">
Message has been successfully sent.
</div>
<div class="alert alert-danger" role="alert" style="display: none;">
<div class="alert-text">Server error</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary btn-contact" type="submit" value="SEND MESSAGE">SEND MESSAGE</button>
</div>
</div>
</form>
<!-- END CONTACT FORM -->
If code does not allow it, are there any modules I can install for this ?
New to node and js. Thanks for the help.
res.json({success: true});
At the front end, you get response in using promise(JavaScript,jQuery,AngularJs..Whatever) and check for success property for your further businedd logic.

taking input from html input in secure way in laravel withoit using facade

i have a html form in laravel based project. this html form insert data to database table called detailuser it has two field one is name and other is phone ok i sucessfully inserted data and everything find then tried to analyse the security so typed in the textfield like <script>alert ('hello');</script> it also sucessfully inserted into database i want to avoid this can any one help me view page containing html form is
view page
<form class="form-horizontal" action="{!!url('addno')!!}"
method="post" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<label class="control-label col-lg-2" for="title">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="title" name="name">
<p class="errors">{!!$errors->first('name')!!}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2" for="content">Phone</label>
<div class="col-lg-10">
<input type="text"class="form-control" id="content" name="phone"></input>
<p class="errors">#foreach ($errors->all() as $error)<div>{{ $error }}</div>#endforeach</p>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-9">
<button type="submit" class="btn btn-primary">Publish</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>
route
Route::post('/addno','Admin\AdminController#addNo');
controller function
public function addNo(Request $request)
{
$det =$request->all();
$rules = array('name' => 'required','phone' => 'required|numeric|is_ten');
$validator = Validator::make($det,$rules);
if ($validator->fails())
{
return Redirect::to('/addno')->withInput()->withErrors($validator);
}
else
{
$bulletin = new Smsdetail;
$bulletin->name = $request->name;
$bulletin->phone= $request->phone;
if($bulletin->save())
{
Session::flash('sucess', 'details added sucessfully');
return Redirect::to('addno');
}
else
{
Session::flash('sucess', 'somthing went wrong check this phone no is previously added');
return Redirect::to('addno');
}
}
}

Angular get all form input value

I have this form:
<form class="form-horizontal" role="form" name="form" ng-submit="update(profile)">
<div class="form-group">
<label class="col-md-2 control-label">Facebook</label>
<div class="col-md-10">
<div class="input-group">
<input type="text" ng-model="profile.facebook" class="form-control" placeholder="Facebook" />
<span class="input-group-btn">
<button ripple-button color="facebook" icon="facebook"></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Instagram</label>
<div class="col-md-10">
<div class="input-group">
<input type="text" ng-model="profile.instagram" class="form-control" placeholder="Instagram" />
<span class="input-group-btn">
<button ripple-button color="instagram" icon="instagram"></button>
</span>
</div>
</div>
</div>
</form>
My Controller:
Profile.get((resp)=>{
$scope.profile = resp.result;
});
//resp.result is: {"id":"Hf561b6fd32aec6ea","name":"Example","nickname":"Example 1", "facebook":"example","instagram":"example"}
$scope.update = (profile) => {
console.log(profile);
}
Here's the workflow: First all I will get profile from the server and put all ng-model profile.* value. And user can edit the value and submit.
The Problem: I want to get all value from the form at once. My ng-submit is working properly and it return profile value.
My question is how can I only get the form key and value based on form instead of getting all the profile key?
my console.log return this:
{"id":"Hf561b6fd32aec6ea","name":"Example","nickname":"Example 1", "facebook":"thisischange","instagram":"thisischange"}
Thanks.
You can get it using jQuery:
var object = {};
$('.form-horizontal').serializeArray().forEach(pair) {
object[pair.name] = pair.value;
});

Categories

Resources