Gender radio input and fields of interest checkbox undefined in alerts

Can anyone help me why the gender and fields of interest output are undefined? I can't seem to get it no matter how I get the value and its getting out of hand

HTML:

<form id="theForm" onsubmit="theSubmit()">
    <div id="theGender">
        <label for="theGender">Gender:</label>
        <input type="radio" name="gender" value="Male"><a>Male</a>
        <input type="radio" name="gender" value="Female"><a>Female</a>
        <input type="radio" name="gender" value="Others"><a>Others</a>
        <input type="radio" name="gender" value="Prefer not to say"><a>Prefer not to say</a>
    </div>
    <div id="fieldsOfInterest">
        <label for="fieldsOfInterest">Fields Of Interest:</label>
        <input type="checkbox" name="fieldsOfInterest" id="architectureEngineering" value="Architecture/Engineering">
        <label for="fieldsOfInterest">Architecture/Engineering</label>
        <input type="checkbox" name="fieldsOfInterest" id="computerScience" value="Computer Science">
        <label for="fieldsOfInterest">Computer Science</label>
        <label for="fieldsOfInterest">Environmental Sustainability</label>
        <input type="checkbox" name="fieldsOfInterest" id="interestOther" value="Other">
        <label for="fieldsOfInterest">Others</label>
    </div>
    <input type="submit" value="Submit" onclick="theSubmit()" name="submit">
    <input type="reset" value="Reset" name="reset">
</form>

Script:

    function theSubmit() {
        if(theMale.checked){
            theGender = "Male"
        }else if(theFemale.checked){
            theGender = "Female"
        }else if(theOther.checked){
            theGender = "Other"
        }else if(thePreferNotToSay.checked){
            theGender = "Prefer Not To Say"
        }
        if(architectureEngineering.checked){
            fieldsOfInterest += "Architecture/Engineering"
        }else if(computerScience.checked){
            fieldsOfInterest += "Computer Science"
        }else if(interestOther.checked){
            fieldsOfInterest += "Others"
        }
        alert("This is the information that is filled out:\nName: "+firstName.value+" "+middleName.value+" "+lastName.value+"\nBirthday: "+birthDay.value+"\nGender: "+theGender.value+"\nCivil Status: "+civilStatus.value+"\nComplete Address: "+completeAddress.value+"\nContact Number: "+contactNumber.value+contactNumberInput.value+"\nFields Of Interest: "+fieldsOfInterest.value);
    }