0
179
ViewsHow to use check box in forms and control the input fields
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>
·
Juan Pablo Isaza
2 answers
Answer question0
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}
/>
·
Juan Pablo Isaza
Report
0
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}
/>
·
Juan Pablo Isaza
Report
Answer question