JS not formatting the thousand value correctly for Input and not receiving correctly in PHP / Database

Question

Good morning people, I have in my forms some input’s where the user informs the value of the product, its quantity and with this is made the calculation of the Product Value and also the Total Order Value simultaneously. The Value and Quantity field renders thousand values normally, but these values do not arrive in the correct way in PHP, for example, the value of 1,000.00 arrives as 1.00 in PHP, and the value of the Product Value and Order Value that is calculated by JS also occurs the same thing, until 999.99 it displays normally and after thousand it no longer works. Can anyone tell me where I’m going wrong in calculating and receiving data in PHP ?

HTML Structure of Input’s:

<div class="clone-prod" name="clone-prod[]">

                                    <div class="wrap-prod" name="wrap-prod[]">

                                        <div class="produtos-wrap" name="produtos-wrap[]">
                                            <div class="text-center select_height produto-padrao" id="primeiro-produto">
                                                <input type="text" class="index font-pop input-div" id="index_produto"
                                                    name="index_produto[]" value="1" readonly="true" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="segundo-produto">
                                                <input class="font-pop number_id_produto input-div" value=""
                                                    readonly="true" name="id_produto[]" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao terceiro-produto"
                                                id="terceiro-produto" name="terceiro-produto[]">
                                                <select class="selectpicker form-control" data-show-subtext="false"
                                                    data-live-search="true" name="select_produtos[]"
                                                    id="select_produtos" onchange="initProdutos(this)" required>
                                                    <?php
                                                    echo '<option disabled selected hidden
                                                    value="Selecione um produto..."
                                                    data-subtext="Selecione um produto...">Selecione um produto...
                                                    </option>';
                                                    foreach ($res as $item_produtos) {
                                                        echo '<option data-subtext="' . $item_produtos['CODACESSO'] . '" value="'
                                                        . $item_produtos['CODACESSO'] . "|" . $item_produtos['EMBALAGEM'] . "|" 
                                                        . $item_produtos['QTDEMBALAGEM'] . '">' . $item_produtos['DESCCOMPLETA'] . '</option>';
                                                    }
                                                    ?>
                                                </select>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="quantidade-embalagem">
                                                <input type="text" class="edit-input font-pop"
                                                    name="qtdembalagem[]" value="" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="quarto-produto">
                                                <input type="text" maxlength="2" class="edit-input font-pop"
                                                    name="embalagem[]" value="" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="quinto-produto">
                                                <input type="number" id="preco-input" name="preco[]" step="0.01" min="0"
                                                    class="edit-input font-pop" required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="sexto-produto">
                                                <input type="number" id="qtd-input" step="0.01" min="0"
                                                    class="edit-input font-pop" value="" name="quantidade-produto[]"
                                                    required>
                                            </div>

                                            <div class="text-center select_height produto-padrao" id="setimo-produto">
                                                <input class="font-pop preco-produto input-div" readonly="true"
                                                    name="preco-produto[]" required>
                                            </div>
                                        </div>

                                        <div class="text-center select_height produto-padrao oitavo-produto"
                                            id="div-remove">
                                            <button type="button"
                                                class="remover glyphicon glyphicon-remove button-produto"></button>
                                        </div>

                                    </div>

                                </div>

                            </section>
                            <div id="wrap-addbutton">
                                <button type="button" id="add-button"
                                    class="glyphicon glyphicon-plus-sign button-produto"></button>
                                <b>Adicione um produto...</b>
                            </div>
                        </div>

                    </div>

                    <div class="container" id="produto-total">
                        <div class="col-lg-12">
                            <div class="assinatura col-lg-9">
                                <div id="wrap-assinatura" class="text-center">
                                    <div id="assinatura"></div>
                                    <b>Assinatura</b>
                                </div>
                            </div>

                            <div class="preco-final col-lg-12 text-right">
                                <b>Preço Total:</b>
                                <br>
                                <input id="total" readonly="true" name="total_pedido" class="text-right input-div"
                                    value="R$ 0.00">
                            </div>
                        </div>
                    </div>

JS functions of calculation:

$(document).ready().on("input", "[name='preco[]'], [name='quantidade-produto[]']", function () {

    // pega a div principal
    var wraper = $(this).closest(".produtos-wrap");

    // pega a quantidade
    var qtd_produto = $("[name='quantidade-produto[]']", wraper).val();

    // pega o preço
    var preco_produto = $("[name='preco[]']", wraper).val().replace(',', '.');

    // div com o valor do produto
    var total_produto = $("[name='preco-produto[]']", wraper);

    // coloca o valor total do produto
    total_produto.val(formataMoeda(qtd_produto * preco_produto));

    calculos(); // chama a função para calcular o total geral
});


function calculos() {
    // variável do total
    var total = 0;
    // soma tudo e coloca na div do total
    $("[name='preco-produto[]']").each(function () {
        // pega apenas o valor e ignora o "R$"
        var p = parseFloat($(this).val().match(/[\d|,|\.]+/)[0].replace(/\./g, "").replace(",", "."));
        total += p;
    });
    // coloca o valor total na div "total"
    $("#total").val(formataMoeda(total));
}


function formataMoeda(v) {
    return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

How to Receive Data in PHP and also Send to Database:

<?php
include 'verifica_login.php';
include 'conexao.php';

error_reporting(E_ERROR);
header('Content-Type: text/html; charset=utf-8');

# Inclusão do Pedido


$id_fornecedor = $_POST['fornecedor_id'];

$nome_fornecedor = trim($_POST['select_fornecedor']);

$nome_input_fornecedor = trim($_POST['fornecedor_new_input']);

$cnpj = str_replace(".", "", str_replace("/", "", str_replace("-", "", $_POST['cnpj'])));

preg_match('/[\d|,|\.]+/', $_POST['total_pedido'], $valor_total);
$valor_total = str_replace(",", ".", str_replace(".", "", $valor_total[0]));

$gerente_fiscal = trim($_SESSION['nome']);

$loja = trim($_POST['loja']);

if (isset($_POST['change_fornecedor'])) {
    $sql = "INSERT INTO pedido VALUES (NULL, '$gerente_fiscal', '$id_fornecedor', '$nome_input_fornecedor','$cnpj', NOW(), '$valor_total', '$loja')";
    if (!$connect->query($sql) === true) {
        die("Erro na inserção de pedido: " . $sql . "<br>" . $connect->error);
    }
} else {
    $sql = "INSERT INTO pedido VALUES (NULL, '$gerente_fiscal', '$id_fornecedor', '$nome_fornecedor', '$cnpj', NOW(), '$valor_total', '$loja')";
    if (!$connect->query($sql) === true) {
        die("Erro na inserção de pedido: " . $sql . "<br>" . $connect->error);
    }
}

# Inserção de Itens de Pedido
$id_pedido = $connect->insert_id;
$qtd_itens = sizeof($_POST['index_produto']);
for ($i=0; $i < $qtd_itens; $i++) {
    # Variáveis
    $item = $_POST['index_produto'][$i];

    $id_produto = $_POST['id_produto'][$i];

    $desc_produto = $_POST['select_produtos'][$i];

    preg_match('/[\d|,|\.]+/', $_POST['quantidade-produto'][$i], $quantidade);
    $quantidade = str_replace(",", ".", str_replace(".", "", $quantidade[0]));;

    preg_match('/[\d|,|\.]+/', $_POST['preco'][$i], $valor_un);
    $valor_un = str_replace(",", ".", str_replace(".", "", $valor_un[0]));

    preg_match('/[\d|,|\.]+/', $_POST['preco-produto'][$i], $valor_produto);
    $valor_produto = str_replace(",", ".", str_replace(".", "", $valor_produto[0]));

    # Insert de Dados

    $query = "INSERT INTO pedido_item VALUES ('$id_pedido', '$item', '$id_produto', '$desc_produto', '$valor_un', '$quantidade', '$valor_produto')";
    if (!$connect->query($query) === true) {
        die("Erro na inserção de itens: " . $query . "<br>" . $connect->error);
    }
}

header('Location: principal.php');

I appreciate any help provided.

Answer 1

There are some inaccuracies in JS code and PHP. In JS you are using in toLocaleString the format en-US when it should be pt-BR to exit in format R$ 1.000,00:

return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });

On the line that sums the values, you need to remove all thousand points with .replace(/\./g, ""):

var p = parseFloat($(this).val().match(/[\d|,|\.]+/)[0].replace(/\./g, "").replace(",", "."));

In the PHP part, just use the same JS logic to format the value. For example, if the value is R$ 3.000.000,00 (three million), the expected result is: 3000000.00, then just use one preg_match with 2 Replaces to remove the dots and replace the comma with a dot:

preg_match('/[\d|,|\.]+/', $_POST['total_pedido'], $valor_total);
$valor_total = str_replace(",", ".", str_replace(".", "", $valor_total[0]));

Answer 2

You are replacing the comma by a dot, but you are not removing the dot that in en-br is the thousand separator. Thus the conversion to decimal stops at the first point (that of thousand that was not removed) and '1,000.00' becomes '1.00'.

So you must first remove the stitches:

function desformataMoeda(strMoeda) {
   // pega apenas o valor e ignora o "R$"
   return parseFloat(strMoeda.match(/[\d|,|\.]+/)[0].replace(/\./g, '').replace(",", ".").replace(",", "."));
}
...
// pega o preço
var preco_produto = desformataMoeda($("[name='preco[]']", wraper).val());
...
var p = desformataMoeda($(this).val());