2

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.

2
  • 1
    I hope you're escaping the user input to prevent a SQL injection (and escaping the output to prevent a stored XSS). You might also want to consider using prepared statements to stay on the safe side (in case you ever forget to before using the function). Commented Dec 1, 2015 at 0:05
  • Hi @WillS SQLinjection is not doned yet, but If i want to pass my test, I have to do it. First I wanted to be sure this part works. Next Step, "security". But you give me a little hint that I probably forget --> stored XSS. Thanks! I'll take a look to this. Thanks for all the advice! Commented Dec 1, 2015 at 0:20

1 Answer 1

5

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.