How do I send data from a html table to POST form?

Question

How do I send data from a html table to POST form?

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I have a form that contains a list inside a table tag, how do I send data from this table to the POST of the form itself? Without using hidden inputs. If possible in pure Javascript, but if there is no way it could be in JQuery.

javascript html jquery post table

asked by anonymous 08.06.2016 / 18:09

2 answers

How to get a Promise value in JavaScript / TypeScript? jQuery with Internet Explorer

score 2 · Answer 1

See here in the console, in jsfiddle. This will get the entire table in a ready-to-send query string:

Note that you must adjust the keys (date-field) of each one, not to be repeated

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>

Note that you must set the keys ( data-campo ) of each to not be repeated

EXAMPLE in jsfiddle

score 2 · Answer 2

This gives you an idea of how it works. What I did was to take advantage of the data attributes and I inserted the buttons to then go search with 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>

EXAMPLE in jsfiddle