I am getting an error in my html code and i am not able to figure out what it is (The error is Unexp-CodePudding

I was making a mini project out of html and jquery (btw i am still a student so my knowledge in programming is not so much). while i was programming i got an error saying unexpected end of input i thought it was a syntax error so i checked my code but when i checked it there was no error i was hoping you guys can help me fix this. I have put my code below (jquery an html respectively) Thank you!

var data = "";
const arr = [];
$(document).ready(function() {
    $("button").click(function(){
        var subjects = [];
        $.each($("input[name='subject']:checked"), function(){            
        subjects.push($(this).val());
        
        var skills = [];
        $.each($("input[name='skill']:checked"), function(){            
        skills.push($(this).val());
   });
        //alert("My chosen subjects are: "   subjects.join(", "));
        //alert("My chosen skills are: "   skills.join(", "));
        var email = $("#email").val();
        var password = $("#password").val();
        var dob = $("#dob").val();
        var gender = $("#gender").val();
        var address = $("#address").val();
        var city = $("#city").val();
        //var subjects = [];
        console.log("This is the email:", email);
        console.log("This is the password:", password);
        console.log("This is the date of birth:", dob);
        console.log("This is the gender:",  gender);
        console.log("This is the address:",  address);
        console.log("This/These is/are the subject/s:",  subjects)
        console.log("This/There is/are the subject/s:", skills)
        data = "Email: "   email   ", "   "Password: "   password   ", "   "Date Of Birth: "   dob   ", "   "Gender: "   gender   ", "   "Address: "   address   ", "   "City: "   city   ", "   "Subjects: "   subjects.join(", ")   ", "   "Skills: "   skills.join(", ");
        arr.push(data);
        console.log(arr);
    });
});

 <form>
    <label>Email:</label><br>
      <input id="email" type="email" required><br>
      <label>Date Of Birth:</label><br>
      <input id="dob" type="date" required><br>
      <label>Gender:</label><br>
      <select id="gender" required>
        <option>Male</option>
        <option>Female</option>
        <option>other</option>
      </select><br>
      <label>Address:</label><br/>
      <input id="address" type="text" required><br/>
      <label>City:</label><br>
      <input id="city" type="text" required><br> 
    <label>Subject/s</label><br>
    <label><input type="checkbox" value="Math" name="subject"> Math</label>
    <label><input type="checkbox" value="Science" name="subject"> Science</label>
    <label><input type="checkbox" value="SST" name="subject"> SST</label>
    <label><input type="checkbox" value="English" name="subject"> English</label>
    <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>        
    <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
    <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
    <label>Skill/s</label><BR>
    <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
    <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
    <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
    <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
    <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>        
    <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
    <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
    <label>Password:</label><br>
    <input type="password" id="password"><br><br>
    <button type="button" value="submit">Submit</button>  
</form>

CodePudding user response：

You're missing }); at the end. Use an IDE such as Visual Studio Code to help you spot syntax issues.

var data = "";
const arr = [];
$(document).ready(function() {
  $("button").click(function() {
    var subjects = [];
    $.each($("input[name='subject']:checked"), function() {
      subjects.push($(this).val());

      var skills = [];
      $.each($("input[name='skill']:checked"), function() {
        skills.push($(this).val());
      });
      //alert("My chosen subjects are: "   subjects.join(", "));
      //alert("My chosen skills are: "   skills.join(", "));
      var email = $("#email").val();
      var password = $("#password").val();
      var dob = $("#dob").val();
      var gender = $("#gender").val();
      var address = $("#address").val();
      var city = $("#city").val();
      //var subjects = [];
      console.log("This is the email:", email);
      console.log("This is the password:", password);
      console.log("This is the date of birth:", dob);
      console.log("This is the gender:", gender);
      console.log("This is the address:", address);
      console.log("This/These is/are the subject/s:", subjects)
      console.log("This/There is/are the subject/s:", skills)
      data = "Email: "   email   ", "   "Password: "   password   ", "   "Date Of Birth: "   dob   ", "   "Gender: "   gender   ", "   "Address: "   address   ", "   "City: "   city   ", "   "Subjects: "   subjects.join(", ")   ", "   "Skills: "   skills.join(", ");
      arr.push(data);
      console.log(arr);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>Email:</label><br>
  <input id="email" type="email" required><br>
  <label>Date Of Birth:</label><br>
  <input id="dob" type="date" required><br>
  <label>Gender:</label><br>
  <select id="gender" required>
    <option>Male</option>
    <option>Female</option>
    <option>other</option>
  </select><br>
  <label>Address:</label><br/>
  <input id="address" type="text" required><br/>
  <label>City:</label><br>
  <input id="city" type="text" required><br>
  <label>Subject/s</label><br>
  <label><input type="checkbox" value="Math" name="subject"> Math</label>
  <label><input type="checkbox" value="Science" name="subject"> Science</label>
  <label><input type="checkbox" value="SST" name="subject"> SST</label>
  <label><input type="checkbox" value="English" name="subject"> English</label>
  <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
  <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
  <label>Skill/s</label>
  <BR>
  <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
  <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
  <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
  <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
  <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
  <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
  <label>Password:</label><br>
  <input type="password" id="password"><br><br>
  <button type="button" value="submit">Submit</button>
</form>

CodePudding user response：

Your javascript function had braces in the wrong places and missing closing braces too. Some of the functions within the main click were not closed correctly and the variables declared within them had function scope so their values were not available to the end where you wish to combine all these values.

var data = "";
let arr = [];


$(document).ready(function() {
  var skills = [];
  var subjects = [];

  $("button").click(function() {
    $.each($("input[name='subject']:checked"), function() {
      subjects.push($(this).val());

    });


    $.each($("input[name='skill']:checked"), function() {
      skills.push($(this).val());
    });


    var email = $("#email").val();
    var password = $("#password").val();
    var dob = $("#dob").val();
    var gender = $("#gender").val();
    var address = $("#address").val();
    var city = $("#city").val();

    data = "Email: "   email   ", "   "Password: "   password   ", "   "Date Of Birth: "   dob   ", "   "Gender: "   gender   ", "   "Address: "   address   ", "   "City: "   city   ", "   "Subjects: "   subjects.join(", ")   ", "   "Skills: "   skills.join(", ");
    arr.push(data);
    console.log(data)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label>Email:</label><br>
  <input id="email" type="email" required><br>
  <label>Date Of Birth:</label><br>
  <input id="dob" type="date" required><br>
  <label>Gender:</label><br>
  <select id="gender" required>
    <option>Male</option>
    <option>Female</option>
    <option>other</option>
  </select><br>
  <label>Address:</label><br/>
  <input id="address" type="text" required><br/>
  <label>City:</label><br>
  <input id="city" type="text" required><br>
  <label>Subject/s</label><br>
  <label><input type="checkbox" value="Math" name="subject"> Math</label>
  <label><input type="checkbox" value="Science" name="subject"> Science</label>
  <label><input type="checkbox" value="SST" name="subject"> SST</label>
  <label><input type="checkbox" value="English" name="subject"> English</label>
  <label><input type="checkbox" value="Computer Science" name="subject"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="subject"> Kannada</label><br>
  <label><input type="checkbox" value="Hindi" name="subject"> Hindi</label><br>
  <label>Skill/s</label>
  <BR>
  <label><input type="checkbox" value="Math" name="skill"> Drawing/Doodling</label>
  <label><input type="checkbox" value="Science" name="skill"> Instrument Playing</label>
  <label><input type="checkbox" value="SST" name="skill"> Dance and/or Music</label>
  <label><input type="checkbox" value="English" name="skill"> sports (any)</label>
  <label><input type="checkbox" value="Computer Science" name="skill"> Computer Science</label>
  <label><input type="checkbox" value="Kannada" name="skill"> Kannada</label>
  <label><input type="checkbox" value="Hindi" name="skill"> Hindi</label><br>
  <label>Password:</label><br>
  <input type="password" id="password"><br><br>
  <button type="button" value="submit">Submit</button>
</form>