0
604
Viewshow to submit data from a data form in axios
I am trying to send a form to an endpoint but I get an error forbidden 403, and I already tried with an api test and the endpoint works perfectly
const SendData = (event) => {
event.preventDefault();
let respuestasUSer = new FormData();
respuestasUSer.set('curso', state.curso)
respuestasUSer.set('nombre', state.nombre)
respuestasUSer.set('q1', state.Pregunta1)
respuestasUSer.set('q2', state.Pregunta2)
respuestasUSer.set('q3', state.Pregunta3)
respuestasUSer.set('q4', state.Pregunta4)
respuestasUSer.set('q5', state.Pregunta5)
respuestasUSer.set('q6', state.Pregunta6)
respuestasUSer.set('q7', state.Pregunta7)
respuestasUSer.set('q8', state.Pregunta8)
axios({
method: "post",
url: "https://covid.cit0.com/guardar/encuesta/",
data: respuestasUSer,
headers: { "Content-Type": "multipart/form-data" },
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});
}
In the api test I do it like this and it works for me, how could I pass this same content to axios?
·
Juan Pablo Isaza
2 answers
Answer question0
If you are using react as front end
first you set onchange event in input text field like
<form>
<input type="text" name="first_name" placeholder="first name" onChange={handlechange} />
Create
define that handlechange function like
function handlechange (e) {
const {name,value} = e.target
setstate({...state,[name]:value})
}
//before that want to define state like const [state, setstate] = useState({})
then define handleclick function like
function handleclick (e) {
e.preventDefault()
axios.post('/super_admin/newuser',state).then((res)=>{
console.log(res.data)
}).catch(err=>{
console.log(err.response.data)
})
}
here is the full code
import {useState, } from 'react'
import axios from 'axios'
export default function Newuser() {
const [state, setstate] = useState({})
function handlechange (e) {
const {name,value} = e.target
setstate({...state,[name]:value})
}
function handleclick (e) {
e.preventDefault()
axios.post('/your api',state).then((res)=>{
console.log(res.data)
}).catch(err=>{
console.log(err.response.data)
})
}
return (
<div>
<form>
<input type="text" name="first_name" placeholder="first name" onChange={handlechange} />
<button onClick={handleclick}>Create</button>
</form>
</div>
)
}
·
Juan Pablo Isaza
Report
0
for sending form data you can edit handleclick function to something like this
function handleclick (e) {
e.preventDefault()
const fd = new FormData()
fd.append('first_name',state.first_name)
axios.post('/your api',fd).then((res)=>{
console.log(res.data)
}).catch(err=>{
console.log(err.response.data)
})
}
·
Juan Pablo Isaza
Report
Answer question