Uncaught TypeError: Cannot read property 'val' of null jquery

Question

I'm trying to pass form values, check them and then return the response with jquery, everything gets passed correctly, the image gets uploaded and the path gets added to the database, but instead of returning the message on the same page, it redirects to the addmember.php, doesn't even go through the checks - like the javascript file doesn't even exist and it has been bothering me for quite a while... I've tried searching but I didn't find anything relatable to me since the problem lies in the picture/image...

Uncaught TypeError: Cannot read property 'val' of null

addmember.js and the **form

$(document).ready(function() {

  $("#submit").click(function() {

    var membershipnumber = $("#membershipnumber").val();
    var membername = $("#membername").val();
    var membersurname = $("#membersurname").val();
    var memberdate = $("#memberdate").val();
    var memberphonenumber = $("#memberphonenumber").val();
    var memberemail = $("#memberemail").val();
    var memberpicture = document.getElementById("#memberpicture").val();

    if ((membershipnumber == "") || (membername == "") || (membersurname == "") || (memberdate == "") || (memberphonenumber == "")) {
      $("#message").html("<div class=\"alert alert-danger alert-dismissable fade in\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>Polja označena sa * ne smeju biti prazna.</div>");
    } else {
      $.ajax({
        type: "POST",
        url: "addmember.php",
        data: {
          "membershipnumber": membershipnumber,
          "membername": membername,
          "membersurname": membersurname,
          "memberdate": memberdate,
          "memberphonenumber": memberphonenumber,
          "memberemail": memberemail,
          "memberpicture": memberpicture
        },
        success: function(html) {
          var text = $(html).text();
          var response = text.substr(text.length - 4);

          $("#message").html(html);
        },
        error: function() {

        },
        beforeSend: function() {
          $("#message").html("<p class='text-center'><img src='images/ajax-loader.gif'></p>")
        }
      });
    }
    return false;
  });
});

<form name="createnewmember" id="createnewmember" method="post" action="addmember.php" class="form-horizontal" enctype="multipart/form-data">

  <div class="form-group">
    <!-- name and surname -->
    <label for="membername" class="col-xs-2 control-label">Ime i prezime:<font color="#d9534f">*</font></label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input name="membername" id="membername" type="text" class="form-control" placeholder="Ime" autofocus />
        <input name="membersurname" id="membersurname" type="text" class="form-control" placeholder="Prezime" />
      </div>
    </div>
  </div>
  <!-- /name and surname -->

  <div class="form-group">
    <!-- date of birth -->
    <label for="memberdate" class="col-xs-2 control-label">Datum rođenja:<font color="#d9534f">*</font></label>
    <div class="col-xs-3">
      <input name="memberdate" id="memberdate" type="date" class="form-control" value="1990-01-01" />
    </div>
  </div>
  <!-- /date of birth -->

  <div class="form-group">
    <!-- membership number (scanned with barcode scanner) -->
    <label for="membershipnumber" class="col-xs-2 control-label">Članski broj:<font color="#d9534f">*</font></label>
    <div class="col-xs-3">
      <input name="membershipnumber" id="membershipnumber" type="text" class="form-control" placeholder="Članski broj" data-toggle="tooltip" data-placement="right" title="Očitajte bar-kod sa nekorišćene kartice." />
    </div>
  </div>
  <!-- /membmership number -->

  <div class="form-group">
    <!-- phone number -->
    <label for="memberphonenumber" class="col-xs-2 control-label">Broj telefona:<font color="#d9534f">*</font></label>
    <div class="col-xs-3">
      <input name="memberphonenumber" id="memberphonenumber" type="text" class="form-control" placeholder="Broj telefona" />
    </div>
  </div>
  <!-- /phone number -->

  <div class="form-group">
    <!-- email -->
    <label for="memberemail" class="col-xs-2 control-label">Email adresa:</label>
    <div class="col-xs-3">
      <input name="memberemail" id="memberemail" type="text" class="form-control" placeholder="Email adresa" />
      <div class="checkbox">
        <label><input name="memberemailinglist" id="memberemailinglist" type="checkbox" disabled/> Prijavi na mailing listu?</label>
      </div>
    </div>
  </div>
  <!-- /email -->

  <div class="form-group">
    <!-- picture -->
    <label for="memberpicture" class="col-xs-2 control-label">Slika:</label>
    <div class="col-xs-10">
      <label class="btn btn-default" for="memberpicture">
        <input id="memberpicture" name="memberpicture" type="file" style="display:none;" onchange="$('#memberpicture-info').html($(this).val());" accept=".jpg,.png,.jpeg" class="form-control" />
        <span class="glyphicon glyphicon-camera"></span> Traži...
      </label>
      <span class="label label-danger" id="memberpicture-info">Nije izabrana ni jedna slika...</span>
    </div>
  </div>
  <!-- /picture -->

  <div class="form-group">
    <span class="pull-right">Polja označena sa <font color="#d9534f">*</font> su obavezna! &nbsp</span>
    <!-- required fields text -->
  </div>

  <button name="Submit" id="submit" class="btn btn-default pull-right" type="submit">Podnesi</button>
  <!-- submit button -->

</form>
<!-- /form -->

addmember.php

<?php
require 'includes/functions.php';
include_once 'config.php';

$membershipnumber = $_POST['membershipnumber'];
$membername = $_POST['membername']." ".$_POST['membersurname'];
$membersurname = $_POST['membersurname'];
$memberdate = $_POST['memberdate'];
$memberphonenumber = $_POST['memberphonenumber'];
$memberemail = $_POST['memberemail'];

$memberpicture_dir = '/images/members';
if(isset($_FILES['memberpicture'])) {
    $memberpicture_temp = $_FILES['memberpicture']['tmp_name'];
    $ext = pathinfo(basename($_FILES['memberpicture']['name']), PATHINFO_EXTENSION);
    $memberpicture = $membershipnumber.".".$ext;
    move_uploaded_file($memberpicture_temp , $_SERVER['DOCUMENT_ROOT'] . '/spartangym/images/members/' . $memberpicture);
} else {
    $memberpicture = "nopicture.jpg";
}

$regdate = new DateTime();
$memberregdate = $regdate->getTimestamp();
$memberexpires = $memberregdate + 2592000;

if (strlen($memberemail) > 0 && !filter_var($memberemail, FILTER_VALIDATE_EMAIL) == true) {
    echo '<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Email adresa nije validna.</div><div id="returnVal" style="display:none;">false</div>';

} else {
    $a = new AddMemberForm;
    $response = $a->createMember($membershipnumber, $membername, $memberdate, $memberphonenumber, $memberemail, $memberpicture, $memberregdate, $memberexpires);

    if ($response == 'true') {
        echo '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Član '. $membername .' je uspešno dodat u bazu.</div><div id="returnVal" style="display:none;">true</div>';

    } else {
        mySqlErrors($response);

    }
};
?>

Answer 1

at first check

before check

 var membershipnumber = $("#membershipnumber").val();

after check

var membershipnumber='none object';
if(typeof($('#membershipnumber'))!="undefined")
{
   membershipnumber= $('#membershipnumber').val();
}
alert(membershipnumber);

Answer 2

Your validation looks fine, but on-click you should use event.preventDefault() to keep the form from submitting and only allow the submission in the event of all fields being valid.

Usage here: https://api.jquery.com/event.preventdefault/

Answer 3

Your problem is here

var memberpicture = document.getElementById("#memberpicture").val();

Native methods don't have val(), nor should you include the hash.
As val() is a jQuery method, you probably wanted to do

var memberpicture = $("#memberpicture").val();

The native alternative would be

var memberpicture = document.getElementById("memberpicture").value;