ReactJS: Using value from form - radio button

Question

I have a form with some variables:

  const [formModel, setFormModel] = useState({
    realm: '',
    deletedDate: 'all',
  });

the deletedDate is a radio button that should have as value -> "all", "true", "false"

the form is:

<AvForm model={formModel} onSubmit={filterResults} onReset={handleFormReset}>
 <AvGroup>
                    <Label id="realm" for="realm-realm">
                      Realm Name
                    </Label>
                    <AvField
                      id="realm"
                      data-cy="realm"
                      type="text"
                      name="realm"
                      onChange={handleChange}
                      value={formModel.realm}
                    />
                  </AvGroup>
<FormGroup check>
                      <Label id="deletedDate" check>
                        <Input
                          id="deletedDate"
                          data-cy="deletedDate"
                          type="radio"
                          name="deletedDate"
                          value="all"
                          checked={formModel.deletedDate === 'all'}
                          onChange={handleChange}
                        />{' '}
                        All
                      </Label>
                      <br></br>
                      <Label id="deletedDate" check>
                        <Input
                          id="deletedDate"
                          data-cy="deletedDate"
                          type="radio"
                          name="deletedDate"
                          value="true"
                          checked={formModel.deletedDate === 'true'}
                          onChange={handleChange}
                        />{' '}
                        Yes
                      </Label>
                    </FormGroup>
                    <FormGroup check>
                      <Label id="deletedDate" check>
                        <Input
                          id="deletedDate"
                          data-cy="deletedDate"
                          type="radio"
                          name="deletedDate"
                          value="false"
                          checked={formModel.deletedDate === 'false'}
                          onChange={handleChange}
                        />{' '}
                        No
                      </Label>
                    </FormGroup>

now when I submit the form I call the filterResults:

const handleChange = e => {
    console.log('e ', e);
    console.log('deletedDate ', formModel.deletedDate);
    const { name, value } = e.target;
    console.log('name ', name, ' value ', value);
    setFormModel(prevState => ({
      ...prevState,
      [name]: value,
    }));
    console.log('deletedDate ', formModel.deletedDate);
  };

  const filterResults = (event, errors, values) => {
    console.log('values ', values, 'event ', event, ' errors ', errors);
    let entity = null;
    if (errors.length === 0) {
      entity = {
        ...values,
      };
    }
    console.log('entity is ', entity);
    if (entity) {

Now My problem is:

In the filterResults I have inserted a console log to see the values.. when I submit the form I can read only the value about the realm and nothing about the deletedDate and I don't understand why. How can I do to use in the filterResult the deletedDate?? What is wrong with my form? thank you

Naim Mustafa · Accepted Answer · 2021-07-12 11:48:10Z

1

looks like you are using two different form which when you submit while using the props of the AV form you dont have access to other form values, i would recommend to store these values in the same form

 <AvForm model={formModel} onSubmit={filterResults} onReset={handleFormReset}>
 <AvGroup>
                    <Label id="realm" for="realm-realm">
                      Realm Name
                    </Label>
                    <AvField
                      id="realm"
                      data-cy="realm"
                      type="text"
                      name="realm"
                      onChange={handleChange}
                      value={formModel.realm}
                    />
                  </AvGroup>
<AvGroup>
                    <Label id="realm" for="realm-realm">
                      Radio Input
                    </Label>
                    <AvField
                      id="deletedDate"
                      data-cy="deletedDate"
                      type="type value this for uses for radio inputs"
                      name="deletedDate"
                      onChange={handleChange}
                      value={formModel.deletedDate}
                    />
                  </AvGroup>

, but if you want to make this work, I would suggest get your values from the state, here you are storing your values in the state but not doing anything with them

answered Jul 12, 2021 at 11:48

Naim Mustafa

3443 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack23 Over a year ago

Thank you for your answer, in the type I should insert "radio" to have a radio button? and the value of the radio button where should goes?

Naim Mustafa Over a year ago

im not sure for this form library, you should check the documentation and look for the usage of the radio button, but important thing is the keep all the fileds inside <AvForm /> tag so you would have access, EDIT: found the docs and examples here availity.github.io/availity-reactstrap-validation/components/…

Collectives™ on Stack Overflow

ReactJS: Using value from form - radio button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related