0
151
Vistas¿Cómo enviar una variable de función javascript en req.body?
Este es un código de Google que estoy tratando de integrar en mi código.
Tengo una página de registro con una entrada de número de teléfono, estoy usando un complemento de JavaScript que convierte el número de teléfono al formato E.164: + (código de país) (número de teléfono). el usuario ingresa el número de teléfono y elige el país y una función lo convierte al formato E.164.
<head> <title>signup</title> input/17.0.8/css/intlTelInput.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script> </head> <body> <form action="signup" method="POST"> <!-- PhoneNumber --> <div> <input type="tel" id="phoneNumber" name="phoneNumber"/> <input type="submit" class="btn" value="Verify" /> </div> </form> <div class="alert alert-info" style="display: none;"></div> </body> <script> const info = document.querySelector(".alert-info"); const pNum = document.getElementById("phoneNumber") function process(event) { event.preventDefault(); const phoneNumber = phoneInput.getNumber(); pNum.value = phoneNumber info.style.display = ""; info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`; } const phoneInputField = document.querySelector("#phoneNumber"); const phoneInput = window.intlTelInput(phoneInputField, { utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js", }); </script> 
No sé dónde llamar a la función "proceso" para cambiar el valor de la entrada.
Lo que quiero es enviar la variable phoneNumber en req.body al enviar el formulario para poder usarlo con el código de país.
app.post('/signup', (req, res) => { const {phoneNumber} = req.body; })2 Respuestas
Responde la pregunta0
Puede agregar el atributo onsubmit en el elemento <form> . Ejemplo: form action="signup" onsubmit="process" method="POST"> . En la función de proceso , puede enviar sus datos al servidor back-end usando axios .
0
Puede agregar onSubmit como se indicó anteriormente y useState. El gancho useState es muy bueno para situaciones como esta, ya que tiene un valor y un setValue que funciona en conjunto, lo que significa que puede usar setValue para, obviamente, establecer el valor. Y luego, el valor en useState se actualiza automáticamente y se puede enviar. Esto funciona bien con onChange, ya que onChange puede tomar el valor en la entrada y usar setValue para que el valor siempre se actualice a la entrada de los usuarios.
Como esto:
const [phone, setPhone] = useState("") // in top function function onsubmit(e) { e.preventDefault() const res = await fetch("/api", { method: "post", body: JSON.stringify({phone}), headers: { "Content-type":"application/json" } } }Y uso en la entrada:
<input type="tel" onChange={(e)=>setPhone(e.target.value) />