I am currently developing a JavaScript form where users are asked to select their gender (radio button) and occupation (dropdown). Gender:
<p> Pick Your Gender:</p>
Male <input type="radio" id="gender_male" name="gender" value="male"/>
Female <input type="radio" id="gender_female" name="gender" value="female"/>
Occupation:
<label id= "occupation"> Choose Your Occupation: </label>
<select>
<option value="productiontrans">Production, Transportation, Material Moving</option>
<option value="protective">Protective Service</option>
<option value="sales">Sales</option>
<option value="services">Services</option>
<option value="transport">Transportation</option>
</select>
In addition, I have a dataset in JSON format that displays occupations categorized by gender and median earnings:
For instance,
var jobs=
{
"Sheet1": [
{
"Occupation": "Transportation ",
"male median earnings": 24,751,
"female median earnings": 31,981,
"difference in pay": -7,230
},
{
"Occupation": "Services",
"male median earnings": 24,949,
"female median earnings": 18,228,
"difference in pay": 6,721
},
{
"Occupation": "Sales",
"male median earnings": 81,681,
"female median earnings": 46,801,
"difference in pay": 34,880
},
Whenever the submit button is clicked, the user should be presented with this information:
Replace
As a man you earn $------------ annually working as a (name of the occupation) and make $ ------ more than a woman in the same profession.
with
As a (selected gender - either male or female) you earn $------ annually working as a (selected occupation) and make $------- more or less (depending on the difference) than a (non-selected gender) in the same profession?
once the submit button has been pressed?