Sign in
Log inSign up

How to implement two submit button inside a single component

Mohammad shahaparan mojumder's photo
Mohammad shahaparan mojumder
·Apr 20, 2019

I have got a form . where i have to implement two submit button (add and submit) . Firstly, I submit the add button and I can get data. these data show in the UI , secondly I want to pass these data by using second submit button inside the database .

right now what I get from my from ? when I submit add button , I can show the data inside UI , but when I submit the same data inside database I get the new data from form . I want to submit existing data inside database .

how I can pass exisiting data inside database?


class StoreRequistion extends Component { constructor(props) { super(props); this.state = { section:'', lists:[] }; }

onSubmit = value => { value.preventDefault(); const existingdata = { section:this.state.section, lists:this.state.lists }; this.setState({ status:this.state.section, lists:this.state.lists.concat(existingdata) });

if(window.confirm("DO you ageree"))

{ this.props.storeAddRequistionActions(existingdata)

}
};

onChange = e => { this.setState({

  [e.target.name]: e.target.value
});

}; render() { return ( <div className="animated fadeIn"> <div className="store_regiuistion"> <Card>

        <CardBody>
          <div className="meal-requision-form">
            <form onSubmit={e => this.onSubmit(e)}>

              <Col xs="6" sm="6" md="6" lg="6" xl="6">
                <MDBInput
                    label="Section Name"
                    group
                    type="text"
                    name="section"
                    id="section"
                    validate
                    error="wrong"
                    success="right"
                    value={this.state.section}
                    onChange={this.onChange}
                  />                     
                </Col>


              <Row className="float-right">
              <button type="add" className="btn btn-primary foodBtn_Greeen" >
                  Add

                  <i class="fas fa-plus" />

                </button>

          <button type="submit" onClick={()=>(  
        this.props.storeSubmitRequistionActions(this.state.lists))} 
        class="btn btn-primary foodBtn"  >                
        Submit
                  <i class="fas fa-check" />
                </button>
              </Row>
            </form>
          </div>
        </CardBody>
    </Card>
    </div>
    <StoreTable lists={this.state.lists} icon={this.state.icon} toggle={this.state.toggle} collapse={this.state.collapse}/>
  </div>
);

} }

// export default Forms; const mapStateToProps = state => ({ storerequistion: state.storerequistion, });

export default connect( mapStateToProps, { storeAddRequistionActions,storeSubmitRequistionActions, loginUser } )(StoreRequistion);