How to send information to database without reloading page?

Question

so, i´m trying to send some information to database with AJAX/PHP but without success, i´ve seen some codes from here but they are not working and I just get this error TypeError: 'stepUp' called on an object that does not implement interface 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>

And here is my 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>

and the send.php code

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

• You didn't have the JQuery library referenced prior to your invocation of $.ajax() .
• You are referring to the actual HTML Elements as the data to pass when you should be passing the values of those elements.
• You also have trailing commas after the last key/value pair in your data object and after the data key itself.
• I would also rename any/everything that you named name as this can cause conflicts with the Global window.name property.
• (FYI) You aren't using the label element correctly. You either wrap it around the form element that it is a label for or you give it a for attribute with a value of the id of the form element that it is a label for.

---

 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>