6

Tenho o formulário a enviar/funcionar perfeito com os demais campos, porém não consigo receber as seleções do checkbox. Preciso de ajuda para receber/manipular no php:

O HTML:

<div class="input-group">
    <label for="servicos">NECESSITA EMBALAGENS?</label>

    <div class="checkbox">
        <label><input type="checkbox" value="1" name="servicos">Pelicula Aderente</label>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" value="2" name="servicos">Cartão Canelado</label>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" value="3" name="servicos">Caixa Cartão</label>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" value="4" name="servicos">Plástico Bolha</label>
    </div>
</div>

O .JS :

$(function() {
  $("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
      // additional error messages or events
    },
    submitSuccess: function($form, event) {
      event.preventDefault(); // prevent default submit behaviour
      // get values from FORM
      var nome = $("#nome").val();
      var email = $("#email").val();
      var telefone = $("#telefone").val();

      var origem = $("#origem").val();
      var destino = $("#destino").val();
      var data_prevista = $("#data_prevista").val();
      var plano = $("#plano").val();

      var arr = [];
      $("input:checkbox[name=servicos]:checked").each(function() {
        arr.push($(this).val());
      });

      var como = $("#como").val();

      var descricao = $("#descricao").val();

      var Nome = nome; // For Success/Failure Message
      // Check for white space in name for Success/Fail message
      if (Nome.indexOf(' ') >= 0) {
        Nome = nome.split(' ').slice(0, -1).join(' ');
      }
      $.ajax({
        url: "././mail/contact_me.php",
        type: "POST",
        dataType: 'json',
        data: {

          nome: nome,
          email: email,
          telefone: telefone,
          origem: origem,
          destino: destino,
          data_prevista: data_prevista,
          plano: plano,
          servicos: arr,
          como: como,
          descricao: descricao
        },
        cache: false,
        success: function(data) {
          if (data.error) {
            // Fail message
            $('#success').html("<div class='alert alert-danger'>");
            $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
            $('#success > .alert-danger').append("<strong>Prezado(a) " + Nome + ", algo não está certo. Por favor, tente novamente.");
            $('#success > .alert-danger').append('</div>');
            //clear all fields
            $('#orcamento').trigger("reset");
          } else if (data.success) {
            // Success message
            $('#success').html("<div class='alert alert-success'>");
            $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
            $('#success > .alert-success').append("<strong>Prezado(a) " + Nome + ", sua mensagem foi enviada. Nós entraremos em contato consigo!</strong>");
            $('#success > .alert-success').append('</div>');
            //clear all fields
            $('#orcamento').trigger("reset");
          }
        }
      })
    },
    filter: function() {
      return $(this).is(":visible");
    },
  });
});


/*When clicking on Full hide fail/success boxes */
$('#nome').focus(function() {
  $('#success').html('');
});

O PHP:

$nome = test_input($_POST['nome']);
$email = test_input($_POST['email']);
$telefone = test_input($_POST['telefone']);
$origem = test_input($_POST['origem']);
$destino = test_input($_POST['destino']);
$data_prevista = test_input($_POST['data_prevista']);
$plano = test_input($_POST['plano']);
$servicos = test_input($_POST['servicos']);
$como = test_input($_POST['como']);
$descricao = test_input($_POST['descricao']);

Creio que o código está tudo certo, tanto o html quanto o js. O problema é a recepção e criação da variável ou array (não percebo), no php. Ajudem-me?

2
  • 1 - não tem menhum id chamado "servicos" no seu html. 2 - identificar varias tags com id não funciona. id é unico, use class. 3 - Depois de pegar os valores corretamente por que não passar pelos dados do ajax corretamente? você pega os valores com a var servicos1 e joga no data como servicos?! 4 - por que não usar serialize? Commented 10/05/2016 às 20:23
  • Gabriel, sou designer a começar em programação web. Preciso de ajuda nessa parte.
    – Bruno Luz
    Commented 11/05/2016 às 12:35

2 Respostas 2

5

Vc pode obter valores de checkbox para enviar por ajax assim:

html:

<div class="input-group">
  <label for="servicos">NECESSITA EMBALAGENS?</label>

  <div class="checkbox">
   <label><input type="checkbox" name="servicos" value="Pelicula Aderente">Pelicula Aderente</label>
  </div>

  <div class="checkbox">
   <label><input type="checkbox" name="servicos" value="Cartão Canelado" checked="checked">Cartão Canelado</label>
  </div>

  <div class="checkbox">
   <label><input type="checkbox" name="servicos" value="Caixa Cartão">Caixa Cartão</label>
  </div>

  <div class="checkbox">
   <label><input type="checkbox" name="servicos" value="Plástico Bolha" checked="checked">Plástico Bolha</label>
  </div>
</div>

js:

var arr = [];

$("input:checkbox[name=servicos]:checked").each(function(){
    arr.push($(this).val());
});

arr.forEach(function(item) {
    console.log(item ? 'true' : 'false');
});

este é um exemplo de como pegar os valores. É só fazer desta forma e atribuir o valor na variável servicos por o array acima.

Ou seja, [] no final do name não é necessário. Se quiser ao invés de passar apenas os valores checados, também pode passar todos os valores. Para isso apenas retire o :checked da seleção.

Exemplo: https://jsfiddle.net/9os3e18u/

Editado para responder o comentário

Esta é a forma correta:

        (...)
        var destino = $("#destino").val();
        var data_prevista = $("#data_prevista").val();       
        var plano = $("#plano").val();

        // *** aqui vc obtem o array com os valores ***
        var arr = [];            
        $("input:checkbox[name=servicos]:checked").each(function(){
            arr.push($(this).val());
        });

        var como = $("value#como").val();

        var descricao = $("#descricao").val();

        var Nome = nome; // For Success/Failure Message
        // Check for white space in name for Success/Fail message
        if (Nome.indexOf(' ') >= 0) {
            Nome = nome.split(' ').slice(0, -1).join(' ');
        }
        $.ajax({
            url: "././mail/contact_me.php",
            type: "POST",
            dataType: 'json',
            data: {

                nome: nome,
                email: email,
                telefone: telefone,

                origem: origem,
                destino: destino,
                data_prevista: data_prevista,                 
                plano: plano,
                // *** aqui está atribuindo os valores obtidos aos dados passados ao servidor ***
                servicos: arr,

                como: como,

                descricao: descricao                   

            },
            cache: false,
            success: function(data) {
                if(data.error){
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
            (...)

Repare especialmente onde eu coloquei comentários entre ***. Foram os pontos onde o código foi alterado.

E seu HTML tbém tem um erro. Não é pra colocar um name diferente em cada um (servico1, servico2, etc). Name fica igual em todos. Se quiser identificar de forma única use o id. É pra ser assim:

<div class="input-group">
    <label for="servicos">NECESSITA EMBALAGENS?</label>

    <div class="checkbox">
        <label><input type="checkbox" value="Pelicula Aderente" name="servicos">Pelicula Aderente</label>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" value="Cartão Canelado" name="servicos">Cartão Canelado</label>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" value="Caixa Cartão" name="servicos">Caixa Cartão</label>
    </div>

    <div class="checkbox">
        <label><input type="checkbox" value="Plástico Bolha" name="servicos">Plástico Bolha</label>
    </div>
</div>

Dividindo a tag do jQuery que obtém os valores para vc entender melhor:

$("input:checkbox[name=servicos]:checked").each(function(){
    arr.push($(this).val());
});
  • input -> pegue todos os inputs
  • :checkbox -> do tipo checkbox
  • [name=servicos] -> cujo nome seja 'servicos'
  • :checked -> e estejam checados
  • .each(function(){ -> e para cada um deles
  • arr.push($(this).val()); -> insira o valor no array 'arr'

Compreendido melhor agora ? Recomendo que ao invés de vc usar o value de cada serviço como uma string (ex.:"Pelicula Aderente"), vc substitua por um valor numérico. Fica mais fácil de associar depois no seu banco.

Pode perguntar mais se quiser.

1
  • 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 18:39
0

Pelo que entendi, no método submitSuccess é o lugar no qual você irá recolher as informações do formulário e enviar para o php.

Vamos então passo a passo.

1 Passo - Pegar todos os campos.

var data = $("form").serialize();

2 Passo - Enviar para o php.

$.ajax({
  type: 'POST',
  url: 'arquivo.php',
  data: data,
  dataType: 'json',
  success: function() {

  },
  error: function(data) {

  }
});

3 Passo - Ler os campos no php

Quando você utiliza campos agrupados, como por exemplo serviços é interessante utilizar um array, portanto vou te mostrar as duas formas:

Como Array:

Motifique o name dos teus checkbox para:

<div class="checkbox">
  <label>
    <input type="checkbox" value="Pelicula Aderente" name="servico[]">Pelicula Aderente</label>
</div>

<div class="checkbox">
  <label>
    <input type="checkbox" value="Cartão Canelado" name="servico[]">Cartão Canelado</label>
</div>

E no php você pode ler asssim $_POST['servico'].

Da sua forma com o name servico1,servico2 e servico3. Teria que acessar cada variavel assim: $_POST['servico1'],$_POST['servico2'] etc...

2
  • E no php assim $_POST['servicos'] ou assim $_POST['servico'] ?
    – Bruno Luz
    Commented 11/05/2016 às 14:18
  • Gabriel, o js ficou bem mais enxuto, mas não avança quando tento enviar.
    – Bruno Luz
    Commented 11/05/2016 às 14:31

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 .