PHP, AJAX and jQuery

Question

PHP, AJAX and jQuery

Navigation

#1 by (3 votes)

5

Hello. I have the following hierarchy of folders:

Parent folder, with the following: file submit.php, with the following code:

<?php

ini_set('display_errors',1);
ini_set('display_startup_erros',1);
error_reporting(E_ALL);

include("libs/submit.php");

Folder / templates, which has the file submit.php , with the following code:

<html>

<head>
    <meta charset='UTF-8'>
</head>

<body>

    <input type="file" name='foto' id="file-upload" style="display:none;">

    <input type="submit" class="upload_button" value="Submit">

    <div class='editable'>Oi pra mim e pra vc</div>

    <script>
        $(document).ready(function() {
            $(".upload_button").click(function() {
                var descricaoArteHTML = $(".editable").Editor("getText");

                $.ajax({ 
                     url: '/',
                     data: {descricaoArte : descricaoArteHTML},
                     type: 'POST',
                     success: function(output) {
                                  alert(output);
                     },
                     error: function(request, status, error){
                        alert("Error: Could not delete");
                     }
                });
            });
        });

    </script>
</body>

And the libs / folder, which has the file submit.php with the following code:

<?php

ini_set('display_errors',1);
ini_set('display_startup_erros',1);
error_reporting(E_ALL);

session_start();

if(isset($_SESSION['usuario_logado'])){

    include "config.php";
    include "banco.php";
    include "helper.php";

    $tem_erros = false;

    if (tem_post()) {

        if (! isset($_FILES['foto'])) {
            $tem_erros = false;
        } else {
            if (tratar_foto($_FILES['foto'])) {
            $foto = array();
            $foto['arquivo'] = $_SESSION['rand'];
            $foto['descricao'] = $_POST['descricaoArte'];  
            } else {
                $tem_erros = true;
            }
        }


        if (! $tem_erros) {
            gravar_foto($mysqli, $foto);
        }

    }

include "./templates/submit.php";

What happens is the photo is recorded in the database, however the description does not, and I get the following error:

Notice: Undefined index: description in /home/u175477054/public_html/libs/submit.php on line 44

In the Ajax part of the URL, I've tried a number of ways, but I always get the same error.

How can I save the description in the bank?

php html jquery ajax

asked by anonymous 11.12.2014 / 23:39

1 answer

What kind of tests can I still do in this code? Twitter Bootstrap: Set specific CSS rule for different sizes

score 3 · Accepted Answer

You are trying to send this data in two mutually exclusive ways.

You can not submit the form and pass the input data and then send the rest via AJAX with data: {descricaoArte : descricaoArteHTML},

You have to do everything with AJAX or everything without AJAX.

No AJAX:

You must have <form> in your HTML. The HTML could be:

<form id="minhaForm" action="" method="POST">
    <input type="file" name='foto' id="file-upload" style="display:none;" />
    <input type="hidden" id="descricao" name="descricao" />
    <input type="submit" class="upload_button" value="Submit" />
    <div class='editable'>Oi pra mim e pra vc</div>
</form>

and jQuery:

$(document).ready(function () {
    $("#minhaForm").on('submit', function (e) {
        e.preventDefault();
        $("#descricao").val($(".editable").Editor("getText"));
        $(this).off('submit');
        this.submit();
    });
});

Only with AJAX:

Then I suggest you also have <form> in HTML (anyway I suggest using the HTML above with the example I'm going to give), but you can change the type of the button so it does not submit form.

HTML:

<form id="minhaForm" action="" method="POST">
    <input type="file" name='foto' id="file-upload" style="display:none;" />
    <input type="hidden" id="descricao" name="descricao" />
    <input type="button" class="upload_button" value="Submit" />
    <div class='editable'>Oi pra mim e pra vc</div>
</form>

jQuery

$(document).ready(function () {
    $(".upload_button").click(function () {
        $("#descricao").val($(".editable").Editor("getText"));

        $.ajax({
            url: '/',
            data: $('#minhaForm').serialize(),
            type: 'POST',
            success: function (output) {
                alert(output);
            },
            error: function (request, status, error) {
                alert("Error: Could not delete");
            }
        });
    });
});