html form not grabbing correct variables from survey-CodePudding

I am building a survey form that gathers information from students, using HTML (open to using javascript too) and have found several examples online but none seem to be working. The survey form is currently just selecting these:

The survey should be selecting all options (first name, last name, living place, college choices, major, campus visit), and I don't know how to fix this.

This is the survey and the code:

 <h3> Senior Survey </h3>
    <div >

      <script type="text/javascript">
        console.log("Prospective student form is about to be displayed.");
      </script>

      <form method="post" action="mailto:[email protected]" method="GET" enctype="text/plain" name="seniorsurvey">
        <table  id="second-gradient">
          
          <tr>
            <td style="text-align: center";> 
            <p><b> Please enter your first and last names. </b></p>
            <input type="text" id="firstname" maxlength="60" placeholder="First Name:"/> 
            <input type="text" id="lastname" maxlength="60" placeholder="Last Name:"/>  
            </td>
          </tr>

          <tr>
            <td style="text-align: center";> 
              <p><b> Where do you live? </b></p>
              <input type="radio" id="peru" name="radiobutton" value="Peru">
              <label for="peru">Peru</label>

              <input type="radio" id="southamerica" name="radiobutton" value="SA">
              <label for="southamerica">South America</label>

              <input type="radio" id="unitedstates" name="radiobutton" value="USA">
              <label for="unitedstates">United States</label> 
            </td>
          </tr>

          <tr>
            <td>
              <fieldset style="text-align: center";>
                <p><b> What were your other top college choices? </b></p>
                <input type="checkbox" id="bentley" name="uni">
                <label for="bentley">Bentley U.</label>

                <input type="checkbox" id="brandeis" name="uni">
                <label for="brandeis">Brandeis U.</label>
                
                <input type="checkbox" id="boston" name="uni">
                <label for="boston">Boston U.</label>
                
                <input type="checkbox" id="babson" name="uni">
                <label for="babson">Babson U.</label>     
                
                <input type="checkbox" id="northeastern" name="uni">
                <label for="northeastern">Northeastern U.</label>               
              </fieldset>
            </td>
          </tr>

          <tr>
            <td style="text-align: center";> 
              <p><b> What is your prospective major? </b></p>
              <select name="majors" id="majors">
                <option value="un">undecided</option>
                <option value="cis">Computer Information Systems</option>
                <option value="fi">Finance</option>
                <option value="acc">Accounting</option>
                <option value="ci">Creative Industries</option>
                <option value="mkt">Marketing</option>
              </select>
              <br>
            </td>
          </tr>

          <tr>
            <td style="text-align: center";> 
              <p><b> When do you plan to visit campus? </b></p>
              <input type="date" id="start" name="visit-start" value="2021-10-25" min="2021-10-25" max="2030-12-31">
              <br><br>
            </td>
          </tr>

          <tr>
            <td style="text-align: center";> 
              <button type="submit" value="Submit College Info"> Submit </button>
              <button type="reset" value="Clear College Info"> Clear  </button>
              <br><br>
            </td>
          </tr>

        </table>
      </form>      

    </div>

CodePudding user response：

Some of your form fields, such as

<input type="text" id="firstname" maxlength="60" placeholder="First Name:"/>

do not have a name argument, which is the glue that makes the data get send to the server properly. you'll want to change that line to:

<input type="text" name="firstname" id="firstname" maxlength="60" placeholder="First Name:"/>

Basicly just adding name="firstname" in there. You'll have to do the same thing again, adding name="lastname" for the id="lastname"-input.

The 3 <input type="radio"-lines all use name="radiobutton" ; technically nothing wrong with that, however considering the context, you likely want to change all 3 of them to name="country" or something along those lines. These 3 should be identical (as people are only allowed to pick 1 of those 3 countries, not 2 or 3 of them, nor 0).

The 5 <input type="checkbox"-lines all use name="uni", that might be wrong (though i cant say for sure actually). people are allowed to pick&choose any combination of them. You might want to change these to 5 different names (like name="uni_bentley" on the first one, ...), or you may wanna keep them all the same. Perhaps try both and see which of the 2 results you prefer (select a few/all of the uni's when submitting).