Как отправить информацию в базу данных без перезагрузки страницы?

Question

Итак, я пытаюсь отправить некоторую информацию в базу данных с помощью AJAX / PHP, но безуспешно, я видел некоторые коды здесь, но они не работают, и я просто получаю эту ошибку TypeError: 'stepUp' вызывается наобъект, который не реализует интерфейс HTMLInputElement.

HTML

<form action="javascript:void;" id="putz" class="putz" method="POST" onsubmit="send()" enctype="multipart/form-data" > 
              <div class="box">
                <input type="text" name="name" id="name" required>
                <label>Name</label>
              </div>
              <div class="box">
                <input type="text" name="email" id="email" required>
                <label>Email</label>
              </div>
              <div class="box">
                <input type="text" name="pass" id="pass" required>
                <label>Password</label>
              </div>
              <div class="Box">
                <p style="color: red; text-align: left; margin-left: 15px">Photo</p>
                <input type="file" name="photo" style="margin-right: 140px; color: red;">
              </div>
              <button id="submit" type="submit">Submit</button>
            </form>

А вот мой ajax / javascript

</script>
  <script type="text/javascript">
     function send()
{
 var name=document.getElementById( "name" );
 var email=document.getElementById( "email" );
 var pass=document.getElementById( "pass" );
  $.ajax({
    type: 'post',
    url: 'send.php',
    data: {
      name:name,
      email:email,
      pass:pass,
    },
  });
}       
    </script>

и код send.php

 <?php 
    include_once('conn.php');
    $name = $_POST['name'];
    $email = $_POST['email'];
    $pass = $_POST['pass'];
    $photo = $_FILES['photo']['name'];
    $tmp_name = $_FILES['photo']['tmp_name'];
    move_uploaded_file($tmp_name, "img/foto_perfil/" . $photo);
    $sql = "INSERT INTO user (name, email, photo, pass) VALUES ('$name', '$email','$photo', '$pass')";
    mysqli_query($conn, $

Answer 1

• У вас не было ссылки на библиотеку JQuery до вашего вызова $.ajax().
• Вы ссылаетесь на фактические элементы HTML как на данные, которые нужно передать, когда вы должны передать значенияиз этих элементов.
• У вас также есть запятые после последней пары ключ / значение в вашем data объекте и после самого ключа data.
• Я бы также переименовал любой / всечто вы назвали name, так как это может вызвать конфликты со свойством Global window.name.
• (FYI) Вы неправильно используете элемент label.Вы либо оборачиваете его вокруг элемента формы, для которого он является меткой, либо вы даете ему атрибут for со значением id элемента формы, для которого он является меткой.

---

function send() {
  // Get the values of the elements, not the elements themselves:
  var userName = document.getElementById( "userName" ).value;
  var email = document.getElementById( "email" ).value;
  var pass = document.getElementById( "pass" ).value;

  $.ajax({
    type: 'post',
    url: 'send.php',
    data: {
      userName: userName,
      email: email,
      pass: pass
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="putz" class="putz" 
      method="POST" onsubmit="send()" enctype="multipart/form-data" > 
  <div class="box">
    <input type="text" name="userName" id="userName" required>
    <label for="userName">Name</label>
  </div>
  <div class="box">
    <input type="text" name="email" id="email" required>
    <label for="email">Email</label>
  </div>
  <div class="box">
    <input type="text" name="pass" id="pass" required>
    <label for="pass">Password</label>
  </div>
  <div class="Box">
    <p style="color: red; text-align: left; margin-left: 15px">Photo</p>
    <input type="file" name="photo" style="margin-right: 140px; color: red;">
  </div>
  <button id="submit" type="submit">Submit</button>
</form>