How to get value from radio button and input box using ReactJS?

Question

I have made form which has 1 question. There are 4 radio button options and 1 input box for other radio button. How can I get value from the input box if the other radio button is checked.

class ContactForm extends Component {

  setGender(event){
    console.log(event.target.value);
  }

render(){

<form>
<div id="gender" onChange={this.setGender.bind(this)}>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your gender?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender"/> Female</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender"/> Male</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender"/> Prefer not to say</label>
                  </div>
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender"/>Other</label>
                    <input type="text" class="form-inline" id="other1"/>
                  </div>
                </div>
              </div>
            </div>
</form>
}

Screenshot:

@BoyWithSilverWings If I click on other then it should return the value inside input (only if other is clicked). — stone rock
– stone rock, Commented Feb 25, 2018 at 13:32
@BoyWithSilverWings How can I get value from input box if other is selected also how to get value from radio buttons too? — stone rock
– stone rock, Commented Feb 25, 2018 at 13:35

G_S · Accepted Answer · 2018-02-25 14:18:41Z

1

You can make some changes to your component.

Created a fiddle for it

Added the below methods to make it work.

setGender(checkedValue){
    console.log(checkedValue);
    if(checkedValue == '-1'){
     // get data from text box
    }
  }

edited Feb 25, 2018 at 14:18

answered Feb 25, 2018 at 13:40

G_S

7,1302 gold badges27 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

G_S Over a year ago

Check if this suits your answer. we can change it if needed.

stone rock Over a year ago

Your answer works like a charm just edit checkedValue == '-1' to checkedValue === '-1'.

G_S Over a year ago

Yea, missed that. better to add ===

G_S Over a year ago

to identify the last radio button, I am passing -1 as my identifier. for other radio buttons I am passing someother value. Upon selecting a radio button, the checkedValue is -1, then I am treating 'other' is selected and then I will get data from textbox

G_S Over a year ago

check the updated fiddle. However when getting data to be submitted to database, you can read textbox value from state (if using state) when clicking other radio button and then use it. Or use other radio buttons.

|

TRomesh · Accepted Answer · 2018-02-25 13:42:06Z

You can try something like this

import React, { Component } from "react";

class ContactForm extends Component {
  state = {
    gender: "",
    otherValue: ""
  };

  onChanged = event => {
    this.setState({ otherValue: event.target.value }, () => {
      console.log(this.state.otherValue);
    });
  };

  setGender = event => {
    this.setState({ gender: event.target.value }, () => {
      console.log(this.state.gender);
    });
  };

  onSubmit = () => {
    if (this.state.gender == "other") {
      let other = this.state.otherValue;
        /// do something
    }
  };

  render() {
    return (
      <form>
        <div id="gender" onChange={this.setGender}>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <h4>What is your gender?</h4>
            </div>
          </div>

          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <div className="radio">
                <label>
                  <input type="radio" name="gender" value="Female" /> Female
                </label>
              </div>
            </div>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <div className="radio">
                <label>
                  <input type="radio" name="gender" value="Male" /> Male
                </label>
              </div>
            </div>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <div className="radio">
                <label>
                  <input type="radio" name="gender" value="NoSay" /> Prefer not
                  to say
                </label>
              </div>
            </div>
          </div>

          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <div className="radio">
                <label>
                  <input type="radio" name="gender" value="other" />Other
                </label>
                <input
                  type="text"
                  class="form-inline"
                  id="other1"
                  onChange={this.onChanged}
                />
              </div>
            </div>
          </div>
        </div>
      </form>
    );
  }
}

export default ContactForm;

you can use the onSubmit method to take the value of the Other input

Collectives™ on Stack Overflow

How to get value from radio button and input box using ReactJS?

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related