How to use check box in forms and control the input fields

user_12638510 0
Viewed 43

I am having a form and I am getting data from solutestate and the output is sent to the first input box using value={solutestate} but I want to toggle the output using the checkbox in the input box

Goal: when I check the check box the solutestate value should be in the first input box and if unchecked the output of the solutestate should be in second input box.

const [state, setState] = useState(false);
const [solutestate, setSoluteState] = useState();
  <input
      className="mr-2 leading-tight"
      type="checkbox"
      onChange={setState}
  />
  <form
      noValidate
      onSubmit={handleSubmit(onSubmit)}
      className="space-x-4"
  >
      <input
         className="shadow"
         {...register("solute")}
         placeholder="SOLUTE"
         onChange={(e) => setSoluteState(e.target.value)}
         value={solutestate}
      />
      <input
         className="shadow"
         {...register("solvent")}
         placeholder="SOLVENT"
      />
  </form>

enter image description here enter image description here

react-forms reactjs forms javascript
2 Answers

Try below example. initially since checkbox is unchecked value will be in second input.

const [solutestate, setSoluteState] = useState("");
const [input1, setInput1] = useState("");
const [input2, setInput2] = useState("");
const [syncToFirst, setSyncToFirst] = useState();
<input
  className="mr-2 leading-tight"
  type="checkbox"
  onChange={(event)=>{syncToFirst(event.target.checked?1:2)}}
/>
<form
  noValidate
  onSubmit={handleSubmit(onSubmit)}
  className="space-x-4"
>
  <input
     className="shadow"
     {...register("solute")}
     placeholder="SOLUTE"
     onChange={(e) => syncToFirst === 1 ? setSoluteState(e.target.value) : setInput1(e.target.value)}
     value={syncToFirst === 1 ? solutestate : input1}
  />
  <input
     className="shadow"
     {...register("solvent")}
     placeholder="SOLVENT"
     onChange={(e) => syncToFirst === 2 ? setSoluteState(e.target.value) :input2(e.target.value)}
     value={syncToFirst === 2 ? solutestate : input2}
  />
user_173567470 
Try the code below. This should work

    const [solutestate, setSoluteState] = useState("");
    const [input2, setInput2] = useState("");
    <input
      className="mr-2 leading-tight"
      type="checkbox"
      onChange={(event)=>{event.target.checked && setInput2(solutestate)}}
    />
    <form
      noValidate
      onSubmit={handleSubmit(onSubmit)}
      className="space-x-4"
    >
      <input
         className="shadow"
         {...register("solute")}
         placeholder="SOLUTE"
         onChange={(e) => setSoluteState(e.target.value)}
         value={solutestate}
      />
      <input
         className="shadow"
         {...register("solvent")}
         placeholder="SOLVENT"
         onChange={(e) => input2(e.target.value)}
         value={input2}
      />
user_158208410
Related