CODEWITHSUNDEEP
phpjquerymysqlajax
Old Spirit
Old Spirit

Reputation: 1

Form not saving data to MySQL database

I am having trouble recording a single data (deckName) from this form to my MySQL database. I read and tried all the solutions I found over the web, but I cannot get it to work. Doing the MySQL command from the PHPMyAdmin work fine.

I need to save in the deck table of the db (id, name, cards) the values.

Jquery/Ajax script:

<script>
    $(document).ready(function(){     

        $(document).on('submit','.save',function(){

            var deckName = $('.deck').val();
            console.log(deckName);

            $.ajax({
                type: "POST",
                url: "submit.php",
                data: { "name": deckName},
                success: console.log('worked')

            });
        });
    }); 

</script>

Form:

<div class="decklist">
    <form method="post" id="decklist">
    <input class="deck" id="deckN" type="text" value="Deck name"/>
    <input class="save" type="submit" value="Save Deck"/>
    </form>
    <div class="list">
        <ul class="d_list">
            <li class='added_card' id='list_0'></li>
        </ul>
    </div>
</div>

submit.php:

<?php


if(isset($_POST["name"])&& strlen($_POST["name"])>0){

    $deckName = $_POST["name"];
    $cards = 0;

    echo $deckName;

    $conn = new mysqli("localhost:8080","root","","ken");
    if($conn -> connect_errno){
        die("Failed to connect: (". $conn->connect_errno. ")".$conn->connect_error);
    }

    $insert = $conn->query ("INSERT INTO `deck` (deck, cards) VALUES ($deckName, $cards)");

    if ($insert){
        echo 'Successfully saved '. $deckName;
        $conn -> close();
    }

}

?>

Also once I hit Save Deck for submit, the div get refreshed while I assume it shouldn't with ajax.

I tried using click instead of submit, and the console.log returned everything correctly from the ajax function and the div wasn't refreshing every time, but with submit logs don't show up anymore in console. I don't get anything from the echo in submit.php, never.

Upvotes: 0

Views: 507

Answers (5)

Claudio
Claudio

Reputation: 1

$(document).ready(function(){ 

    $("#decklist").on('submit',function(e){
        e.preventDefault(); 

        var deckName = $('#deck').val();
        console.log(deckName);

        $.ajax({
            type: "POST",
            url: "submit.php",
            data: { "name": deckName},
            success: function(response) { 
                  console.log('worked')
            }

        });
    });
});

it works form me, change $('#deck').val();

Upvotes: 0

RafH
RafH

Reputation: 4544

You need to bind on the form submit event :

$(document).ready(function(){    

        $("#decklist").on('submit',function(e){
            e.preventDefault(); 

            var deckName = $('.deck').val();
            console.log(deckName);

            $.ajax({
                type: "POST",
                url: "submit.php",
                data: { "name": deckName},
                success: function(response) { 
                      console.log('worked')
                }

            });
        });
    });

Upvotes: 0

BodyaK
BodyaK

Reputation: 13

how about change js like this:

$(".decklist").on("click", ".save", function(){
    $.post("submit.php", { name: deckName }).success(function(){
        console.log('worked');
    });
});

Upvotes: 0

Pardeep Poria
Pardeep Poria

Reputation: 1049

Try using preventDefault; like so

$(document).on('submit','.save',function(e){ 
 e.preventDefault;

Hope it solves your problem !

Upvotes: 2

moscar
moscar

Reputation: 355

You have to put quotes around string values:

"INSERT INTO `deck` (deck, cards) VALUES ('$deckName', $cards)"

Upvotes: 0

Related Questions