1

Por así decirlo, así tengo estructurado todo: Aquí va la página web con los textarea fijos y los que se pueden generar.

 <script language="JavaScript">
       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? ";
        }
        var table1_inputs=0;
        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++;
                input1.name= 'name1'+table1_inputs;
                input1.id = 'id1'+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 = "";
        }
        var table2_inputs=0;
        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";
                table2_inputs++;
                input2.name = 'name2'+table2_inputs;
                input2.id = 'id2'+table2_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(input2);
            cell2.appendChild(campo4);
        }

        function vaciar_campo(input2)
        {
            input2.value = "";
        }
        var table3_inputs=0;
        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";
                table3_inputs++;
                input3.name = 'name3'+table3_inputs;
                input3.id = 'id3'+table3_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(input3);
            cell2.appendChild(campo4);
        }

        function vaciar_campo(input3)
        {
            input.value = "";
        }
        var table4_inputs=0;
        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";
                table4_inputs++;
                input4.name = 'name4'+table4_inputs;
                input4.id = 'id4'+table4_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(input4);
            cell2.appendChild(campo4);
        }

        function vaciar_campo(input4)
        {
            input.value = "";
        }
    </script>
</HEAD>
<BODY>
    <form name="formulario" id="formulario" action="creador.php" method="post" width="30%">
        <table id="tablafecha" border="3" width="100%">
                    <tr>
                        <td>
                            <h1>
                                Fecha y número
                            </h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fecha: <input type="text" name="fecha" id="fecha">
                            <br>
                            Número: <input type="number" name="numero" id="numero">
                        </td>
                    </tr>
                </table>
        <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>

Este es el código de la página que recoge el contenido de los textarea (de acuerdo a lo que me has explicado).

<?php var_dump( $_POST );
  $post = [];
   if( !empty( $_POST ) ) {
  $post = $_POST;
 }
 ?>

 var datos ="<?php foreach( $post as $key => $value ): ?><?php echo $value; ?><?php endforeach; ?>";
 var datos2 ="<?php echo $_POST['Subvenciones']; ?>";
 var datos3 ="<?php echo $_POST['Otrainfo']; ?>";
 var datos4 ="<?php echo $_POST['Actualidad']; ?>";
 var fecha ="<?php echo $_POST['fecha']; ?>";
 var numero ="<?php echo $_POST['numero']; ?>";
 var ventanaHTML = window.open("about:blank", "_blank");

 ventanaHTML.document.writeln(Aquí va una página web la cual posee estilos y le inserto en sus correspondientes lugares, donde quiero que aparezca el contenido que he recogido)

El resultado dentro de la página web vendría a ser:

Tesis doctoral

  • Información escrita en el textarea fijo llamado Tesis
  • Información escrita en el textarea generado a base del botón (name11)
  • Información escrita en el textarea generado a base del botón (name12)
  • Subvenciones

  • Información escrita en el textarea fijo llamado Subvenciones
  • Información escrita en el textarea generado a base del botón (name21)
  • Información escrita en el textarea generado a base del botón (name22)
  • ¿Que problemas me ocurren? La información que recojo se me repite tanto en Tesis como en Subvenciones. Se crean más li de los que deberían, teniendo en cuenta que lo li los genera javascript.

    EDITADO 3

    Y si por ejemplo quisiera que el array creado no se junte con el primero de cada sección ¿como lo haría?. Por ejemplo el campo ya creado es tesis pero el array quiero que sea con el id, name otesis. He estado probando y no me sale.

    5
    • La variable $_POST trae todo lo enviado del formulario. En php deberías de iterar el arraypara obtener los datos. Si necesitas enviar esos datos de nuevo a la vista en una variable de javascript, json puede ser una buena opción.
      – OscarR
      el 22 mar. 2017 a las 9:04
    • La idea es que ellos introduzcan unos datos en el textarea fijo (de nombre Tesis) y si quieren añadir mas datos, al pulsar el botón se generen otros textarea (name1X). Al pulsar el botón, se envíen y se reciban en PHP, enseñando así esos datos en una página web. No sé si me he explicado bien. el 22 mar. 2017 a las 9:07
    • 1
      Si si, si lo he entendido, y una forma de hacerlo en como he comentado. $_POST['Tesis'] solo obtiene el valor de ese input, para obtener el resto sin conocer los nombres generados ni el número de elementos, puedes iterar el array $_POST mediante foreach por ejemplo. El tratamiento posterior para mostrar los datos ya depende de tus necesidades. ¿Cual es el error, que no llegan? Puedes probar con var_dump($_POST) para ver que datos te llegan del formulario.
      – OscarR
      el 22 mar. 2017 a las 9:15
    • Si lo he entendido bien, creo que quieres que ponga esto ¿en la parte de código que recupero los valores? Corrígeme si me equivoco, ya que llevo varios días pensándolo y la verdad, me considero novato en esto. <script type="text/javascript"> <?php foreach (Tesis as $_POST); ?> var datos ="<?php echo $_POST; ?>"; el 22 mar. 2017 a las 9:25
    • Porque en el código donde recupero los valores si escribo lo siguiente si que me lo acepta var datos ="<?php echo $_POST['Tesis'] ?>, <?php echo $_POST['name11'] ?>"; Pero claro, esta manera yo le estoy asignado los nombres de los textarea y no puedo saber con exactitud cuantos van a coger el 22 mar. 2017 a las 9:55

    1 respuesta 1

    1

    Con información suelta nos liamos.

    Esta es una adaptación rápida de lo que tienes para ver los datos que envía el formulario y presentarlos en el navegador. Es una base para trabajar y seguir desarrollando tu idea.

    La primera parte obtiene los datos del formulario y usa var_dumppara dar salida "visual" en el navegador al los datos que se reciben.

    A continuación se comprueba si $_POST contiene valores y los asigna a una variable para tratarlo después con foreach, el iterador que comentaba.

    A raíz de la pregunta y los comentarios, creo que da respuesta, o al menos se muestra con más claridad que hay detrás de un envío de un formulario y los datos clave/valor que necesitas para continuar desarrollando.

    Espero sirva de ayuda y cualquier cosa al respecto, comentario y continuamos.

    Nombre del archivo - 57053.php

    <?php
    /**
     * Permite ver los datos enviados por el formulario
     * para observar posibles errores en el desarrollo
     */
    var_dump( $_POST );
    $post = [];
    // si $_POST tiene valores se le asigna a una variable
    // para tratarla en el foreach
    if( !empty( $_POST ) ) {
        $post = $_POST;
    }
    ?>
    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>57053</title>
    </head>
    <body>
    
    <!-- cambiar el action por el destino de procesamiento -->
    <form action="57053.php" method="POST">
        <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>
                </td>
            </tr>
        </table>
        <!-- crear nuevos campos textarea -->
        <button onclick="myCreateFunction()" type="button" name="Tesis2" id="Tesis2">Añadir</button>
        <!-- envia el formulario -->
        <input type="submit" value="Enviar">
    </form>
    
    <table border="3" width="100%">
        <tr>
            <td>Nombre textarea</td><td>Valor textarea</td>
        </tr>
        <!-- iteramos el contenido -->
        <?php foreach( $post as $key => $value ): ?>
        <tr>
            <td><?php echo $key; ?></td><td><?php echo $value; ?></td>
        </tr>
        <?php endforeach; ?>
    </table>
    
    <script type="text/javascript">
    var table1_inputs = 0;
    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++;
        input1.name    = 'name1' + table1_inputs;
        input1.id      = 'id1' + 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);
    }
    </script>
    </body>
    </html>
    

    Sobre el comentario de usar las etiquetas <li>. Se puede perfectamente. Cambiando lo que rodea las variables que necesitas.

    <?php foreach( $post as $key => $value ): ?>
        <li><?php echo $value; ?></li>
    <?php endforeach; ?>
    

    A tener en cuenta eso de la repetición, si lo asignas a una variable javascript sin ningún formato o estructura te aparecerá como un texto continuo. Al igual que los <li> deberías darle la estructura que quieras para obtener el resultado deseado.

    Editado 2

    Con respecto al orden, se pueden separar en categorías ya que las tienes bien definidas. Tesis, subvenciones, otra información...

    De igual forma, se trata de aislar cada categoría en un array distinto.

    Para comenzar, hay que hacer algunos ajustes en los nombres y los id de las tablas y textarea. Así como en la función javascript que se encarga de crear nuevos elementos. La modificación es bastante básica para no tener funciones duplicadas.

    Una vez tienes las categorías separadas en distintas variables, puedes gestionarlas como quieras.

    <?php
    /**
     * Permite ver los datos enviados por el formulario
     * para observar posibles errores en el desarrollo
     */
    //var_dump( $_POST );
    $post = [];
    // si $_POST tiene valores se le asigna a una variable
    // para tratarla en el foreach
    if( !empty( $_POST ) ) {
        $post = $_POST;
    }
    // separa el array por las key de la misma categoría
    $tesis        = array_intersect_key( $post, array_flip( preg_grep( '/^tesis[0-9]*/i', array_keys( $post ) ) ) );
    $subvenciones = array_intersect_key( $post, array_flip( preg_grep( '/^subvenciones[0-9]*/i', array_keys( $post ) ) ) );
    $otrainfo     = array_intersect_key( $post, array_flip( preg_grep( '/^otrainfo[0-9]*/i', array_keys( $post ) ) ) );
    $actualidad   = array_intersect_key( $post, array_flip( preg_grep( '/^actualidad[0-9]*/i', array_keys( $post ) ) ) );
    //var_dump( $post['fecha'], $post['numero'], $tesis, $subvenciones, $otrainfo, $actualidad );
    ?>
    <!DOCTYPE html>
        <html lang="es">
        <head>
            <meta charset="UTF-8">
            <title>57053</title>
        </head>
        <body>
    
        <form name="formulario" id="formulario" action="57053-2.php" method="post" width="30%">
            <table id="tablafecha" border="3" width="100%">
                <tr>
                    <td><h1>Fecha y número</h1>
                    </td>
                </tr>
                <tr>
                    <td>Fecha: <input type="text" name="fecha" id="fecha"><br>
                        Número: <input type="number" name="numero" id="numero">
                    </td>
                </tr>
            </table>
    
            <table id="tesisTable" 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="addTextarea('tesisTable', 'tesis')" type="button" name="tesis2" id="tesis2">Añadir</button>
                    </td>
                </tr>
            </table>
    
            <table id="subvencionesTable" 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="addTextarea('subvencionesTable', 'subvenciones')" type="button" name="subvenciones2" id="subvenciones2">Añadir</button>
                    </td>
                </tr>
            </table>
    
            <table id="otrainfoTable" 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="addTextarea('otrainfoTable', 'otrainfo')" type="button" name="otrainfo2" id="otrainfo2">Añadir</button>
                    </td>
                </tr>
            </table>
    
            <table id="actualidadTable" 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="addTextarea('actualidadTable', 'actualidad')" type="button" name="actualidad2" id="actualidad2">Añadir</button>
                    </td>
                </tr>
            </table>
            <br>
            <br>
            <br>
            <center>
                <input type="submit" value="Enviar">
            </center>
        </form>
    
        <!-- iteramos el contenido -->
        <div>
            <h5>Tesis doctoral</h5>
            <ul>
                <?php foreach( $tesis as $key => $value ): ?>
                    <li><?php echo $value; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <div>
            <h5>Suvbenciones</h5>
            <ul>
                <?php foreach( $subvenciones as $key => $value ): ?>
                    <li><?php echo $value; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <div>
            <h5>Otra información</h5>
            <ul>
                <?php foreach( $otrainfo as $key => $value ): ?>
                    <li><?php echo $value; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
        <div>
            <h5>Actualidad</h5>
            <ul>
                <?php foreach( $actualidad as $key => $value ): ?>
                    <li><?php echo $value; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    
        <script language="JavaScript">
            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? ";
            }
    
            var table_inputs = 0;
            function addTextarea(id, name) {
                var table     = document.getElementById(id);
                var row       = table.insertRow(2);
                var cell      = row.insertCell(0);
                var input     = document.createElement("textarea");
                table_inputs++;
                input.rows    = "4";
                input.cols    = "170";
                input.name    = name + table_inputs;
                input.id      = id + table_inputs;
                var campo     = document.createElement("input");
                campo.type    = "button";
                campo.value   = "Borrar";
                campo.onclick = function () {
                    var fila  = this.parentNode.parentNode;
                    var tbody = table.getElementsByTagName("tbody")[0];
                    tbody.removeChild(fila);
                }
                cell.appendChild(input);
                cell.appendChild(campo);
            }
    
            function vaciar_campo(input1) {
                input1.value = "";
            }
        </script>
    </body>
    </html>
    
    10
    • Eternamente agradecido compañero, simplemente magnífico lo que me has ayudado. El código que finalmente he puesto ha sido el siguiente: <?php var_dump( $_POST ); $post = []; if( !empty( $_POST ) ) { $post = $_POST; } ?> <script type="text/javascript"> var datos ="<?php foreach( $post as $key => $value ): ?><?php echo $value; ?> <?php endforeach; ?>";</script> Una última duda para acabar, se podría ordenar/separar por mediante la etiqueta <li>? el 22 mar. 2017 a las 10:40
    • Aunque también ahora probando el código me he dado cuenta que me coge todos los valores el 22 mar. 2017 a las 10:46
    • Solucionada la parte de que coja todo con esta línea de código: var datos ="<?php foreach(array_slice($post, $num) as $key => $value ): ?><?php echo $value; ?><?php endforeach; ?>"; Ahora mi cuestión es, ¿como puedo ordenarlos mediante <li>? el 22 mar. 2017 a las 11:02
    • @OscarSanclemente He editado la respuesta con un ejemplo para los <li>pero es muy básico y creo que buscas otra cosa ¿no? Si quieres, edita tu pregunta, con un ejemplo de como quieres que quede el resultado final del <li> y quién construye esa lista, php o javascript.
      – OscarR
      el 22 mar. 2017 a las 11:11
    • he editado la pregunta añadiendo un ejemplo de como queda el resultado final del li y también de un problema nuevo que me acabo de dar cuenta, siento las molestias. el 22 mar. 2017 a las 11:19

    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.