Req.body Value indefinido para el valor del campo Formulario establecido por la función JavaScript -- de.js campo con express campo con body-parser camp Relacionados El problema

req.body value undefined for form field value set by javascript function


1
vote

problema

Español

Estoy construyendo una aplicación node.js, express.js y pasaport.js. Una vez que haya iniciado sesión en el perfil, le pido al usuario que haga clic en un botón "Obtener ubicación" para obtener la ubicación de los usuarios.

Perfil.ejs

  <form action="/testform" method="post" >   <div class="form-group">   <input type="text" class="form-control" id="latVal" placeholder="latitude">   <input type="text" class="form-control" id="longVal" placeholder="longitude">   </div>   <button type = "submit" class="btn btn-warning btn-sm">Save</button> </form> <button type = "submit" class="btn btn-warning btn-sm" onclick="getLocation()">Get Location</button>   

Onlick se llama la función GetLocation () que se encuentra en mapcall.js

  function getLocation()   …  //call to showLocation() }   function showLocation(position) {     …     document.getElementById("latVal").value = latitude;      document.getElementById("longVal").value = longitude;  }   

Localización () Establece los valores en el formulario a la latitud (id = "latval") y la longitud (ID = "Longval") regresó de la llamada API. Los valores aparecen en el campo Formulario. Desde aquí, quiero guardar estos valores a los datos del perfil de los usuarios en MongoDB, lo que intento lograr en rutas.js haciendo clic en el botón "Guardar" que desencadena la función a continuación

  app.post('/testform', isLoggedIn, function(req, res) {         user.findById(req.user.id, function(err,user) {             if(!user) {                 req.flash('error', 'No accound found');                 return res.redirect('/profile');             }             user.location.latitude = req.body.latVal;             user.location.longitude = req.body.longVal;              user.save(function(err){                 res.redirect('/profile');             });         });     });   

Cuando consuelo.log req.body.latval y req.body.longval El valor de estas variables no está definido. Nada se guarda en el db.

en server.js tengo

  var bodyParser = require('body-parser'); app.use(bodyParser());   

Al buscar soluciones propuestas para req.bodia que regresa indefinida, lo intenté

  app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));   

No creí que agregar las dos líneas anteriores funcionarían porque el valor devuelto por la API no está en formato JSON. Esto no funcionó. Revisé el tipo de latitud y longitud y es un número. No estoy seguro de por qué Req.body no está recogiendo el valor.

Mi conjetura inicial fue que la aplicación intenta leer el valor antes de que la API pueda devolver un valor en el que el caso Req.Body.latval leería un campo vacío. Añadí el botón Guardar para probar esa teoría que también resultó incorrecta.

Lo más cercano que encontré a mi problema es este que nunca se resolvió.

Cualquier orientación es muy apreciada o tal vez incluso una mejor manera de lograr esto será genial. La razón por la que tengo los campos de formulario Poblar es porque no podía pensar en otra forma de enviar los valores de la frontend al backend para guardar.

Original en ingles

I am building a node.js,express.js and passport.js app. Once logged into the profile I ask the user to click a button xe2x80x9cGet Locationxe2x80x9d to get the users location.

Profile.ejs

<form action="/testform" method="post" >   <div class="form-group">   <input type="text" class="form-control" id="latVal" placeholder="latitude">   <input type="text" class="form-control" id="longVal" placeholder="longitude">   </div>   <button type = "submit" class="btn btn-warning btn-sm">Save</button> </form> <button type = "submit" class="btn btn-warning btn-sm" onclick="getLocation()">Get Location</button> 

onclick the getLocation() function is called which is located in mapCall.js

function getLocation()   xe2x80xa6  //call to showLocation() }   function showLocation(position) {     xe2x80xa6     document.getElementById("latVal").value = latitude;      document.getElementById("longVal").value = longitude;  } 

showLocation() sets the values in the form to the latitude (id="latVal") and longitude (id="longVal") returned from the API call. The values appear in the form field. From here I want to save these values to the users profile data in MongoDB which I try to achieve in routes.js by click of the xe2x80x9cSavexe2x80x9d button which triggers the function below

app.post('/testform', isLoggedIn, function(req, res) {         user.findById(req.user.id, function(err,user) {             if(!user) {                 req.flash('error', 'No accound found');                 return res.redirect('/profile');             }             user.location.latitude = req.body.latVal;             user.location.longitude = req.body.longVal;              user.save(function(err){                 res.redirect('/profile');             });         });     }); 

When I console.log req.body.latVal and req.body.longVal the value for these variables is undefined. Nothing is saved in the db.

In server.js I have

var bodyParser = require('body-parser'); app.use(bodyParser()); 

Upon looking into proposed solutions to req.body returning undefined I tried

app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); 

I didnxe2x80x99t think adding the two lines above would work because the value returned by the API is not in JSON format. This did not work. I checked the typeof for latitude and longitude and it is a number. I am not sure why req.body is not picking up the value.

My initial guess was that app.post tries to read the value before the API can return a value in which case req.body.latVal would read an empty field. I added the save button to test that theory which also proved wrong.

The closest thing I found to my issue is this which was never resolved.

Any guidance is highly appreciated or perhaps even a better way to accomplish this will be great. The reason I have the form fields populate is because I couldn't think of another way to send the values from the frontend to the backend for saving.

        

Lista de respuestas

2
 
vote
vote
La mejor respuesta
 

Agregar el atributo name a sus entradas.

  <input type="text" class="form-control" id="latVal" placeholder="latitude" name="latVal"> <input type="text" class="form-control" id="longVal" placeholder="longitude" name="longVal">   

Editar: (del comentario)

Puede realizar una llamada AJAX a su servidor después de la llamada parents2 .

  function getLocation() {     ///you get the lat and long     showLocation(position)     saveLocation(latitude, longitude)     .then(function(resp){         //do something with resp     }) } function saveLocation(latitude, longitude) {     //we have native fetch in newer browsers, so         return fetch("/testform", {             method: "POST",             headers: {                 "Content-Type": "application/json; charset=utf-8", //if this doesn't work use the below one                 // "Content-Type": "application/x-www-form-urlencoded",             },             body: JSON.stringify({latitude,longitude}), // body data type must match "Content-Type" header         })         .then(response => response.json()); }   

Este es solo un resumen de lo que puede hacer. Extienda este código a sus necesidades.

 

Add the name attribute to your inputs.

<input type="text" class="form-control" id="latVal" placeholder="latitude" name="latVal"> <input type="text" class="form-control" id="longVal" placeholder="longitude" name="longVal"> 

EDIT: (from the comment)

You can do an AJAX call to your server after the getLocation() call.

function getLocation() {     ///you get the lat and long     showLocation(position)     saveLocation(latitude, longitude)     .then(function(resp){         //do something with resp     }) } function saveLocation(latitude, longitude) {     //we have native fetch in newer browsers, so         return fetch("/testform", {             method: "POST",             headers: {                 "Content-Type": "application/json; charset=utf-8", //if this doesn't work use the below one                 // "Content-Type": "application/x-www-form-urlencoded",             },             body: JSON.stringify({latitude,longitude}), // body data type must match "Content-Type" header         })         .then(response => response.json()); } 

This is just an outline of what you can do. Extend this code to your needs.

 
 
   
   
0
 
vote

Usted tiene razón en la mayoría de las partes, solo tiene que reemplazar ID con nombre. Esa es la única forma en que los NODEJs podrán localizarlo en su campo de entrada

 

You are correct in most parts ,You just have to replace ID with name.that is the only way nodejs will be able to locate to your input field

 
 

Relacionados problema

2  Uso de TypeScript con el analizador de cuerpo para leer las propiedades de req.body  ( Using typescript with body parser to read req body properties ) 
Estoy construyendo una aplicación web usando TypeScript con el middleware del Parser Body-analser para analizar los organismos de solicitud de JSON. Me estoy ...

0  Cómo actualizar los datos de MongoDB con JQUERY AJAX  ( How to update mongodb data with jquery ajax ) 
He estado tratando de actualizar los datos de MongoDB (datos de usuario) con una solicitud PUT de AJAX pero no puede obtenerla para actualizar. No estoy exact...

0  La entidad es demasiado grande en la versión JS de Nodo (Express ":" ^ 4.17.1 ",)  ( Entity is too large in node js versionexpress 4 17 1 ) 
Estoy tratando de enviar 6 imágenes basadas en basadas en algunos datos, pero sigo obteniendo un error entity is too large incluso he agregado por debajo de...

0  Express, Multer, Bodyparser Req.body Vaciar Array  ( Express multer bodyparser req body empty array ) 
Perdón por una pregunta de una noob, pero tengo un formulario Subir imágenes y agregar un mensaje de texto a la DB, las imágenes se están cargando bien, pero ...

12  Cómo manejar los errores del analizador de carrocería en Nodejs Express  ( How to handle body parser errors in express nodejs ) 
Estoy golpeando un servicio web en nodo con los siguientes datos, Mis datos de solicitud son: { "first_name":"surinder",, "last_name":"rawat", "email":"s...

0  Nodejs Body-Parser o Solicitar el envío de flujo de JSON comprimido  ( Nodejs body parser or request sending stream of compressed json ) 
¿Es prudente enviar la corriente de Stream Zlib directamente a la API de reposo creada en NODEJs, ¿deberíamos codificarlo antes de enviarlo? En segundo luga...

0  Express analizando JSON con análisis de cuerpo  ( Express parsing json with body parse ) 
Estoy tratando de usar la versión 1.18.3 de PERSULTURA CUERPA 1.18.3 con Express para analizar una publicación JSON. En app.js lo he incluido así app.js ...

0  ¿Por qué falla el analizador de carrocería cuando busco el recurso en modo 'NO CORS'?  ( Why does body parser fail when i fetch the resource in no cors mode ) 
Abre una página estática del sistema de archivos que intenta buscar un recurso de un servidor que se ejecuta en localhost (a saber, una lista de directorios d...

2  El parsero del cuerpo atrapa a Bad Json  ( Body parser catch bad json ) 
¿Es posible capturar la sintaxis de JSON mala en body-parser ? El siguiente código muestra mi intento. El problema es que no puedo acceder a ningún expres...

1  Número con JSON para BODYPARSER  ( Issue w json for bodyparser ) 
Estoy enviando datos en mi componente de reacción a través de la API de búsqueda y devolviendo el resultado como JSON. Cuando se publican en mi servidor Expre...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos