How to edit html table values by passing values to input type

Question

I have a table that has some values that whenever the edit button on that row gets clicked all of the values on that row get passed to the corresponding input tags so they can be edited.

This is my code:

$(document).ready(function() {

  //"use strict";
  cargarDatos();


  $('#frmContacto').submit(function(event) {
    event.preventDefault(); //Bloqueo de comportamiento por defecto de formulario
    guardarDatos();
    cargarDatos();
  });

  $('input').on('blur', function() {
    $(this).addClass('marcado');
    //alert(this.value);
  });

  $('.btnEditar').on('click', function(event) {
    event.preventDefault(); 

    //Here is where I call a function that is supposed to pass values to the inputs on my html page so I could update the values

  });

  $('#inputFoto').on('change', function(e) {
    precargarImagen(this);
  });

  $(window).load(function() {
    $(document).ready($('#efecto1').addClass('animacion1'));
    // $(document).ready($('#efecto2').addClass('animacion1'));
    // cargarDatos();
  });

});

/*jshint latedef:false */
function guardarDatos() {
  name = $('#inputNombre').val();
  direccion = $('#inputDireccion').val();
  telefono = $('#inputTelefono').val();
  fecha = $('#inputFecha').val();
  email = $('#inputEmail').val();
  color = $('#inputColor').val();
  dataFoto = $("#imgFoto").attr("src");
  /*alert("Sus datos son: \n" + nombre + "\n" 
  	+ direccion + "\n" + telefono + "\n" 
  	+ fecha + "\n" + email+ "\n" + color);*/

  contacto = {
    nombre: name,
    direccion: direccion,
    telefono: telefono,
    fecha: fecha,
    email: email,
    color: color,
    foto: dataFoto
  };

  contactos.push(contacto);
  console.log(JSON.stringify(contactos));

  localStorage.setItem('lstcontactos2', JSON.stringify(contactos));

}

/*jshint latedef:false */
function cargarDatos() {

  var data = localStorage.getItem('lstcontactos2');
  contactos = data && JSON.parse(data);
  if (contactos == null)
    contactos = new Array();

  $('#tablaContactos').bootstrapTable({
    data: contactos
  });


}

function btnEditar(value) {
  console.log("valueformat " + value);
  return '<a href="#' + value + '" class="btn btn-default btnEditar"><span class="glyphicon glyphicon-pencil"></span></a>';
}

function imgFoto(value) {
  return '<img id="imgFoto" src="' + value +
    '" style="width:auto;height:160px;">';
}


function precargarImagen(inputfile) {
  var file = inputfile.files[0];
  var imageType = /image.*/;

  if (file.type.match(imageType)) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var img = new Image();
      img.src = reader.result;
      $(".file-caption-name").html(file.name);
      $(".file-preview-frame").empty();
      $(".file-preview-frame").
      append('<img id="imgFoto" src="' + reader.result +
        '" style="width:auto;height:160px;">');
    };

    reader.readAsDataURL(file);
    inputfile.val(img.src);
  } else {
    alert("Archivo no soportando!");
  }
}

.marcado {
    color: #ff0000;
    border: 1px solid #0000ff;
}
.desmarcado {
    color: #00000;
    border: 0;
}


.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    opacity: 0;
    filter: alpha(opacity=0);
    opacity: 0;
    background: none repeat scroll 0 0 transparent;
    cursor: inherit;
    display: block;
}
.file-preview-frame {
    display: table;
    margin: 8px;
    height: 160px;
    width: 160px;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 5px 0px #a2958a;
    padding: 6px;
    float: left;
    text-align: center;
    vertical-align: middle;
    transition: all .4s ease-in-out;
}
.file-preview-frame:hover {
    box-shadow: 3px 3px 5px 0px #333;
    cursor: pointer;
    background-size: 150% 150%;
    transform: scale(2.2);
}

/* Shrink */

.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.hvr-shrink:hover,
.hvr-shrink:focus,
.hvr-shrink:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset=utf-8>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <title>Contactos</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css">
  <link rel="stylesheet" href="estilos.css" />
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/locale/bootstrap-table-es-AR.min.js"></script>
</head>

<body>
  <div class="container">
    <h1>Contactos personales</h1>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Listado</a>
        </div>
      </div>
    </nav>
    <div class="row show-grid">
      <div class="animacion1">
        <div class="col-sm-6">
          <table id="tablaContactos" class="table table-hover" data-toggle="table" data-search="true" data-row-style="rowStyle" data-show-refresh="true" data-show-toggle="true" data-show-columns="true">
            <thead>
              <tr>
                <th data-field="nombre" data-sortable="true">Nombre</th>
                <th data-field="direccion" data-sortable="true">Dirección</th>
                <th data-field="email" data-sortable="true">Email</th>
                <th data-field="fecha" data-sortable="true">Fecha</th>
                <th data-field="telefono" data-sortable="true" data-visible="false">Telefono</th>
                <th data-field="color" data-sortable="false" data-visible="false">Color</th>
                <th data-field="foto" data-sortable="false" data-formatter="imgFoto">Foto</th>
                <th data-field="email" data-formatter="btnEditar"></th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">Agregar/editar contacto</div>
          <div class="panel-body">
            <form class="form-horizontal" id="frmContacto">
              <div class="form-group">
                <label for="inputFoto" class="col-sm-2 control-label">Foto</label>
                <div class="col-sm-10">
                  <div class="file-preview-frame">
                    <img src="" style="width:auto;height:160px;">
                  </div>
                  <input type="file" class="form-control file" id="inputFoto" data-show-upload="false" required="true">
                </div>
              </div>

              <div class="form-group">
                <label for="inputNombre" class="col-sm-2 control-label">Nombre</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputNombre" placeholder="Ingrese nombre" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputDireccion" class="col-sm-2 control-label">Dirección</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="inputDireccion" required placeholder="Ingrese dirección personal">
                </div>
              </div>
              <div class="form-group">
                <label for="inputTelefono" class="col-sm-2 control-label">Telefono</label>
                <div class="col-sm-10">
                  <input type="number" class="form-control" id="inputTelefono" placeholder="Ingrese # telefónico" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputEmail" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail" placeholder="Ingrese Email" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputFecha" class="col-sm-2 control-label">Fecha de nacimiento</label>
                <div class="col-sm-10">
                  <input type="date" class="form-control" id="inputFecha" placeholder="Ingrese su fecha de nacimiento" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputColor" class="col-sm-2 control-label">Color favorito</label>
                <div class="col-sm-10">
                  <input type="color" class="form-control" id="inputColor">
                </div>
              </div>
              <div class="form-group">
                <label for="inputURL" class="col-sm-2 control-label">Página Web</label>
                <div class="col-sm-10">
                  <input type="url" class="form-control" id="inputURL" placeholder="Ingrese su página web">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary" id="btnGuardar">Guardar OK</button>
                  <button type="button" class="btn btn-default">Cancelar</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

How can I do this with jquery or is there a better way of doing this? and also whenever I click the btnGuardar submit button how can I update table without having to refresh the page to see the new added values?

Answer 1

This is my second answer on this question. It have the same structure as the earlier answer but this one picks up all fields on the same row (wich have the same class) at once.

function edit(key) {
var x = document.getElementsByClassName("prow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}  
var x = document.getElementsByClassName("inputrow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "initial";
}
document.getElementById('inputA' + key ).value = document.getElementById('pA' + key ).innerHTML;  
document.getElementById('inputB' + key ).value = document.getElementById('pB' + key ).innerHTML;
document.getElementById('inputC' + key ).value = document.getElementById('pC' + key ).innerHTML;
}


function save(key) {
var x = document.getElementsByClassName("prow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "initial";
}  
var x = document.getElementsByClassName("inputrow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}
document.getElementById('pA' + key ).innerHTML = document.getElementById('inputA' + key ).value;
document.getElementById('pB' + key ).innerHTML = document.getElementById('inputB' + key ).value;
document.getElementById('pC' + key ).innerHTML = document.getElementById('inputC' + key ).value;
}

*{
font-family: Arial, Helvetica, sans-serif;
}

p {
margin:0px;
}

input[type=text] {
  display:none;
  height:12px;
  width:45px;
}

table, th, td {
  border: 2px solid darkslategray ;
  background:darkseagreen ;
  border-collapse: collapse;
  margin:0px;
  padding:0px;
}

<table>
<form id=formA>
<tr>
<td>
<p id=pA1 class=prow1>value 1</p><input id=inputA1 type="text" name="A" class=inputrow1 value="value 1"></td>
<td><p id=pB1 class=prow1>value 2</p><input id=inputB1 type="text" name="B" class=inputrow1 value="value 2">  
</td>
<td><p id=pC1 class=prow1>value 3</p><input id=inputC1 type="text" name="C" class=inputrow1 value="value 3">  
</td>
<td><button type="button" onclick="edit(1)">edit</button><button type="button" onclick="save(1)">save</button>
</td>
</tr>
  
<tr>
<td>
<p id=pA2 class=prow2>value 1</p><input id=inputA2 type="text" name="D" class=inputrow2 value="value 1"></td>
<td><p id=pB2 class=prow2>value 2</p><input id=inputB2 type="text" name="E" class=inputrow2 value="value 2">  
</td>
<td><p id=pC2 class=prow2>value 3</p><input id=inputC2 type="text" name="F" class=inputrow2 value="value 3">  
</td>
<td><button type="button" onclick="edit(2)">edit</button><button type="button" onclick="save(2)">save</button>
</td>
</tr>

<tr>
<td colspan=4>
<input type="submit" value="Submit" style="width:100%;">
</td>
</tr>
</form>
</table>

Answer 2

This line gets the text from an element and stores it in the variable y:
var y = document.getElementById('text id').innerHTML;

This line places the value stored in the y variable on the edit box:
document.getElementById('input text id').value = y;

Here it comes a working example:

function edit(key) {
document.getElementById('p' + key).style.display = "none"; 
document.getElementById('input' + key).style.display = "initial";   
var yy  = document.getElementById('p' + key).innerHTML;
document.getElementById('input' + key).value = yy;
}

function save(key) {
document.getElementById('p' + key).style.display = "initial";
document.getElementById('input' + key).style.display = "none"; 
var xx = document.getElementById('input' + key).value;
document.getElementById('p' + key).innerHTML = xx; 
}

*{
font-family: Arial, Helvetica, sans-serif;
}

p {
margin:0px;
}

input[type=text] {
  display:none;
  height:12px;
  width:40px;
}

table, th, td {
  border: 2px solid tomato;
  background:gold;
  border-collapse: collapse;
  margin:0px;
  padding:0px;
}

<table>
<form id=formA>
<tr>
<td>
<p id=pA>value 1</p><input id=inputA type="text" name="A" value="value 1"></td><td><p id=pB>value 2</p><input id=inputB type="text" name="B" value="value 2">
</td>
</tr>  
<tr>
<td>
<button type="button" onclick="edit('A')">edit 1</button><button type="button" onclick="save('A')">save 1</button></td>
<td><button type="button" onclick="edit('B')">edit 2</button><button type="button" onclick="save('B')">save 2</button>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Submit" style="width:100%;">
</td>
</tr>
</form>
</table>

Answer 3

This would be comment but I can't add a comment yet.

It may be a good idea to look at an MVVM library such as:

• http://knockoutjs.com/
• https://angularjs.org/
• http://vuejs.org/

If you're new to the idea of MVVM I would recommend looking at knockout, although it is probably the more complex option the tutorials are excellent: http://learn.knockoutjs.com/