How to make radio button auto check in edit page using MongoDB?

Question

I have 2 pages, first one is adding page and the second one is edit page. In the add page I have a radio button for gender and I store the information in MongoDB. In the edit page I tried to make the radio button automatically selected but it didn't work. Here is my edit page code:

const gender = document.querySelector('input[name = gender]:checked').value;

e.preventDefault();

Meteor.call(
  'employee.update',
  this.props.match.params.id,
  gender
);
return alert("Employee Information Has Been Updated!");
}



renderEmployeeEdit() {
  return this.state.employees.map(employee => {
    return (
      <div key={employee._id}>
        <form onSubmit={this.onSubmit.bind(this)}>
          <input type="radio" name="gender" value="Male"/>Male <br/>
          <input type="radio" name="gender" value="Female"/>Female
        </form>
      </div>
    );
  });
}

Use defaultChecked property which is avialable for radio button and also for checkboxes instead of checked. Here is the eg. https://stackoverflow.com/a/47027003/5995973 — Saniya syed qureshi, Aug 14 '19 at 07:43

score 0 · Answer 1 · answered Aug 14 '19 at 07:56

0

Use the defaultChecked property, available for <input type="radio">

answered Aug 14 '19 at 07:56

Harsh Mishra

1,975
12
15

i did but still the same. if i add as female when enter the edit page while im using the defaultChecked it didn't select female as default – bo3skor Aug 14 '19 at 08:19

score 0 · Answer 2 · answered Aug 14 '19 at 08:16

you can use formcontrolname and can define it in form in component ts file and you should remove checkedc from radio button when form object is filled with value of selected record while editing it will be shown as checked whichever is true

<div class="form-group row">
      <label class="col-md-4 col-form-label">Is Taxable</label>
      <div class="col-md-8">
        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" class="custom-control-input" id="isTaxableYes" formControlName="isTaxable" [value]="true">
          <label class="custom-control-label" for="isTaxableYes">Yes</label>
        </div>

        <!-- Default checked -->
        <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" class="custom-control-input" id="isTaxableNo" formControlName="isTaxable" [value]="false">
          <label class="custom-control-label" for="isTaxableNo">No</label>
        </div>
      </div>
    </div>

How to make radio button auto check in edit page using MongoDB?

2 Answers2