Question 246621 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – REACT: How to enable a disabled button by choosing specific options in a separate select element?

I am new to React and trying to implement a function in a form but I just can’t get it to work. The form uses react-hook-form, axios and Bootstrap 5.2.3. I tried but couldn’t make useState work, what I need is to have the Declarant’s button (bootstrap tab) default disabled until I choose, inside the Baby’s form, one of the correct options to unlock it ie. not father nor mother (values 10 and 1 respectively) as those two already have their own forms. How do I do it?

Here’s the code in a very summarized way:

<h2 className="bg-primary text-light rounded-top  mb-0 pb-0 pessoaheader container">Registration Form</h2>
    <form className="form-inline container border border-dark rounded-bottom formelement" onSubmit={handleSubmit(handleSubmitForm)}>
    <br />
        <nav className="nav nav-tabs">
            <button className="nav-link active" data-bs-target="#abafilho" data-bs-toggle="tab" type="button"> Child's Data</button>
            <button className="nav-link" data-bs-target="#abamae" data-bs-toggle="tab" type="button"> Mother's data</button>
            <button className="nav-link" data-bs-target="#abapai" data-bs-toggle="tab" type="button"> Father's Data</button>
            <button className="nav-link " data-bs-target="#abadeclarante" data-bs-toggle="tab" type="button"> Declarant's data</button>
        </nav>
        <div className="tab-content">
            <div className="tab-pane active show fade" id="abafilho">
                <div className="form-filho">
                    <div className="row pt-3">
                        <div className="col-lg-2 col-md-3 mb-2">
                            <label className="formlabels" htmlFor="Declaranttype">Declarant</label>
                            <select className="form-select form-control selecttype" id="Declaranttype" {...register("Declaranttype")}>
                                <Declaranttype />
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="tab-pane show fade" id="abapai">
        </div>
        <div className="tab-pane show fade" id="abadeclarante">
        </div>
        <button className="btn btn-primary btn-lg fw-semibold formbutton display-4 m-1" type="submit">Submit</button>
    </form >

Bellow is what’s in the file for Declaranttype /:

<>  
      <option value="10">Father</option>
      <option value="1">Mother</option>
      <option value="3">Brother</option>
      <option value="4">Sister</option>
      <option value="5">Grandpa</option>
      <option value="6">Grandma</option>
      <option value="7">Other</option>
    </>

Page’s almost full code is also here and feedback is greatly appreciated codepen.io/caiourtiga/pen/BavwJev

Tags:

2

Answers


  1. 0

    To achieve the desired functionality of disabling the "Declarant’s data" button until a specific option is chosen in the "Declaranttype" dropdown, you can use React state and the useState hook. Here’s how you can modify your code to accomplish this:

    import React, { useState } from 'react';

    Initialize a state variable to track whether the button should be disabled or not. Initially, it should be disabled. Add this code right before your component

    const [isDeclarantButtonDisabled, setIsDeclarantButtonDisabled] = useState(true);

    Update your element to include an onChange event handler that will enable the "Declarant’s data" button when the correct option is selected. Also, add the disabled attribute to the button based on the isDeclarantButtonDisabled state. Modify your and button like this:

    <select
  className="form-select form-control selecttype"
  id="Declaranttype"
  {...register("Declaranttype")}
  onChange={(e) => {
    // Check if the selected value is neither 10 (Father) nor 1 (Mother)
    setIsDeclarantButtonDisabled(
      e.target.value === '10' || e.target.value === '1'
    );
  }}
>
  <Declaranttype />
</select>

    Finally, apply the disabled attribute to the "Declarant’s data" button based on the isDeclarantButtonDisabled state:

    <button
  className="btn btn-primary btn-lg fw-semibold formbutton display-4 m-1"
  type="submit"
  disabled={isDeclarantButtonDisabled}
>
  Submit
</button>

    With these changes, the "Declarant’s data" button will be disabled by default and will only be enabled when an option other than "Father" or "Mother" is selected from the dropdown.
    thats it.

    Login or Signup to reply.
  2. 0

    Use the watch method to keep track of the selected value

    const { register, watch } = useForm();

const watchDeclarantType = watch("Declaranttype");
const buttonDisabled =
  !watchDeclarantType || ["1", "10"].includes(watchDeclarantType);

    then on your button, use this

    <button
  className="nav-link"
  data-bs-target="#abadeclarante"
  data-bs-toggle="tab"
  type="button"
  disabled={buttonDisabled}
>
  Declarant's data
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search