0

tengo un problema con la URL, yo al hacer la peticion post al enviar el formulario resulta que los parametros se quedan en la URL introducir la descripción de la imagen aquí

pero yo lo que quiero es que al enviar el formulario este no se quede pegado en la URL, probe con recargando la pagina pero se sigue quedando los parametros en la URL. Lo estoy haciendo con REACT y el Backend con Nodejs Aca dejo la funcion que se encarga de enviar el formulario:

const handleSubmit = async(e) =>{
    e.preventDefault()
    await axios.post('http://localhost:3050/contacto/data' , formConsulta)
    
}

le saque el e.preventDefault() pero si lo saco no me envia el formulario, tambien intente con

window.location.href('/')

creo que lo puse asi, pero tampoco me funciona. Alguien tiene un metodo para que no se quede pegado los parametro en la URL? Desde ya muchas gracias, Estare viendo las respuesta.

AGREGO EL FORMULARIO

                        <form onSubmit={handleSubmit}>
                            <label>Nombre</label>
                            <input
                                type="text"
                                name='frm_nombre'
                                onChange={handleChange}
                                placeholder='Tu Nombre'/>
                            <label>Celular</label>
                            <input
                                type="number"
                                name='frm_cel'
                                onChange={handleChange}
                                placeholder="Tu Celular"/>
                            <label>Correo</label>
                            <input
                                type="email"
                                name='frm_email'
                                onChange={handleChange}
                                placeholder="Tu Correo"/>
                            <label>Consulta</label>
                            <textarea
                                type='text'
                                name='frm_consulta'
                                onChange={handleChange}
                                height='300px'/>
                            <div className='container-button-contacto'>
                                <input type='submit' value='Enviar' id='button-contacto'/>
                            </div>
                        </form>
2
  • 1
    Podrías agregar parte del formulario para ver como estás usando ese handleSubmit? Porque los parametros post no van en la URL, entonces lo mas probable es que lo que estés ejecutando sea un GET
    – Pipe
    el 4 nov. 2022 a las 18:43
  • @Pipe ahi ya lo agrege, disculpe la demora el 4 nov. 2022 a las 19:23

1 respuesta 1

0

Yo personalmente nunca he visto que el onSubmit pueda ser una función asíncrona. Si la cambias a una función normal (síncrona) funciona correctamente.

Te dejo el ejemplo.

function App() {
  const [active, setActive] = React.useState(false);

  const onSubmit = (e) => {
    console.log("Aqui detenemos la ejecucion del submit para que el navegador no lo envie");
    e.preventDefault();
    //axios(...) //aqui puedes hacer el llamado a axios que quieras con los parametros que desees
    console.log("LLamado axios ejecutado");
  };

  return (
    <div>
       <form onSubmit={onSubmit}>
                            <label>Nombre</label>
                            <input
                                type="text"
                                name='frm_nombre'
                                placeholder='Tu Nombre'
                                defaultValue="mi nombre"/>
                            <label>Celular</label>
                            <input
                                type="number"
                                name='frm_cel'
                                placeholder="Tu Celular"
                                defaultValue="3001234567"/>
                            <label>Correo</label>
                            <input
                                type="email"
                                name='frm_email'
                                placeholder="Tu Correo"
                                defaultValue="correo@gmail.com"/>
                            <label>Consulta</label>
                            <textarea
                                type='text'
                                name='frm_consulta'
                                height='300px'
                                defaultValue="hola"/>
                            <div className='container-button-contacto'>
                                <input type='submit' value='Enviar' id='button-contacto'/>
                            </div>
                        </form>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

1
  • ahi me funciono, muchas gracias. Ahora vere como hacer que se limpien los campos, ya que al usar e.preventDefault() no refresca la pagina por ende no se borra. Muchas gracias el 4 nov. 2022 a las 19:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.