-1

Lo que quiero es que input1, que tiene un name y un id de valor 1, al pulsar el botón de añadir, se añada otro input pero con name e id de valor 2.

        window.onbeforeunload = confirmExit;
window.onbeforeunload = confirmExit;

function confirmExit() {
  return "Ha intentado salir de esta pagina. Si ha realizado algun cambio en los campos sin hacer clic en el boton Guardar, los cambios se perderan. Seguro que desea salir de esta pagina? ";
}

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(2);
    var cell2 = row.insertCell(0);
    var input1 = document.createElement("textarea");
    input1.rows = "4";
    input1.cols = "170";
    input1.name = "1";
    input1.id = "1";
    var campo4 = document.createElement("input");
    campo4.type = "button";
    campo4.value = "Borrar";
    campo4.onclick = function() {
      var fila = this.parentNode.parentNode;
      var tbody = table.getElementsByTagName("tbody")[0];
      tbody.removeChild(fila);
    }
    cell2.appendChild(input1);
    cell2.appendChild(campo4);
}

function vaciar_campo(input1) {
  input1.value = "";
}

function myCreateFunction2() {
  var table = document.getElementById("myTable2");
  var row = table.insertRow(2);
  var cell2 = row.insertCell(0);
  var input2 = document.createElement("textarea");
  input2.rows = "4";
  input2.cols = "170";
  input2.name = "20";
  input2.id = "20";
  var campo4 = document.createElement("input");
  campo4.type = "button";
  campo4.value = "Borrar";
  campo4.onclick = function() {
    var fila = this.parentNode.parentNode;
    var tbody = table.getElementsByTagName("tbody")[0];
    tbody.removeChild(fila);
  }
  cell2.appendChild(input2);
  cell2.appendChild(campo4);
}

function vaciar_campo(input2) {
  input2.value = "";
}

function myCreateFunction3() {
  var table = document.getElementById("myTable3");
  var row = table.insertRow(2);
  var cell2 = row.insertCell(0);
  var input3 = document.createElement("textarea");
  input3.rows = "4";
  input3.cols = "170";
  input3.name = "30";
  input3.id = "30";
  var campo4 = document.createElement("input");
  campo4.type = "button";
  campo4.value = "Borrar";
  campo4.onclick = function() {
    var fila = this.parentNode.parentNode;
    var tbody = table.getElementsByTagName("tbody")[0];
    tbody.removeChild(fila);
  }
  cell2.appendChild(input3);
  cell2.appendChild(campo4);
}

function vaciar_campo(input3) {
  input.value = "";
}

function myCreateFunction4() {
  var table = document.getElementById("myTable4");
  var row = table.insertRow(2);
  var cell2 = row.insertCell(0);
  var input4 = document.createElement("textarea");
  input4.rows = "4";
  input4.cols = "170";
  input4.name = "40";
  input4.id = "40";
  var campo4 = document.createElement("input");
  campo4.type = "button";
  campo4.value = "Borrar";
  campo4.onclick = function() {
    var fila = this.parentNode.parentNode;
    var tbody = table.getElementsByTagName("tbody")[0];
    tbody.removeChild(fila);
  }
  cell2.appendChild(input4);
  cell2.appendChild(campo4);
}

function vaciar_campo(input4) {
  input.value = "";
}
<form name="formulario" id="formulario" action="creador.php">
  <table id="myTable" border="3" width="100%">
    <tr>
      <td>
        <h1>
          Tesis Doctoral
        </h1>
      </td>
    </tr>
    <tr>
      <td>
        <textarea name="Tesis" id="Tesis" rows="4" cols="170"></textarea>
        <button onclick="myCreateFunction()" type="button" name="Tesis2" id="Tesis2">
                                        Añadir
                                    </button>
      </td>
    </tr>
  </table>

  <table id="myTable2" border="3" width="100%">
    <tr>
      <td>
        <h1>
          Subvenciones
        </h1>
      </td>
    </tr>
    <tr>
      <td>
        <textarea name="Subvenciones" id="Subvenciones" rows="4" cols="170"></textarea>
        <button onclick="myCreateFunction2()" type="button" name="Subvenciones2" id="Subvenciones2">
                                        Añadir
                                    </button>
      </td>
    </tr>
  </table>

  <table id="myTable3" border="3" width="100%">
    <tr>
      <td>
        <h1>
          Otra informacion
        </h1>
      </td>
    </tr>
    <tr>
      <td>
        <textarea name="Otrainfo" id="Otrainfo" rows="4" cols="170"></textarea>
        <button onclick="myCreateFunction3()" type="button" name="Otrainfo2" id="Otrainfo2">
                                        Añadir
                                    </button>
      </td>
    </tr>
  </table>

  <table id="myTable4" border="3" width="100%">
    <tr>
      <td>
        <h1>
          Actualidad
        </h1>
      </td>
    </tr>
    <tr>
      <td>
        <textarea name="Actualidad" id="Actualidad" rows="4" cols="170"></textarea>
        <button onclick="myCreateFunction4()" type="button" name="actualidad2" id="actualidad2">
                                        Añadir
                                    </button>
      </td>
    </tr>
  </table>
  <br>
  <br>
  <br>
  <center>
    <input type="submit" value="Enviar">
  </center>
</form>
</BODY>
</HTML>

2
  • quieres que input1 tenga el nombre que tu quieras?
    – lois6b
    Commented el 20 mar. 2017 a las 12:21
  • Lo que quiero es que input1, que tiene un name y un id de valor 1, al pulsar el botón de añadir, se añada otro cuadro pero con name e id de valor 2 Commented el 20 mar. 2017 a las 12:23

2 respuestas 2

1

Reduje tu ejemplo al caso mínimo, con una sola tabla. El caso con N tablas es trivial.

Declaro una variable table1_inputs de valor 0 por fuera de la función que añade inputs. Cuando añado un nuevo input con myCreateFunction incremento table1_inputs en 1. El name y ID del elemento agregado salen del valor que table1_inputs tenga en ese momento.

Para el ejemplo le puse prefijo 'name' y 'id' respectivamente así que tus inputs tendrían nombres y ids del tipo 'name1','id1' y luego 'name2', 'id2', etc

var table1_inputs=0; // Este es mi contador

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(2);
    var cell2 = row.insertCell(0);
    var input1 = document.createElement("textarea");
    input1.rows = "4";
    input1.cols = "170";

    table1_inputs++; // incremento el contador

    input1.name = 'name'+table1_inputs;
    input1.id = 'id'+table1_inputs;

    var campo4 = document.createElement("input");
    campo4.type = "button";
    campo4.value = "Borrar";
    campo4.onclick = function() {
      var fila = this.parentNode.parentNode;
      var tbody = table.getElementsByTagName("tbody")[0];
      tbody.removeChild(fila);
    }
    cell2.appendChild(input1);
    cell2.appendChild(campo4);
}

function vaciar_campo(input1) {
  input1.value = "";
}
<form name="formulario" id="formulario" action="creador.php">
  <table id="myTable" border="3" width="100%">
    <tr>
      <td>
        <h1>
          Tesis Doctoral
        </h1>
      </td>
    </tr>
    <tr>
      <td>
        <textarea name="Tesis" id="Tesis" rows="4" cols="170"></textarea>
        <button onclick="myCreateFunction()" type="button" name="Tesis2" id="Tesis2">
           Añadir
        </button>
      </td>
    </tr>
  </table>

  <center>
    <input type="submit" value="Enviar">
  </center>
</form>

1
  • Eternamente agradecido compañero, no sabes el problema de cabeza que me ha dado este caso y me lo solucionas en nada, muchas gracias (: Commented el 20 mar. 2017 a las 13:02
0

Deberías hacer algo así para generar inputs dinamicamente:

var btnElem = document.getElementById('btnAgregar');
var index = -1;
btnElem.onclick = function(evt) {
  index++;
  var divAgreg = document.getElementById('divAgregarInputs');
  divAgreg.innerHTML = divAgreg.innerHTML + '<input id="' + index + '" type="text" value="' + index + '" /><br />';
}
<input id="btnAgregar" type="button" value="Agregar" />
<div id="divAgregarInputs">
</div>

1
  • Eternamente agradecido a ti también compañero, tendré en cuenta tu propuesta, de todas maneras gracias por contestar tan rápido y sacarme del apuro (: Commented el 20 mar. 2017 a las 13:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.