I have made 4 radio buttons for 1 question. I have made 2 buttons submit and clear input. When I submit the form after clicking on clear input it does not clear the checked buttons to unchecked how can I do that using reset
function ?
contactform.js:
JavaScript
x
158
158
1
import React, { Component } from 'react';
2
3
class ContactForm extends Component {
4
constructor(props){
5
super(props);
6
this.state = {
7
age:'',
8
gender:'',
9
health:'',
10
name:'',
11
email:'',
12
info:'',
13
fitness:''
14
};
15
}
16
17
setAge(checkedValue){
18
console.log(checkedValue);
19
this.setState({
20
age:checkedValue
21
})
22
}
23
24
setGender(checkedValue){
25
console.log(checkedValue);
26
this.setState({
27
gender:checkedValue
28
})
29
}
30
31
onChangeTextBoxGender(event){
32
this.setState({gender: event.target.value})
33
}
34
35
savedata(age, gender, health, name, email, info, fitness){
36
let newcontent = contentref.push();
37
newcontent.set({
38
age:this.state.age,
39
gender:this.state.gender,
40
health:this.state.health,
41
name:this.state.name,
42
email:this.state.email,
43
info:this.state.info,
44
fitness:this.state.fitness
45
});
46
}
47
48
reset(){
49
this.setState({
50
age:'',
51
gender:''
52
})
53
}
54
55
render() {
56
57
return (
58
<div>
59
60
<div id="center">
61
<form>
62
63
<div className="form-group">
64
<div className="col-sm-offset-2 col-sm-10">
65
<h3>[Test]Contact us Survey Form</h3>
66
</div>
67
</div>
68
69
<div id="agegroup" >
70
<div className="form-group">
71
<div className="col-sm-offset-2 col-sm-10">
72
<h4>What is your age group?</h4>
73
</div>
74
</div>
75
76
<div className="form-group">
77
<div className="col-sm-offset-2 col-sm-10">
78
<div className="radio">
79
<label><input type="radio" name="age" onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs</label>
80
</div>
81
</div>
82
</div>
83
<div className="form-group">
84
<div className="col-sm-offset-2 col-sm-10">
85
<div className="radio">
86
<label><input type="radio" name="age" onChange={this.setAge.bind(this,'26-35 yrs')}/> 26-35 yrs</label>
87
</div>
88
</div>
89
</div>
90
<div className="form-group">
91
<div className="col-sm-offset-2 col-sm-10">
92
<div className="radio">
93
<label><input type="radio" name="age" onChange={this.setAge.bind(this,'36-50 yrs')}/> 36-50 yrs</label>
94
</div>
95
</div>
96
</div>
97
<div className="form-group">
98
<div className="col-sm-offset-2 col-sm-10">
99
<div className="radio">
100
<label><input type="radio" name="age" onChange={this.setAge.bind(this,'>50 yrs')}/> >50 yrs</label>
101
</div>
102
</div>
103
</div>
104
</div>
105
106
107
<div id="gender">
108
<div className="form-group">
109
<div className="col-sm-offset-2 col-sm-10">
110
<h4>What is your gender?</h4>
111
</div>
112
</div>
113
114
<div className="form-group">
115
<div className="col-sm-offset-2 col-sm-10">
116
<div className="radio">
117
<label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Female')}/> Female</label>
118
</div>
119
</div>
120
</div>
121
<div className="form-group">
122
<div className="col-sm-offset-2 col-sm-10">
123
<div className="radio">
124
<label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Male')}/> Male</label>
125
</div>
126
</div>
127
</div>
128
<div className="form-group">
129
<div className="col-sm-offset-2 col-sm-10">
130
<div className="radio">
131
<label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Prefer not to say')}/> Prefer not to say</label>
132
</div>
133
</div>
134
</div>
135
136
<div className="form-group">
137
<div className="col-sm-offset-2 col-sm-10">
138
<div className="radio">
139
<label><input type="radio" name="gender" onChange={this.setGender.bind(this,-1)}/>Other</label>
140
<input type="text" class="form-inline" id="other1" onChange={this.onChangeTextBoxGender.bind(this)}/>
141
</div>
142
</div>
143
</div>
144
</div>
145
146
<button type="button" class="btn btn-success" onClick={this.savedata.bind(this)}>Submit</button>
147
<button type="button" class="btn btn-danger">Clear input</button>
148
149
</form>
150
</div>
151
152
</div>
153
);
154
}
155
}
156
157
export default ContactForm;
158
See screenshots:
Advertisement
Answer
Give a checked attribute for you radio button. Change
JavaScript
1
9
1
<label>
2
<input
3
type="radio"
4
name="age"
5
onChange={this.setAge.bind(this,'>=25 yrs')} />
6
{' '}
7
>=25 yrs
8
</label>
9
to
JavaScript
1
9
1
<label>
2
<input
3
type="radio"
4
name="age"
5
checked={(this.state.age == '>=25 yrs')}
6
onChange={this.setAge.bind(this,'>=25 yrs')}/>
7
>=25 yrs
8
</label>
9