samedi 16 septembre 2017

AJAX struggling post checkbox data (php)

Unlike most forum questions (where the checkbox info is picked up directly on the index.html), I am retrieving my checkbox data from a php file as shown. How do I catch that info on item.html? Any help is welcome.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>To Do List</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://ift.tt/OIiP2w" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">

        <script
          src="http://ift.tt/2nfnDrE"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous">
        </script>

        <script src="js/item.js" type="text/javascript"></script>
    </head>

    <body onload="process()">
        <div class="list">
            <h1 class="header">My To Do</h1>
                <div id="todo-items"></div>
        </div>

        <!-- I add a new item to the checkbox list here -->
        <div class="list">
            <div id="item-add" >
                <input type="text" id="name" name="name" placeholder="Enter new item" class="input" autocomplete="off" required>
                <button id="add">Add Item</button><br /><br />
                <div id="status"></div>
            </div>
        </div>
    </body>
</html> 

In item.js

function fetch_data(){
    $.ajax({
        url:"/to-do-list/display.php",
        method:"GET",
        success:function(data){
            $('#todo-items').html(data);
        }
    });
}

fetch_data();

$(document).ready(function(){
    // $(document).on('click', '#add', function(){

    var items = [];
    //i'm struggling here
    $('#items').click(function() {

        if($('#items').is(':checked')) {

            console.log($(this).val());
            items.push($(this).val());
            console.log(items);
        }

        items = items.toString();

        $.ajax({
            url:"/to-do-list/insert.php",
            method:"POST",
            data:{items:items},
            success:function(data){
                console.log(data);
            }
        });
    });
});

display.php (I need to send the checkboxes here to ajax in item.js)

<?php 
include 'db.php';
$sql = "SELECT * FROM items ORDER BY items.id ASC";
$result = mysqli_query($conn, $sql);

if(mysqli_num_rows($result) > 0){
    while ($row = mysqli_fetch_assoc($result)){
        echo "<ul class='items'>";
        echo "<li><input id='items' type='checkbox' /><label>";
        echo $row['name'];
        echo "</label></li><br>";
        echo "</ul>";
    }
    echo "<br/><br/>";
    echo "<input type='checkbox' /><label>Mark all as completed</label>";
} else {
    echo "There are no to-dos!";
}

?>

insert.php (this is where i want to send the checkbox data to db)

<?php
    include 'db.php';

    if(isset($_POST['items'])) { 
        $sql    =  "INSERT INTO done (done_items) VALUES('".$_POST['items']."')";
    } else {
        echo "Please enter an item";
    }


    $result = mysqli_query($conn, $sql);

    if(false === $result) {
        printf("error: %s\n", mysqli_error($conn));
    } else {
        echo "Successfully Inserted";
    }
?>




Aucun commentaire:

Enregistrer un commentaire