Question

193

How can I get a value from a React-Bootstrap form on submit?

rated 0 times [ 194] [ 1] / answers: 1 / hits: 21454 / 4 Years ago, thu, july 30, 2020, 12:00:00

I am trying to get the value of a form input using React-Bootstrap. What is the standard procedure to get the form value from a react bootstrap form on a functional component in react?

export default function SpouseForm() {

  const dispatch = useContext(DispatchContext);



  return (

    <Form>

      <Row>

        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>

          <InputGroup className="mb-3">

            <InputGroup.Prepend>

              <InputGroup.Text>Age</InputGroup.Text>

            </InputGroup.Prepend>

            <FormControl /> <--------- I want to get this value on submit /////////////////

      </InputGroup>

        </Col>

      </Row>

      <Row>

        <Col xs={12} md={12} lg={{ span: 6, offset: 3 }}>

          <Button

            onClick={(e) => {

              e.preventDefault()

              dispatch({ type: "SPOUSE_AGE", spouseAge: e.target.value }); < ----- tried to get it here, not working

              router.push('/children')

            }}

            style={{ width: '100%' }}

            type="submit"

            variant="outline-primary"

            size="lg" >Next</Button>{' '}

        </Col>

      </Row>

    </Form>

  )

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lincolnx

Add To Favorites

Follow

Total Points: 602

Total Questions: 90

Total Answers: 94

Location: Saint Lucia

Member since Wed, Feb 8, 2023

1 Year ago

answered 4 Years ago andrewb · Accepted Answer

It's either you have controlled input and keep track of its value real-time stored within your state:

const { useState } = React,

      { render } = ReactDOM,

      { Form , Button } = ReactBootstrap,

      rootNode = document.getElementById('root')



const App = () => {

  const [value, setValue] = useState(),

        onInput = ({target:{value}}) => setValue(value),

        onFormSubmit = e => {

          e.preventDefault()

          console.log(value)

          setValue()

        }

  

  return (

    <Form onSubmit={onFormSubmit}>

      <Form.Control 

        type=text 

        onChange={onInput} 

        value={value}

      />

      <Button type=submit>

        Submit

      </Button>

    </Form>

  )

}



render (

  <App />,

  rootNode

)

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css /><script src=https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js></script><script src=https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js></script><div id=root></div>

The other way around is to have uncontrolled inputs and access FormData upon submit:

const { useState } = React,

      { render } = ReactDOM,

      { Form , Button } = ReactBootstrap,

      rootNode = document.getElementById('root')



const App = () => {

  const onFormSubmit = e => {

          e.preventDefault()

          const formData = new FormData(e.target),

                formDataObj = Object.fromEntries(formData.entries())

          console.log(formDataObj)

        }

  

  return (

    <Form onSubmit={onFormSubmit}>

      <Form.Control type=text name=myInput />

      <Button type=submit>

        Submit

      </Button>

    </Form>

  )

}



render (

  <App />,

  rootNode

)

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css /><script src=https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js></script><script src=https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js></script><div id=root></div>