6

Preciso muito de uma ajuda..

Tenho um select com os produtos:

<!-- panel preview -->
    <div class="col-sm-5">
        <h4>Adicionar Produtos:</h4>
        <div class="panel panel-default">
            <div class="panel-body form-horizontal payment-form">
                <div class="form-group">
                    <label for="status" class="col-sm-3 control-label">Escolha o produto</label>
                    <div class="col-sm-9">
                        <select id="status" name="status[]" class="order-type">
                          <option value="cake">Tortas Confeitadas</option>
                          <option value="lollipop">Bolos Caseiros</option>
                          <option value="dessert">Pão</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="amount" class="col-sm-3 control-label">Quantidade</label>
                    <div class="col-sm-9">
                        <input type="number" class="form-control" id="amount" name="amount[]" required="required">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 text-right">
                        <button type="button" class="btn btn-default preview-add-button">
                            <span class="ico-plus"></span> Add
                        </button>
                    </div>
                </div>
            </div>
        </div>            
    </div> <!-- / panel preview -->

Ao clicar no botão Add o javaScript mostra um "preview" dos produtos selecionados na tabela abaixo.

<div class="col-sm-7">
        <h4>Preview:</h4>
        <div class="row">
            <div class="col-xs-6">
                <div class="table-responsive">
                    <table class="table preview-table" id="example-table">
                        <thead>
                            <tr>
                                <th>Produto</th>
                                <th>Quantidade</th>
                            </tr>
                        </thead>
                        <tbody></tbody> <!-- preview content goes here-->
                    </table>
                </div>                            
            </div>
        </div>
        <div class="row text-left">
            <div class="col-xs-4">
                <h4>Total: <strong class="preview-total"></strong></h4>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <hr style="border:1px dashed #dddddd;">
                <button class="btn-block convert-table">Enviar pedido</button>
            </div>                
        </div>
    </div>

O javaScript responsável por fazer isso, é o seguinte:

$('.preview-add-button').click(function(){
    var form_data = {};
    form_data["status"] = $('.payment-form #status option:selected').text();
    form_data["amount"] = parseFloat($('.payment-form input[name="amount[]"]').val()).toFixed(2);
    form_data["remove-row"] = '<span class="ico-cancel"></span>';
    var row = $('<tr></tr>');
    $.each(form_data, function( type, value ) {
        $('<td class="input-'+type+'"></td>').html(value).appendTo(row);
    });
    $('.preview-table > tbody:last').append(row);
    calc_total(); 
}); 

O que eu preciso, é pegar os dados dessa "preview" e enviar para uma outra view, sei que tenho que enviar em JSON, mas como esses dados vão pra outra página, acredito que não pode ser em ajax, estou certo?

Alguém pode me ajudar a enviar esses dados para o PHP?

Muito Obrigado.

1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Maniero
    Commented 24/02/2017 às 19:24

3 Respostas 3

1

Aqui a solução do seus problemas :D

Javascript

$(document).on('click', 'ELEMENTO QUE SERA CLICADO', function() {
var formData = new FormData($('form')[0]);

$.ajax({
    url         : 'URL DO PHP QUE VAI PROCESSAR',
    method      : 'POST',
    data        : FormData,
    success: function (response) {
        console.log(response);
    }
})
.fail(function(response) {
    console.log(response);
});

});

PHP

<?php 
echo '<pre>';
print_r($_POST);
?>

Depure com isso que você conseguira.

0

Pelo que entendi, ao clicar Add você quer adicionar o item a uma tabela e mandar o dado pro servidor.

Dai ao clicar Enviar pedido, você quer ter acesso aos itens adicionados anteriormente.

Bom, para enviar os dados pro servidor, sugiro acrescentar o seguinte código ao final do evento que já existe:

$('.preview-add-button').click(function(){
    // ... (seu código já existente fica aqui)

    $.ajax({
        type: "POST",
        url: "sua_url_adiciona_item.php",
        data: {
            status: form_data.status,
            amount: form_data.amount
        },
        success: function (data) {
            console.log(data);
        },
        error: function (xhr, status, error) {
            console.log(status, error);
        },
        dataType: "json"
    });
});

No exemplo acima, sua_url_adiciona_item.php recebe os dados pelo $_POST, deveria acrescentá-los na sessão $_SESSION (ou no banco de dados se for o caso) e retornar um JSON como resposta informando se deu sucesso ou algum erro. Qualquer coisa, leia sobre json_encode.

Por fim, ao clicar Enviar pedido é só ler os dados que foram acrescentados na sessão (ou no banco de dados) e exibir os itens da forma como preferir.

0

Você pode criar um botão e enviar via post armazenando os valores num array conforme o exemplo abaixo:

$('.preview-add-button').click(function() {

var itens = [];
var form_data = {};
form_data["status"] = $('.payment-form #status option:selected').text();
form_data["amount"] = parseFloat($('.payment-form input[name="amount[]"]').val()).toFixed(2);
form_data["remove-row"] = '<span class="ico-cancel"></span>';
var row = $('<tr></tr>');

$.each(form_data, function( type, value ) {

      itens[type] = value;
    $('<td class="input-'+type+'"></td>')
      .html(value)
      .appendTo(row);
});
     var button = '<tr><td><input type="button" value="Salvar" id="salvar"></td></tr>';
     var dataTable = itens.join(","); //separa os valores por vírgula
     $('.preview-table > tbody:last')
        .append(row)
        .append(button);
 
 /* use o método [delegate] para reler todo o
    documento novamente e pegar a id:"salvar"
    recém-criada: */ 
  $(document).delegate('#salvar','click', function() {
      $.post('salvar_dados.php', {valores:dataTable}, function(e) {
          var m = jQuery.parseJSON(e);
        if (e.success) {
            alert(e.message);  
        }
   });
 calc_total();
}); 

E no php, após salvar os dados retorne uma resposta:

echo json_encode(array('success'=>1,'message'=>'Salvo com sucesso!'));

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .