question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to setValue on hidden type inputs

See original GitHub issue

Hi,

Describe the bug I use react-hook-form 3.23.0. I am not to be able to use setValue on type=“hidden” input fields, while setValue works OK on default input fields.

To Reproduce I have this simple component using semantic-ui-react.

import React from "react";
import useForm from "react-hook-form";
import {Form,Button,Radio} from "semantic-ui-react";

const MyForm: React.FC = props => {
  const { register, handleSubmit, setValue } = useForm();

  const onSubmit = (formData) => console.log(formData);

  let data = {
    start: true
  };

  return (
    <>
      <Form onSubmit={handleSubmit(onSubmit)}>
         <Form.Field>
          <label>Start?</label>
          <input
            type="hidden"
            name="start"
            defaultValue={data.start.toString()}
            ref={register({required: true})}
          />

          <Radio toggle name="start_toggle" defaultChecked={data.start}
                    onChange={(e, radio) => {
                        setValue("start", radio.checked)
                      }
                    } />
        </Form.Field>
        <Button primary type="submit">
          Submit
        </Button>
      </Form>
    </>
  );
};

export default MyForm;

Expected behavior I want to use Semantic UI’s Radio component visualized as a toggle. I would like to store the value of the toggle in a backing field (name=“start”). When I have a type=“hidden” as the backing field the value always remains “true” (clicking submit logs the form value and start is always “true” there). However if I remove type=“hidden” and have a default text field then everything works fine and the value of “start” matches the state of the toggle.

Is there anything special in the handling of hidden inputs? Or what am I doing wrong?

Thanks!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:19 (11 by maintainers)

github_iconTop GitHub Comments

4reactions
pedrosimaocommented, Feb 26, 2020

I am facing the same issue. Hidden fields don’t seem to work correctly… I did manage to get it working by setting CSS display: none instead of using type="hidden"

2reactions
mattboldtcommented, Sep 15, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't set value on hidden input element - Stack Overflow
When I set the element to text type it works just fine... The problem persists both in FF and IE. Any ideas? Code:...
Read more >
cannot set value of hidden input field WTF?! : r/learnjavascript
I have a hidden inputfield of which I want to set the value via javascript. <html> <body> <form> <input id="somehiddeninputfield" ...
Read more >
setValue - WebdriverIO
setValue. Send a sequence of key strokes to an element after the input has ... to copy and paste a value from one...
Read more >
Can you set value to a hidden text field? - Katalon Community
Hi, This is my 1st day trying Katalon and so far im liking it. Got stuck to a concept on how to set...
Read more >
jQuery set input hidden field value with demo - Codepedia.info
How to set hidden field value in jQuery, Using .val() method we can set value. Example on button click assign textbox box to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found