1

Tenho um formulário que contém uma lista dentro de uma tag table, como faço para enviar os dados dessa table no próprio POST do formulário? Sem utilizar inputs ocultos. Se possível em Javascript puro, mas se não tiver jeito poderia ser em JQuery.

1
  • Coloque o código do formulário na pergunta, se possível...
    – Vinícius
    8/06/2016 às 16:17

2 Respostas 2

2

Veja por aqui na consola, no jsfiddle. Desta maneira vai ter toda a tabela numa query string (clicar para enviar) pronta a enviar:

NOTA que deve ajustar as keys (data-campo) de cada um, para não serem repetidas

var table = document.getElementById("mytab1");
var toPost = [];
var toPush = {};
for (var i = 0, row; row = table.rows[i]; i++) {
   toPush = {};
   for (var j = 0, col; col = row.cells[j]; j++) {
     toPush[row.cells[j].dataset.campo] = row.cells[j].innerHTML.trim();
   }
   toPost.push(toPush)
}
console.log(toPost);

var send = document.getElementById('enviar');
send.addEventListener('click', function() {
   queryString = '';
   for(var i in toPost) {
      for(var key in toPost[i])
      queryString += key + '=' + toPost[i][key] + '&';
  }
  queryString = queryString.slice(0, queryString.length - 1);
  console.log(queryString);
 enviar(queryString);
});

function enviar(toPost) {
	var http = new XMLHttpRequest();
  var url = "url.php";
  
  http.open("POST", url, true);
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
          alert(http.responseText);
      }
      else if (http.status == 404) {
      	alert('not found');
      }
      else if(http.status >= 500) {
      	alert('brrh');
      }
  }
  http.send(toPost);
}
<table id="mytab1">
<tr>
  <td data-campo="nome">
    nome1
  </td>
  <td data-campo="email">
    email1
  </td>
  <td data-campo="endereco">
    endereço1
  </td>
</tr>
<tr>
 <td data-campo="nome">
    nome2
  </td>
  <td data-campo="email">
    email2
  </td>
  <td data-campo="endereco">
    endereço2
  </td>
</tr>
<tr>
  <td data-campo="nome">
    nome3
  </td>
  <td data-campo="email">
    email3
  </td>
  <td data-campo="endereco">
    endereço3
  </td>
</tr>

</table>

<button id="enviar">
enviar
</button>

NOTA que deve ajustar as keys (data-campo) de cada um, para não serem repetidas

EXEMPLO no jsfiddle

1
  • Este é para toda a tabela. O outro é para a linha só
    – Miguel
    8/06/2016 às 20:45
2

Isto dá uma ideia de como funciona. O que fiz foi aproveitar os atributos data e inseri nos botões para depois ir buscar com javascript:

var editBtns = document.querySelectorAll('.edit');
for(var i=0;i<editBtns.length;i++){
	editBtns[i].addEventListener('click', function() {
    var toPost = {};
    for(var key in this.dataset) {
        toPost[key] = this.dataset[key];
    }
    var queryString = '';
    for(key in toPost) {
        queryString += key + '=' + toPost[key] + '&';
    }
    queryString = queryString.slice(0, queryString.length - 1);
    console.log(queryString);
    enviar(queryString)
  });
}

function enviar(params) {
	var http = new XMLHttpRequest();
  var url = "url.php";
  
  http.open("POST", url, true);
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.onreadystatechange = function() {
      if(http.readyState == 4 && http.status == 200) {
          alert(http.responseText);
      }
      else if (http.status == 404) {
      	alert('not found');
      }
      else if(http.status >= 500) {
      	alert('brrh');
      }
  }
  http.send(params);
}
<table>
<tr>
  <td>
    nome1
  </td>
  <td>
    email1
  </td>
  <td>
    endereço1
  </td>
  <td><button class="edit" data-endereco="endereco1" data-email="email1" data-nome="nome1" class="btn btn-xs btn-primary">Enviar</button>
</tr>
<tr>
 <td>
    nome2
  </td>
  <td>
    email2
  </td>
  <td>
    endereço2
  </td>
  <td><button class="edit" data-endereco="endereco2" data-email="email2" data-nome="nome2">Enviar</button>
</tr>
<tr>
  <td>
    nome3
  </td>
  <td>
    email3
  </td>
  <td>
    endereço3
  </td>
  <td><button class="edit" data-endereco="endereco3" data-email="email3" data-nome="nome3" class="btn btn-xs btn-primary">Enviar</button>
  </td>
</tr>

</table>
<br>

EXEMPLO no jsfiddle

7
  • Usando dataattributes já é mais limpo, mas não tem uma forma mais direta? Por exemplo, jogar os dados na querystring do POST? 8/06/2016 às 17:11
  • Tem sempre de enviar os dados, pode ser com o submit normal do form como tenho aí, ou via ajax
    – Miguel
    8/06/2016 às 17:13
  • Quero dizer jogar da tabela para a querystring direto, sem utilizar inputs, pelo que entendi aí você joga para os inputs e os valores dos inputs vão no submit, certo? 8/06/2016 às 18:04
  • a tabela toda? Dessa maneira só com ajax
    – Miguel
    8/06/2016 às 18:05
  • Coloquei uma nova resposta em baixo
    – Miguel
    8/06/2016 às 18:20

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 .