PHP, AJAX and jQuery

Asked

Viewed 378 times

6

Hello. I have the following folder hierarchy:

Folder "mother" with the following: Submit.php file, 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, but the description does not, and I get the following error:

Notice: Undefined index: Descricao in /home/u175477054/public_html/libs/Submit.php on line 44

In the Ajax part, in the URL part, I have tried several ways, but always get the same error.

How to record the description in the bank?

php jquery html ajax

1 answer

4


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

You cannot do the form Ubmit and pass the input data there and then send the rest via AJAX with data: {descricaoArte : descricaoArteHTML},

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

Ajax-free:

You must have a <form> in your HTML. 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 the 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 also suggest having the <form> in HTML (by the way I suggest using HTML above with the example I will give), but can change the type button for it not to do form Ubmit.

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");
            }
        });
    });
});

Browser other questions tagged php jquery html ajax

You are not signed in. Login or sign up in order to post.