如何使用php将表单内容发送到数据库

Question

My problem: I don't know how to send the information of a Form to a database

What I have:

I have a html file that contents 3 buttons and a a div that will change depending on the button clicked:

<div class="container">
            <h1> Producto</h1>

            <div class ="buttons">
                <button type="button" onclick="loadAddProduct()">Nuevo producto</button>
                <button type="button">Borrar producto</button>
                <button type="button">Actualizar producto</button>

            </div>

            <div class="main_container" id="main_container">

            </div>

        </div>

div with id =main_container loads with a ajax function depending on the button. The first button when is clicked will load this form:

<div class="container">

    <form name="addProductForm" id="addProductForm" action="" onsubmit="" method="post">

        <label for="product_name">Nombre :</label> <input id="product_name" placeholder="Nombre">

        <br> <br>
        <label for="product_desc_short">Descripción corta:</label><br>
        <textarea id="product_desc_short" cols=40 rows=5 placeholder="Descripción corta del prooducto"></textarea>

        <br> <br>
        <label for="product_desc_long">Descripción larga:</label><br>
        <textarea id="product_desc_long" cols=50 rows=7 placeholder="Descripción larga del prooducto"/></textarea>
        <br><br>

        <label for="product_price">Precio :</label> <input id="product_price" placeholder="Precio"/>

        <br> <br>
        <label for="product_stock">Stock :</label> <input id="product_stock" placeholder="Stock">

        <br><br>
        <label for="product_type">Categoria :</label>
        <select id="product_type" name="prod_type">
            <option value="" selected="selected"> Selecciona</option>
            <option value="1"> Gorras</option>
            <option value="2"> Camisetas</option>
            <option value="3"> Tazas</option>
            <option value="4"> Posters</option>
            <option value="5"> Sudaderas</option>
        </select>
        <br>
    </form>
    <br>
    <br>
    <button type="submit" form="addProductForm" value="Submit">Enviar</button>

</div>

And finally I have a file with a set of php function that interacts with database:

php file:

.....

function addProduct($desc_short, $desc_long, $stock, $price, $name, $image_url, $type)
{

    $conn = connect();

    $sql = "INSERT INTO `products`(`desc_short`, `desc_long`, `stock`, `price`, `name`, `image_url`, `type`)
            VALUES ('" . $desc_short . "','" . $desc_long . "','" . $stock . "','" . $price . "','" . $name . "','" . $image_url . "','" . $type . "')";

    if ($conn->query($sql) === true) {
        $res = array(true, $conn->insert_id);
        $conn->close();
        return $res;
    }

    $conn->close();
    return array(false, -1);
}
.....

My intention is when the user clicks on submit button, then launch the function "addProduct(.....)" to upload the info to database, but I don't want to go to other page, just refresh the <div id="main_container"> , with a little message like " product uploaded--> ID :XXX".

But I don't really know how to mix all this things.

Answer 1

You have to send a post request to your php file.

Change button to :

<button type="button " id="addProductFormBtn" value="Submit">Enviar</button>

Add to your JS :

$('body').on('click', '#addProductFormBtn', function(){
    //Get data from the form
    var product_desc_short = $('#product_desc_short').val();
    ...//other fields

    //Send the data to your_php_file_path using post request
    $.post( "your_php_file_path", {product_desc_short: product_desc_short,...})
        .done(function( msg_returned_from_php ) {
            $('#main_container').text(msg_returned_from_php)
        });
 }); 

In your PHP file call function with params recieved from request :

addProduct($_POST['product_desc_short'],...);

To return message, add echo in the end of your file (or function) :

echo " product uploaded--> ID :XXX";

Hope this helps.