Question

我尝试传递表单值，检查它们然后使用jquery返回响应，一切都正确传递，图像上传并且路径被添加到数据库中，而不是返回消息相同的页面，它重定向到addmember.php，甚至没有经过检查 - 就像javascript文件甚至不存在一样，它已经困扰了我很长一段时间......我＆＃39;我试过搜索，但我找不到任何与我相关的东西，因为问题在于图片/图片......

未捕获的TypeError：无法读取属性＆＃39; val＆＃39;为null

addmember.js和**表格

＆＃13;

$(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;
  });
});

＆＃13;

<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 -->

＆＃13;

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

你的问题在这里

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

原生方法没有val()，也不应包含哈希值由于val()是一个jQuery方法，你可能想要做

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

原生替代品将是

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

Answer 2

您的验证看起来很好，但是点击后您应该使用event.preventDefault（）来保持表单不提交，并且只有在所有字段都有效的情况下才允许提交。

用法： https://api.jquery.com/event.preventdefault/

Answer 3

第一次检查

检查前

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

检查后

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

未捕获的TypeError：无法读取属性＆＃39; val＆＃39; null jquery

3 个答案: