Using Ajax to submit data from bootstrap modal to mySQL database

Question

I am having trouble submitting the modal information to the mySQL database. I have a separate file named "insert.php" which connects to the database and runs the insert query on the information from the modal. In the "main.php", I have a modal declared, a table, and an updateTable function which performs an ajax operation when the button "submit" is clicked. I grab the data from the modal as well. I am not sure what I am doing wrong do any advice would be appreciated. When I run the php code in the browser nothing in the database is stored.

Modal:

<div class="row">
    <div class="col-md-12">

      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1>Reservation</h1>
            </div>
            <div class="modal-body">

              <input type="text" name="field1" placeholder="Name" id="name">

              <input type="text" name="field2" placeholder="Email" id="email">

              <input type="text" name="field3" placeholder="PhoneNumber" id="phonenumber">

            </div>
            <div class="modal-footer">

              <input id="submit-btn" name="submit" class="btn submit" value="Submit">
              <input class="btn btn-default" data-dismiss="modal" value="Close">

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

Here is the part of the code where the ajax is inserted:

<script>
    var cells = document.querySelectorAll('.table-row > td');
    var cellIndex = -1;
        cells.forEach((e, index) => {
        e.addEventListener("click", () => {
            //show modal
        $('.modal').modal("show");
            //update grid
        // This is the row number
        console.log("Row number: ", index)
        cellIndex = index
  })
})

    function updateTable(e) {
      let name, email, phonenumber, tableRow, row;
      name = document.getElementById("name").value;
      email = document.getElementById("email").value;
      phonenumber = document.getElementById("phonenumber").value
      console.log(name, email, phonenumber);
      // Get the row that you want
      row = cells[cellIndex];
      $(row).html(name);
      $('.modal').modal("hide");

         //store in database
         $.ajax({
          url:"insert.php",
          method:"POST",
          data: {
            name: name,
            email: email,
            phonenumber: phonenumber
          }
        })

    }

document.getElementById("submit-btn").addEventListener("click", updateTable);

  </script>

Here is the php file where the database logic is held:

?php

  $conn = new mysqli("127.0.0.1","root","password","User");

  if($conn->connect_error){
    die("Connection failed: " . $conn->connect_error);
  }

  if(isset($_POST['submit']))
  {
      $output = '';
      $name = mysqli_real_escape_string($conn,$_POST["name"]);
      $phonenumber = mysqli_real_escape_string($conn,$_POST["phonenumber"]);
      $email = mysqli_real_escape_string($conn,$_POST["email"]);


      $query = "INSERT INTO users(name,phonenumber,email) VALUES('$name',
                '$phonenumber','$email' )";

    if(mysqli_query($conn,$sql))
    {
        $success = "New record created";
    }
    else
    {
        echo "Error" . $sql . " " . mysqli_error($conn);
    }

    mysqli_close($conn);

  }


?>

Any advice would be appreciated. Thank you.

Answer 1

You have to delete this line of code if(isset($_POST['submit']))

You can change it to

if(!empty($_POST["name"]) ||!empty($_POST["phonenumber"])||!empty($_POST["email"]))
  {
      $output = '';
      $name = mysqli_real_escape_string($conn,$_POST["name"]);
      $phonenumber = mysqli_real_escape_string($conn,$_POST["phonenumber"]);
      $email = mysqli_real_escape_string($conn,$_POST["email"]);


      $query = "INSERT INTO users(name,phonenumber,email) VALUES('$name',
                '$phonenumber','$email' )";

    if(mysqli_query($conn,$sql))
    {
        $success = "New record created";
    }
    else
    {
        echo "Error" . $sql . " " . mysqli_error($conn);
    }

    mysqli_close($conn);

  }

It's might happen cause you send request post with ajax while you only sent name, email and phoneNumber. Of course statement true on this line of code will not execute if(isset($_POST['submit']))