Post data to mongoDB Onclick Submit Button

Dhawan Solanki 0
Viewed 19

I have made a newsletter form in react.(Image 1)

Image1

I have to submit the data after clicking on submit. Here whatever i type is sent to mongodb. (For Eg : whatever i write in input box letter b letter another entry is made in mongodb.)

Pls Check the code below: FRONTED FORM PART

<form action=''>
    <Input
    name='email'
    placeholder='Email'
    type='text'
    value={this.state.email}
    onChange={(e)=> this.onChangeFormInput(e)}
    />
  </form>
      <Link href={process.env.NEXT_PUBLIC_SUBSTACK_URL} isExternal>
        <Button
          rightIcon={<ChevronRightIcon />}
          bg={'brand.300'}
          color={'black'}
          _hover={{ bg: 'brand.300', opacity: 0.8 }}
          _active={{ bg: 'brand.300', opacity: 0.8 }}
          onClick={this.validateNewsletterForm}
        >
          Subscribe Now
        </Button>

FUNCTIONS

    import axios from 'axios';
class Newsletter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      email:"",
    }
    this.validateNewsletterForm= this.validateNewsletterForm.bind(this);
    this.onChangeFormInput= this.onChangeFormInput.bind(this);
  }

  validateNewsletterForm(){
    console.log("Button is clicked");
    
  }
  onChangeFormInput(event){
    console.log("Value is changing...",event);
    const email = event.target.name;
    const value = event.target.value;
    console.log(email);
    console.log("The input : ",value);
    this.setState({email:value})
    
    var NewsletterFormData = {
      email : value
    }
    console.log("Newslater Form Data ------------ ",NewsletterFormData.email);
    // console.log(value);
    axios.post('http://localhost:3001/api/subscriptions',{
      email:NewsletterFormData.email
    })
    .then(function(response){
      console.log(response);
    })
    .catch(function(error){
      console.log(error)
    });
  }

EDIT : Eg: Adding A Data in field name as show in image 2 Image 2

Image 3 is the console log while inputing the data in feield. Everytime it creates a new Data. Image 3

reactjs mongodb typescript javascript
1 Answers

You should submit the data to the server only when the button is clicked, not in the onChange function:

validateNewsletterForm(event){
    event.preventDefault();
    
    axios.post('http://localhost:3001/api/subscriptions',{
      email: this.state.email
    })
    .then(function(response){
      console.log(response);
    })
    .catch(function(error){
      console.log(error)
    });
  }

  onChangeFormInput(event) {
    this.setState({ [event.target.name]: event.target.value] })
  }

<form onSubmit={this.validateNewsletterForm}>
  <Input
    name='email'
    placeholder='Email'
    type='text'
    value={this.state.email}
    onChange={(e) => this.onChangeFormInput(e)}
  />
  <Button
    type='submit'
    rightIcon={<ChevronRightIcon />}
    bg={'brand.300'}
    color={'black'}
    _hover={{ bg: 'brand.300', opacity: 0.8 }}
    _active={{ bg: 'brand.300', opacity: 0.8 }}
  >
    Subscribe Now
  </Button>
</form>;
```
lpizzinidev0
Related