React post data via form not working

Support
1

Hi all, does anyone know why my from request isn’t working?

I followed the docs but I am unsure why nothings happens, just says there is no entries every-time. I don’t even get a console log.

Ive created a new form on the cockpit panel and i’m obviously using state to track the value of the inputs.

I’ve also tried adding the function on form submit and as a click on the button

const sendData = () => {

        fetch(`http://example.com/api/forms/submit/sampleForm?token=${process.env.REACT_APP_API}`, {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          form: {
              name: `${getName}`,
              email: `${getEmail}`
          }
      })
    })
    .then(entry => entry.json())
    .then(entry => console.log(entry))

  }


  return (
    <div className="App">
        <form onSubmit={sendData}>
          <input onChange={updateName} type="text" name="" placeholder="name" id=""/>
          <input onChange={updateEmail} type="email" name="" placeholder="email" id=""/>
          <button onClick={sendData} type="submit">Submit</button>
        </form>
    </div>
  );

TIA
Obviously i don’t do back end a lot :wink:

2

Could you show the full source codes?
I don’t think it’s a Cockpit error.
Probably you’re missing something in your React app.

3

yeah sure all in app.js,

import React,{useState,useEffect} from 'react';
import axios from 'axios';

const App = () => {

  const [getName,setGetName] = useState('');
  const [getEmail,setGetEmail] = useState('');

  useEffect(()=>{
    axios.get(`http://example.com/api/collections/get/users?token=${process.env.REACT_APP_API}`)
    .then((res)=>console.log(res.data.entries))
    .catch((err)=>console.log('sorry'))
  },[])


  const updateName = e => {
    let t = e.currentTarget.value;
    setGetName(t);
  }


  const updateEmail = e => {
    let t = e.currentTarget.value;
    setGetEmail(t);
  }


  const sendData = () => {

        fetch(`http://example.com/api/forms/submit/sampleFrom?token=${process.env.REACT_APP_API}`, {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          form: {
              name: `${getName}`,
              email: `${getEmail}`
          }
      })
    })
    .then(entry => entry.json())
    .then(entry => console.log(entry))

  }


  return (
    <div>
        <form onSubmit={sendData}>
          <input onChange={updateName} type="text" name="" placeholder="name" id=""/>
          <input onChange={updateEmail} type="email" name="" placeholder="email" id=""/>
          <input type="submit" value="submit" />
        </form>
    </div>
  );
}

export default App;
4

Ok,
It seems the problem is you didn’t add e.preventDefault() and it refresh the page on submit. I’ve added it and tested on codesandbox, it’s working fine.

Also, make sure to set the correct form url in token box as below screencap.

token
token1616×1044 30 KB

Check this working example here. ( Will remove this later )

1 Like
5

Ahh, well spotted thanks a bunch!