How do I insert an object data array into a database with AJAX

Question

I want to insert data from an array into a database table in the submit() function where the sql syntax is at. I want to insert the data then redirect to another page after successful. I don't know how to do this with ajax.

I tried to make ajax syntax but I don't know if i'm passing the data correctly for obj.name and obj.books corresponding to their own values in the array.

example: [{"name":"book1","books":["thisBook1.1","thisBook1.2"]},{"name":"book2","books":["thisBook2.1","thisBook2.2","thisBook2.3"]}]

function submit(){
    var arr = [];
    for(i = 1; i <= authors; i++){
        var obj = {};
        obj.name = $("#author" + i).val();
        obj.books = [];
        $(".auth" + i).each(function(){
            var data = $(this).val();
            obj.books.push(data);
        });
        //sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')");
        //mysqli_query(sql);
        arr.push(obj);
    }

    $("#result").html(JSON.stringify(arr));
}
/////////////////////////////////
//I tried this:
$.ajax({
   type: "POST",
   data: {arr: arr},
   url: "next.php",
   success: function(){

   }
});
/////////////////////////////////

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type="text/css">
    <!-- #main {
      max-width: 800px;
      margin: 0 auto;
    }
    -->
  </style>
</head>

<body>
  <div id="main">
    <h1>Add or Remove text boxes with jQuery</h1>
    <div class="my-form">
      <form action"next.php" method="post">
          <button onclick="addAuthor()">Add Author</button>
          <br>
          <br>
          <div id="addAuth"></div>
          <br>
          <br>
          <button onclick="submit()">Submit</button>
      </form>
    </div>

    <div id="result"></div>
  </div>

  <script type="text/javascript">
    var authors = 0;

    function addAuthor() {
      authors++;
      var str = '<br/>' + '<div id="auth' + authors + '">' + '<input type="text" name="author" id="author' + authors + '" placeholder="Author Name:"/>' + '<br/>' + '<button onclick="addMore(\'auth' + authors + '\')" >Add Book</button>' + '</div>';
      $("#addAuth").append(str);
    }

    var count = 0;

    function addMore(id) {
      count++;
      var str = '<div id="bookDiv' + count + '">' + '<input class="' + id + '" type="text" name="book' + id + '" placeholder="Book Name"/>' + '<span onclick="removeDiv(\'bookDiv' + count + '\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">Remove</span>' + '</div>';
      $("#" + id).append(str);
    }

    function removeDiv(id) {
      //var val = confirm("Are you sure ..?");
      //if(val){
      $("#" + id).slideUp(function() {
        $("#" + id).remove();
      });
      //}
    }

    function submit() {
      var arr = [];
      for (i = 1; i <= authors; i++) {
        var obj = {};
        obj.name = $("#author" + i).val();
        obj.books = [];
        $(".auth" + i).each(function() {
          var data = $(this).val();
          obj.books.push(data);
        });
        //                            sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')");
        //                            mysqli_query(sql);
        arr.push(obj);
      }

      $("#result").html(JSON.stringify(arr));
    }
  </script>
</body>

</html>

Are you having issues with getting the data to PHP? Can you show what is in next.php — Victory
– Victory, Commented Dec 18, 2015 at 22:27
there is nothing in next.php tha is why i added sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')"); //mysqli_query(sql); in the submit function syntax — learningbyexample
– learningbyexample, Commented Dec 18, 2015 at 22:30

Farnabaz · Accepted Answer · 2015-12-18 22:33:52Z

2

Send your array to server ,stringify array before sending it to server so in server you can decode json and recover your array, and then insert received data to database
JS

function submit(){
    var arr = [];
    for(i = 1; i <= authors; i++){
        var obj = {};
        obj.name = $("#author" + i).val();
        obj.books = [];
        $(".auth" + i).each(function(){
            var data = $(this).val();
            obj.books.push(data);
        });

        //sql = ("INSERT INTO table (author, book) VALUES ('obj.name', 'obj.books')");
        //mysqli_query(sql);
        arr.push(obj);
    }
    sendToServer(arr)
    $("#result").html(JSON.stringify(arr));
}
function sendToServer(data) {
   $.ajax({
      type: "POST",
      data: {arr: JSON.stringify(data)},
      url: "next.php",
      success: function(){

      }
   });
}

PHP (next.php)

$data = json_decode(stripslashes($_POST['arr']));
foreach($data as $item){
   echo $d;
   // insert to db
}

answered Dec 18, 2015 at 22:33

Farnabaz

4,0662 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

learningbyexample Over a year ago

How do I prevent it from sending me directly to next.php after pressing a button

Farnabaz Over a year ago

@learningbyexample add class to your button and remove onclick attribute, <button class="submit-btn"></button> this do like this $(".submit-btn").click(function(event) { event .preventDefault(); /** cal your submit function **/ submit(); });

learningbyexample Over a year ago

onclick="addMore(\'auth' + authors + '\')" and onclick="removeDiv(\'bookDiv' + count + '\')" are passing data to the function if I make it class="addMore" and class="removeDiv" how will I pass the parameters.

Matthew Barbara · Accepted Answer · 2015-12-18 22:39:39Z

1

Please Keep the following in mind

Javascript/JQuery is client side and hence cannot access the database which is on the server.

You can Send data via AJAX to next.php and then use this data to insert into your database.

To improve debugging, use the following code to ensure the correct data is being delivered in next.php

   var_dump($_POST);

Your SQL statements must be executed in next.php using the data passed by $_POST (since your "type" of AJAX request is post).

answered Dec 18, 2015 at 22:39

Matthew Barbara

3,9822 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

How do I insert an object data array into a database with AJAX

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related