Getting value of a checked box , react

1

Hello everyone, I am having an issue and I’m not sure why it’s returning undefined.
So the code is like this.

<input type="checkbox" className="checkbox" value="Coaching" />1 : 1 Coaching

And onsubmit of the form I would like to get the value of what boxes were checked.

render() {
    const { status } = this.state;
    function itworked() {
  alert("Sky will contact you shortly!")
  var checkedValue = document.getElementsByClassName('.checkbox').value
  console.log(checkedValue)

}

But for some reason this method is giving me undefined when it is submitted.
Can anyone catch where I went wrong?
Thank you.

2

Hello there,

Using getElementsByClassName, you do not need to provide the selector (.), as you can only search by class.

Hope this helps

1 Like
3

Wow, that was a pretty dumb mistake I made, but it is still returning undefined when the form is submitted.
Does anyone see any other mistakes?

4

Sure,

It might be helpful to see more of your code, as this is not valid JSX:

<input type="checkbox" className="checkbox" value="Coaching" />1 : 1 Coaching
5

Sure, here is the full code.


The contact page (where this issue is) is under components => Contact

6

Remember, you are looking for multiple elements with the className "checkbox"…so, even if one is found, you will get an array…

Hope this helps

Just something to add: Take advantage of React, and combine all of your checkboxes into one component:

<div className="radio ">
  <label>
    <input type="checkbox" className="checkbox" value="Coaching" />1 : 1 Coaching
  </label>
</div>
1 Like
7

An array would be fine, so long as it is an array of the values of the boxes.
If you know of another method to get these values, in any form. I would be very appreciative.
Thats a good idea with making them into a component.

8

I am hinting at the fact that you are trying to get the value of an array…this does not work.

1 Like
9

You’re right, that is probably the issue.
Thanks for your help. I am going to work at this and figure out the solution.