I am using nodejs with express and ejs.
Every one on internet ask how to pass value from node to the view, but what about the opposite?
For example, I ask my user to input a string in a form, when the user clicks the button, how can I get this string without passing it as a parameter in the url?
The form:
<div class="container">
<form style="width:50%">
<div class="form-group">
<label for="text">Name of the product</label>
<input type="text" class="form-control" id="pName">
</div>
<div class="form-group">
<label for="text">Reciever</label>
<input type="text" class="form-control" id="reciever">
</div>
<div class="form-group">
<label for="text">Location</label>
<input type="text" class="form-control" id="location">
</div>
<!-- <div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>-->
<button type="submit" class="btn btn-default">Submit</button>
</form>
The app.js
var express = require('express');
var app = express();
//ALL GLOBAL VARIABLES
var port = 8080;
app.get('/', function(req, res) {
res.render('index.ejs');
});
app.get('/barcode', function(req,res) {
res.render('barcode.ejs');
});
app.listen(port);
I know I can do this:
app.get('/url/:parameter', function(req.res) {
var foo = req.params.parameter;
}
But if I don't want to use the URL, is it possible to retrieve the data?
Use POST as a method for your html form
<form action="/myapi" method="post">
<input type="text" class="form-control" id="pName" name="pName">
<button type="submit" class="btn btn-default">Submit</button>
</form>
And then handle the client form "action" with app.post on the back end
app.post('/myapi', function(req, res) {
res.send('The pName is "' + req.body.pName + '".');
});
You can use POST method instead of GET. You need to change the route in your Express to
app.post('/url', function(req.res))
and add a method on your form
<form style="width:50%" method="POST">
If you use a POST request the parameters are not part of the URL. E.g.
app.post('/path', function(req, res) {
...
//You can retrieve the parameters of the POST request here
]);
You'll need the body-parser module to be able to get the POST parameters. Here's an answer about how to get the POST parameters once you've set up the route.
Your form should have a method and and action:
<form action="/path" method="POST">...</form>
From your question, In general if you want to get a value from the unique id, you will store that value as a global variable. so you can easily get the current user and user related details.
Related
I'm trying to use post with express and bodyparser to insert data into MYSQL from a form in a ejs file. It keeps returning null, so it seems that my data is not parsed from the form to my backend.
Could you please help?
Here is my server.js
app.use(express.json({ limit: '100mb' }));
app.use(express.urlencoded({ limit: '100mb', extended: false }));
dotenv.config();
// Set the default views directory to html folder
app.set('views', path.join(__dirname, 'html'));
// Set the folder for css & java scripts
app.use(express.static(path.join(__dirname,'css')));
app.use(express.static(path.join(__dirname, 'node_modules')));
// Set the view engine to ejs
app.set('view engine', 'ejs');
app.use('/', routes);
app.listen(3000, () => {
console.log(`Server is running at ${process.env.SERVER_PORT}`);
});
my index.js
router.post('/save', (req, res) => {
const formData = { username : req.body.username, account : req.body.account, email : req.body.email,
address : req.body.address, start_date : req.body.start_date, picture : req.body.picture,
request : req.body.request };
const sqlPut = "INSERT INTO dbTable ?";
const query = dbconn.conn.query(sqlPut, formData, (err, results) => {
if(err) throw err;
res.redirect('/about')
})
})
Here is my ejs file with the form.
<div class="container" >
<form id="contact" action="/save" method="post">
<h3>New scholar form</h3>
<fieldset>
<input placeholder="username" id="username" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="account" id="account" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="email" id="email" type="email" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="bnc_address" id="bnc_address" type="text" tabindex="4" required>
</fieldset>
<fieldset>
Scholar start date <input placeholder="start_date" type="date" tabindex="4" required>
</fieldset>
<fieldset>
<input placeholder="picture" id="picture" type="text" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Scholar request..." id="request" tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit">Submit</button>
</fieldset>
</form>
I can retrieve data from the database and post it just fine. I just haven't figured this one out.
I haven't posted here in a while, so bear with me
You need to change this line:
app.use(express.urlencoded({ limit: '100mb', extended: true }));
Parses the text as URL encoded data(which is how browsers tend to send form data from regular forms set to POST) and exposes the resulting object (containing the keys and values) on req.body.
I imported body-parser without using it. After I removed the import it started working.
Removed this, even though it was not used, it started working after:
const bodyParser = require("body-parser");
I have this form in HTML and I am trying to convert it into a POST request using a frontend framework (either AngularJS or Angular2). The purpose of this form is to allow a client to subscribe to my wordpress blog. I am trying to convert it from PHP to Angular2 (if someone knows how to convert it to AngularJS I can convert to Angular2 from there). How would I do this? What would have to be in the body of the POST request vs query strings? I am having trouble understanding exactly what role each part of this form plays in the POST request.
EDIT: Just to clarify, I know how to use AngularJS and Angular2 and how to use the HTTP service in both of them. I am wondering how to convert the form into the body/query strings of the request.
<form action="/blog/" class="form-inline" role="form" method="POST" accept-charset="utf-8" id="subscribe-blog">
<!-- add hidden inputs for wordpress jetpack widget -->
<input type="hidden" name="action" value="subscribe" />
<input type="hidden" name="source" value="http://www.mywebsite.com/blog/" />
<input type="hidden" name="sub-type" value="widget" />
<input type="hidden" name="redirect_fragment" value="blog_subscription-2" />
<label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="email" class="form-control wide" id="exampleInputEmail" placeholder="Enter email address">
<button type="submit" name="jetpack_subscriptions_widget" class="btn btn-submit">Subscribe</button>
</form>
Would something along the lines of this be correct?
postForm() {
var body = {
action: 'subscribe',
source: 'http://www.mywebsite.com/blog/',
sub-type: 'widget',
redirect_fragment: 'blog_subscription-2',
email: 'clientEmailAddress#gmail.com', // don't think this is right
// not sure what to do with `jetpack_subscriptions_widget` attribute on the submit button either
};
return this.http.post(`http://www.mywebsite.com/blog/`, body)
.map(res => res.json())
.toPromise()
.then(data => {
return data;
});
}
You need to include angular.min.js and script.js
html
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name" />
<input type="submit" value="Send" ng-click="send(name)"/>
</body>
angular js code:
script.js
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$http', funtion($scope, $http){
$scope.name = ""; // intially the input field is empty. As you type in the input field, the value will be updated here.
$scope.send = function(name){
alert(name);
var url = $scope.name; // try to enter an url
$http.get(url).then(function Success(res){
// here you can do anything with res
}, function Error(err){
alert(error);
})
}
}]);
Using angular, you split the application in parts:
view (html)
process some validations, etc (controller)
and do some model logic processing (service).
If you want to make the http request completely with angular to an endpoint (backend service, REST, or any other), usually in this case:
You use ng-model for each input field you need to send in the request, something like <input type="text" ng-model="val">. In your case your html would be something like:
html
<form ng-submit="send()" class="form-inline" role="form" accept-charset="utf-8" id="subscribe-blog">
<!--no need of 'action' attribute in the form since the post will be done using angular-->
<!-- add hidden inputs for wordpress jetpack widget -->
<input type="hidden" name="action" value="subscribe" ng-model="subscribe"/>
<input type="hidden" name="source" value="http://www.mywebsite.com/blog/" ng-model="source"/>
<input type="hidden" name="sub-type" value="widget" ng-model="widget" />
<input type="hidden" name="redirect_fragment" value="blog_subscription-2" ng-model="redirect_fragment"/>
<label class="sr-only" for="exampleInputEmail">Email address</label>
<input type="email" class="form-control wide" id="exampleInputEmail" placeholder="Enter email address" ng-model="email">
<button type="submit" name="jetpack_subscriptions_widget" class="btn btn-submit">Subscribe</button>
</form>
Then in your controller you can process all your ng-model if needed and then pass those values to a (angular) service like this
//....angular controller
function send(){
//..collect params using the ng-models
var params = [];
params['email'] = $scope.email; //here you define 'email' as the name of the param received by the webservice as input !!!
myService.sendValues(params).then(function(data){
})
}
...where you would finally send the values to the php service like code below:
//... angular service
function sendValues(params){
var url = "miendpointurl/subscribe";
//... at this pont in params you have all those params you named like 'email', 'subscribe' and so on
return $http.post(url, params).then(function(response){
return response.data;
},
function(responseOnError){
return responseOnError.data;
}
}
Angular will interact with the php service transparently to you and will give you back the server response.
I have a form
<form action="./search" method="GET">
<div class="form-group text-center">
<input type="text" name="keyword" placeholder="Job Title" />
<button type="submit" class="btn btn-primary">Find Jobs</button>
</div>
</form>
If I enter "akron" in the form and submit and pass it to this next method it returns "Cannot GET /search?keyword=akron"
router.get('/search/:keyword', function(req, res) {
res.send('hello ' + req.params.keyword + '!');
})
But if I type http://localhost:3000/search/akron it will return the "hello akron!"
What is the correct way to pass the parameters?
Change to
action="/search"
The "./blah" syntax with dot in front is for files.
Also change to
router.get("/search" //...
and use req.query
I'm a little be confused when it comes to calling APIs over node.js.
I have a server running node js where I can install frameworks like the one for chargebee.
I created a html page where I make subscriptions etc. Now I would want to call the corresponding chargebee function to make the subscription.
If I try to load chargebee with require('chargebee')it failes. I can only load it in the server js.
So how would it be possible for me to use the functionalities of chargebee?
Is it possible that I invoke a function from chargbee by a click on the button? Do i have to provide this function by express?
I think I did not understand the difference between client side code and server side code when it comes to node.js.
How can function on the server side be invoked by clicks on html buttons for example?
In order to trigger request from client side you can use forms or AJAX. Here is an example with express framework in which form is used to trigger request and create subscription in chargebee
Client-Side Code:
<html>
<body>
<form action="/subscribe" method="post">
<label for="name">First Name:</label>
<input type="text" id="name" name="customer[first_name]" placeholder="first name" />
<br />
<label for="name">Last Name:</label>
<input type="text" id="name" name="customer[last_name]" placeholder="last name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="customer[email]" placeholder="Enter your email address" />
<br />
<input type="submit" value="Create Profile" />
</form>
</body>
</html>
Node-Server code:
var express = require('express');
var chargebee = require("chargebee");
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
chargebee.configure({site : "<<site_name>>",
api_key : "<<api_key>>"
app.get('/', function(req, res){
res.sendFile(__dirname + '/form.html');
});
app.post('/subscribe', function(req, res){
var params = req.body;// getting form params as JSON
params['plan_id']='enterprise'; // plan id that is present in your Chargebee site
chargebee.subscription.create(params).request(function(error,result){
if(error){
//handle error
console.log(error);
}else{
console.log(result);
var subscription = result.subscription;
res.writeHead(200, {
'content-type': 'text/plain'
});
res.write('Successfully created subscription\n\n' + 'id :: '+ subscription.id);
res.end();
}
});
});
app.listen(3000);
console.log("server listening on 3000");
It is possible with chargebee v3 . Hope This will solve your query
<!DOCTYPE html>
<html>
<head>
<title>chargebee Example</title>
<script src = "https://js.chargebee.com/v2/chargebee.js" data-cb-site = "your site name" > </script>
</head>
<body>
<!-- for creating subscription -->
<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id="30" >subscribe</a>
<!-- for managing portal -->
<a href="javascript:void(0)" data-cb-type="portal" >Manage account</a>
</body>
</html>
I have a super simple form within a NodeJS/ExpressJS app which fails to post.
The app.js code (I call it server.js) looks like this.
var express = require('express');
var fs = require('fs');
var path = require('path');
var urlEncoded = require('urlencoded-request-parser');
var bodyParser = require('body-parser');
var server = express();
var port = process.env.port || 1337;
server.use(urlEncoded());
server.use(bodyParser.urlencoded({extended: true}));
var routePath="./routes/";
fs.readdirSync(routePath).forEach(function(file) {
var route=routePath+file;
require(route)(server);
});
server.set('view engine', 'ejs');
server.set('views', __dirname);
server.listen(port);
My post form (post.ejs)
<form method="post" action="post-put">
<fieldset>
<!-- Form Name -->
<legend>Which Test Type</legend>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-2 control-label" for="TestType">Please test our</label>
<div class="col-md-4">
<label class="radio-inline" for="TestType-0">
<input type="radio" name="SoftwareTestType" id="TestType-0" value="SoftwareTest" checked="checked">
Software
</label>
<label class="radio-inline" for="TestType-1">
<input type="radio" name="HardwareTestType" id="TestType-1" value="HardwareTest">
Hardware
</label>
</div>
</div>
</fieldset>
<input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
</form>
The results are shown in this page (post-results.ejs)
<%= Test %>
I have two routes (post-get.js)
module.exports = function(server){
server.get('/post', function(req,res){
res.render('./views/test/post.ejs',{
});
});
}
and (post-puts.js)
module.exports = function(server){
server.post('post-put', function(req,res){
console.log("In Submission POST")
var TestType = "";
if(req.body.HardwareTestType == true)
TestType = "Hardware";
else
TestType = "Software";
res.render('./views/test/post-results.ejs',{
Test: TestType
});
});
}
When I click on submit button, developer tools shows this:
This is driving me insane. Does anyone know how to get this to post the results to the post-results.ejs file. The layout of the filesystem for the application looks like this:
UPDATE:
Both the form and the router have same paths "post-puts".
In the post-puts route there is a console.log() ... but it is NOT called.
I think it could still be the application type as shown in the image two up (Developer Tools)
When a "thing" has only 1 function, saying it does not work is specific - if I could be more specific I would know what the problem was and fix it.
This HTML URL path <form method="post" action="/post-put"> doesn't match this path in your code server.post('/test/post-put'. Make them match and it will work.
remove slash from post-put
<form method="post" action="post-put">
SOLVED
The resolution to the above problem was the following.
1) I changed the route back to "/post-put" in the form Action and in the Route file.
2) I added enctype="multipart/form-data" to the form.
So the form now looks like
<form method="post" action="/post-put" enctype="multipart/form-data">
<fieldset>
<!-- Form Name -->
<legend>Which Test Type</legend>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-2 control-label" for="TestType">Please test our</label>
<div class="col-md-4">
<label class="radio-inline" for="TestType-0">
<input type="radio" name="TestType" id="TestType-0" value="SoftwareTest" checked="checked">
Software
</label>
<label class="radio-inline" for="TestType-1">
<input type="radio" name="TestType" id="TestType-1" value="HardwareTest">
Hardware
</label>
</div>
</div>
</fieldset>
<input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
</form>
ALTERNATIVE SOLUTION
Keep the form enctype as enctype="application/x-www-form-urlencoded"
In App.js (my server.js)
Remove app.use(bodyparser.urlencoded());
Change app.use(bodyParser.urlencoded({extended: true})); to server.use(bodyParser.urlencoded());
Now the POST method of the form works!
Thanks to those who tried to help.