I am taking my first jab at Express Node JS and thoroughly enjoying it. I'm looking to understand how to get first name and last name information input by a user to the server and displaying it in the console log.
My code in HTML is as follows:
<form action = "/getname/" method = "GET">
<p>First name: <input type="text" id="fname" name="firstname"></p>
<p>Last name: <input type="text" id="lname" name="lastname"></p>
<p><input type="button" value="Submit" id="namebutton" /></p>
<p><span id="JSONname"></span></p>
</form>
My code in Express app.js is:
app.get('/getname/', function (req, res) {
response = {
firstname: req.query.firstname,
lastname: req.query.lastname
};
console.log(response);
res.end(JSON.stringify(response));
})
I think the connection between the localhost:xxxx/getname and the server is working, however the html to getname isn't working.
Might anyone see where the code is going wrong?
The submit button must be type="submit" and not type="button".
Related
I am doing a json to html work in expressjs but when i post data to search in my file my server restart itself and gives me ERR_CONNECTION_RESET how can i fix it? `
<div>
<form action="/" method="post">
<label for="Search">Please enter the name of the person you want to Search. (Attention capital letters)</label>
<input type="text" name="Search" id="Search">
<button type="submit">Search</button>
</form>
</div>
this is my html search code and this is my expressjs code
app.post("/", function(req,res){
let searching = String(req.body.Search);
let employees1= JSON.parse(fs.readFileSync('./employees.json','utf-8')) ;
let searching_in_employees = employees1.map((emp) => {
if(emp.preferredFullName==searching){
console.log(emp.jobTitleName);}
})
searching_in_employees;
})
`
im getting the console.log(jobtitlename) anyway but this annoying me
I tried to give button refresh page but did not work, still getting the error.
I would like to add a loading gif to my project. I have a HTML form that on submit goes to a PHP file and it builds a table from there. Depending on user input, the query could take awhile to run. I'd like a loading gif to display once the form submit button is clicked until the query is finished running and then redirect to the php script. I think I need to use AJAX if I am not mistaken. When I run the below code, nothing happens. In the console, I can see the Post to the php script was successful and the form data is sent but no redirect and no modal with my loading gif. Any help is extremely appreciated, I am just learning jquery/ajax. Here is what I've managed to code so far..
Jquery
$(function(){
var form = $('#date_range');
$(form).submit(function(e){
e.preventDefault();
var fData = $(form).serialize();
var result = $.ajax({
type: 'POST',
url: 'test_loading_gif.php',
data: fData
});
$('#loader').css("display","flex");
result.done(function(response){
$('#loader').css("display","none");
});
});
});
HTML
<div id="loader"><img src='loading.gif' style='display:none;'></div>
<div style="width: 60%;margin: auto;display: flex;justify-content: center;">
<form id="date_range">
<label for="first_date">Beginning Date:
<input type="date" name="first_date" id="first_date" required>
</label>
<label for="2nd_date">End Date:
<input type="date" name="second_date" id="second_date" required>
</label><br>
<input type="submit" value="Search">
</form>
I'm sure this is a simple thing I am missing but the internet seems devoid of the documentation to do this simple thing.
I am trying to grab data from my HTML and send it to my database. I forgot to add my script tag to the HTML for a while but it was working and sent two tests into the database before it stopped working and said my validations failed (both title and blog are required).
What am I missing? Thank you for your help!
my form:
<form
action="/api/blog"
method="POST"
id="blog-form"
class="blog-form container mt-5"
enctype="multipart/form-data">
<label for="title">Title</label>
<input type="text" name="title" />
<br />
<label for="blog">Text</label>
<textarea name="blog" rows="15" cols="120"></textarea>
<input type="submit" value="submit" />
</form>
JS:
const form = document.getElementById("blog-form");
form.onsubmit = (e) => {
e.preventDefault();
console.log(e.target.value); // this is coming back undefined
};
API route:
router.post("/blog", async (req, res) => {
console.log(req.body);
const blog = new Blog({
title: req.body.title,
blog: req.body.blog,
});
try {
await blog.save();
res.status(201).json(req.body);
} catch (err) {
console.error(err.message);
res.status(500).send("server error");
}
got it working by removing the "enctype="multipart/form-data" from the HTML and removing all of the JS
I currently have an app.js file and an index.html file, I want to pass data from a index.html to app.js.
I am trying to use expressJS to perform a post request but is doesn't seem to be handling the data.
HTML:
<form action="./index.html" method="post">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
NodeJS:
var express = require("express");
var app = express();
app.post('/', urlencodedParser, function(req,res){
console.log(req.body);
});
On the server command line I am getting /POST so I is registering that a post request is being made but console.log() isn't initialising with the data.
I managed to make a working example and have uploaded it to this repo.
https://github.com/crimson-eagle/nodeJS-POST-FORM
My NodeJS server uploads files to amazon using a secret form. With that said, I want to add extra security by providing a password field to that form - problem is, when I do that, my server does not get that property when I try to access it through req.body.pass
My code:
//Express NodeJS Server:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.post('/upload', function(req, res, next) {
console.log(req.body.pass); //undefined, but why? when I remove enctype='multipart/form-data' it works
})
//HTML
<form action="/upload" method="post" enctype='multipart/form-data'>
<input type="file" name="name" value="">
<input type="file" name="email" value="">
<input type="file" name="age" value="">
<br>Password: <input type = "password" name = "pass"><br>
<br><input type="submit" value="Submit">
</form>
When I remove the following:
enctype='multipart/form-data'
the field pass works.. what am I doing wrong here?
As the bodyParser middleware names suggest, they only handle 'application/json' and 'application/x-www-form-urlencoded' forms. You will need a separate module to handle multipart/form-data forms, such as multer.