Problema con javascript: Document.write me tiene mania!!!!!

[z3nth10n]

Una cosa, tengo que escapar unas cosillas, pero no van 

<option value=\"<object type=\"application/x-shockwave-flash\" data=\"" + value + "\" width=\"550\" height=\"400\"><param name=\"movie\" value=\"" + value + "\" /><param name=\"quality\" value=\"high\" /><\/object>\">Flash</option><option value=\"<APPLET CODE=\"" + value + "\" WIDTH=\"ancho\" HEIGHT=\"alto\"></APPLET>\">Java</option>

Pero nada, que no se como, he probado con \ y separando el / del > así: / > pero nada.

[#!drvy]

Supongo que todo eso lo vas a guardar en una base de datos verdad ? Puesto que lo único que necesitas de ahí, es el value, ¿ no seria mas logico que guardaras solo el value y luego ya añadir el applet ?

Osease, guardas solo el value, y luego cuando lo vayas a imprimir, imprimes todo eso y le agregas value. Créeme, te va a hacer la vida mas fácil y te vas a evitar muchos problemas de seguridad.

Saludos

[z3nth10n]

Pero, a ver, lo voy a meter todo como una variable... Así que no ser como añado esa variable, como?

A ver explica xD Es que no entiendo muy bien... 

[#!drvy]

A ver.. esto es complicado de explicar xD Te voy a mostrar un ejemplo que creo que te servirá mejor.

A ver, te lo planteo asi. Porque necesitas escribir guardar 3 veces el link del juego (en el input, en el select y en el textarea) cuando con 1 sola ya te vale ?. Miralo asi, tu haces que el select solo tenga el tipo de juego y luego en con PHP te encargas del resto. Te explico.

Imaginate que tienes este SIMPLE formulario:

Código (html4strict) [Seleccionar] Expandir

<form action="envio.php" method="POST">
   <input type="text" value="" name="link_juego" />
   <select name="tipo_de_juego">
      <!-- disabled="disabled" no permite seleccionar ese elemento -->
      <option value="" selected="selected" disabled="disabled">Selecciona el lenguaje</option>
      <option value="" disabled="disabled">---</option>
      <!-- Agregamos el tipo de juego -->
      <option value="flash">Flash</option>
      <option value="java">Java</option>
      <option value="unity">Unity</option>
      <option value="iframe">iFrame</option>
   </select>
   <!-- Enviamos formulario -->
   <input type="submit" value="enviar" />
</form>

Bien, cuando el usuario lo rellene y lo envía, tu guardas los valores en la BD y luego cuando te toque comprobarlos, con PHP, puedes comprobar cual es el valor que ha guardado el select y a partir de ahí sacar el resto del código. Por ejemplo:

Código (php) [Seleccionar] Expandir

<?php
/* Conexion a bd blablablabla */
/* En la consulta coges el link del juego y el tipo de juego.. */
$query = "SELECT link_juego,tipo_juego FROM juegos WHERE blablablabla";
/* while($row=$result->fech_assoc())
   blalbalbla
*/

// Comprobamos que tipo de juego es: 
if($tipo_juego==='unity'){
   echo '<object blablalbalbalblalba src="'.$row['link_juego'].'" blablabla></object>';
} elseif($tipo_juego==='flash'){
   echo '<object flash blablalbalbalblalba src="'.$row['link_juego'].'" blablabla></object>';
} elseif($tipo_juego==='iframe'){
   echo '<iframe src="'.$row['link_juego'].'" bla blablab lba></iframe>';
} else {
   echo 'Tipo de juego desconocido. Link:'.$row['link_juego'];
}
?>

De esta forma no te hace falta ningun javascript y yo creo que esta mucho mejor optimizado y mas seguro...

Saludos

[z3nth10n]

Ostia, es mucho mejor xD

Vamos a optimizar más cosas, quiero hacer una cosa así:



Tengo un código super denso que es:

Código [Seleccionar] Expandir

<b>Controles:</b><br>

<i>Tecla: </i><input type="text" name="tecla0" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion0" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla1" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion1" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla2" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion2" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla3" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion3" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla4" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion4" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla5" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion5" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla6" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion6" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla7" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion7" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla8" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion8" id="accion" /><br>
<i>Tecla: </i><input type="text" name="tecla9" id="tecla" /> - <i>Acci&oacute;n: </i><input type="text" name="accion9" id="accion" /><br>

Código (php) [Seleccionar] Expandir

function tecla2($cadena) {

//Rememplazamos caracteres especiales latinos minusculas

$find2 = array("A", "B", "C", "D", "E", "F", "G", "H", "I", "H", "J", "K", "L", "M", "N", "Ñ", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "ñ", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "flechas", "enter", "control", "alt", "espacio", "der", "izq", "mover", "shift", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0");

$repl2 = array("<div class=\"tecla\">A</div>", "<div class=\"tecla\">B</div>", "<div class=\"tecla\">C</div>", "<div class=\"tecla\">D</div>", "<div class=\"tecla\">E</div>", "<div class=\"tecla\">F</div>", "<div class=\"tecla\">G</div>", "<div class=\"tecla\">H</div>", "<div class=\"tecla\">I</div>", "<div class=\"tecla\">H</div>", "<div class=\"tecla\">J</div>", "<div class=\"tecla\">K</div>", "<div class=\"tecla\">L</div>", "<div class=\"tecla\">M</div>", "<div class=\"tecla\">N</div>", "<div class=\"tecla\">Ñ</div>", "<div class=\"tecla\">O</div>", "<div class=\"tecla\">P</div>", "<div class=\"tecla\">Q</div>", "<div class=\"tecla\">R</div>", "<div class=\"tecla\">S</div>", "<div class=\"tecla\">T</div>", "<div class=\"tecla\">U</div>", "<div class=\"tecla\">V</div>", "<div class=\"tecla\">W</div>", "<div class=\"tecla\">X</div>", "<div class=\"tecla\">Y</div>", "<div class=\"tecla\">Z</div>", "<div class=\"tecla\">a</div>", "<div class=\"tecla\">b</div>", "<div class=\"tecla\">c</div>", "<div class=\"tecla\">d</div>", "<div class=\"tecla\">e</div>", "<div class=\"tecla\">f</div>", "<div class=\"tecla\">g</div>", "<div class=\"tecla\">h</div>", "<div class=\"tecla\">i</div>", "<div class=\"tecla\">j</div>", "<div class=\"tecla\">k</div>", "<div class=\"tecla\">l</div>", "<div class=\"tecla\">m</div>", "<div class=\"tecla\">n</div>", "<div class=\"tecla\">o</div>", "<div class=\"tecla\">p</div>", "<div class=\"tecla\">q</div>", "<div class=\"tecla\">r</div>", "<div class=\"tecla\">s</div>", "<div class=\"tecla\">t</div>", "<div class=\"tecla\">u</div>", "<div class=\"tecla\">v</div>", "<div class=\"tecla\">w</div>", "<div class=\"tecla\">x</div>", "<div class=\"tecla\">y</div>", "<div class=\"tecla\">z</div>", "<img title=\"Flechas de posicionamiento\" src=\"ico/flechas.png\" />", "<img title=\"Enter\" src=\"ico/enter.png\" />", "<img title=\"Ctrl/Control\" src=\"ico/control.png\" />", "<img title=\"Alt\" src=\"ico/alt.png\" />", "<img title=\"Espacio\" src=\"ico/space.png\" />", "<img title=\"Click derecho\" src=\"ico/mouse_click_der.png\" />", "<img title=\"Click izquierdo\" src=\"ico/mouse_click_izq.png\" />", "<img title=\"Mover el rat&oacute;n\" src=\"ico/mouse_movi.png\" />", "<img title=\"Shift\" src=\"ico/shift.png\" />", "<div class=\"tecla\">1</div>", "<div class=\"tecla\">2</div>", "<div class=\"tecla\">3</div>", "<div class=\"tecla\">4</div>", "<div class=\"tecla\">5</div>", "<div class=\"tecla\">6</div>", "<div class=\"tecla\">7</div>", "<div class=\"tecla\">8</div>", "<div class=\"tecla\">9</div>", "<div class=\"tecla\">0</div>");

$cadena = str_replace($find2, $repl2, $cadena);

return $cadena;

}

Y luego:

Código (php) [Seleccionar] Expandir

$tecla0 = tecla2($_POST['tecla0']);

$accion0 = reem($_POST['accion0']);

$tecla1 = tecla2($_POST['tecla1']);

$accion1 = reem($_POST['accion1']);

$tecla2 = tecla2($_POST['tecla2']);

$accion2 = reem($_POST['accion2']);

$tecla3 = tecla2($_POST['tecla3']);

$accion3 = reem($_POST['accion3']);

$tecla4 = tecla2($_POST['tecla4']);

$accion4 = reem($_POST['accion4']);

$tecla5 = tecla2($_POST['tecla5']);

$accion5 = reem($_POST['accion5']);

$tecla6 = tecla2($_POST['tecla6']);

$accion6 = reem($_POST['accion6']);

$tecla7 = tecla2($_POST['tecla7']);

$accion7 = reem($_POST['accion7']);

$tecla8 = tecla2($_POST['tecla8']);

$accion8 = reem($_POST['accion8']);

$tecla9 = tecla2($_POST['tecla9']);

$accion9 = reem($_POST['accion9']);

mysql_connect ($db_server, $db_user, $db_passwd) or die ('Error: ' . mysql_error());

mysql_select_db ($db_name);

$query="INSERT INTO juegos (... tecla0, accion0, tecla1, accion1, tecla2, accion2, tecla3, accion3, tecla4, accion4, tecla5, accion5, tecla6, accion6, tecla7, accion7, tecla8, accion8, tecla9, accion9) VALUES (... '$tecla0', '$accion0', '$tecla1', '$accion1', '$tecla2', '$accion2', '$tecla3', '$accion3', '$tecla4', '$accion4', '$tecla5', '$accion5', '$tecla6', '$accion6', '$tecla7', '$accion7', '$tecla8', '$accion8', '$tecla9', '$accion9')";

Cómoo tu entenderas es una bestialidad, tengo como 25 filas en la base de datos...

He estado buscando metodos para juntar todos los campos, pero nada...

Hice un mini-codigo para clonar campos, pero lo he perdido xD

Ahora la pregunta es como haría para meter por ejemplo si tengo 20 inputs con diferentes values (que serían las teclas y las acciones de respectivas teclas), meterlos todos dentro de una columna y luegos separarlos con tablas...

No tengo npi...  

Un saludo.

[#!drvy]

Para empezar, el formulario lo podrias tener asi:

Código (html4strict) [Seleccionar] Expandir

<script type="text/javascript">
var add_tecla = function(){
   /* Obtener DIV de teclas */
   var div = document.getElementById("teclas");
   /* Agregar otra columna */
   div.innerHTML += '<i>Tecla: </i><input type="text" name="tecla[]" /> - <i>Acci&oacute;n:</i><input type="text" name="accion[]" /><br>';
   /* Finalizar */
   return true;
}
</script>
<form action="envio.php" method="POST">
   <input type="button" value="A&ntilde;adir tecla" onclick="add_tecla();" />
   <input type="submit" value="enviar" /><br />
   <b>Controles:</b><br>
   <div id="teclas">
      <i>Tecla: </i><input type="text" name="tecla[]" /> - <i>Acci&oacute;n:</i><input type="text" name="accion[]" /><br>
   </div>
</form>

Ahora bien 2 cosas:
   1. Si tienes muchos campos con el mismo nombre, puedes usar [] (tecla[]) para que HTML les asigne automáticamente el numero. Asi no tienes que escribir tecla1, tecla2 etc.. PHP lo reconocerá como un array.
   2. Solo puede haber UN elemento con EL MISMO ID. No puedes tener 2 elementos con el mismo ID.

Bien, pasamos a PHP.

La función tecla2() se podría optimizar pero debes cambiar los nombres de las imágenes... si no jodido. Ejemplo:

Código (php) [Seleccionar] Expandir

function tecla2($cadena) {
   // Si es una letra o numero de 1 caracter de logitud, se le añadira <div class="tecla">
   // Pero si coincide con las palabras flechas,enter etc... se le añadira <img src="" />
   $buscarRegex = array('/^([A-ZñÑ0-9]{1})$/i','/^(flechas|enter|control|alt|espacio|der|izq|mover|shift)$/i');
   $reemplazo = array('<div class="tecla">$1</div>','<img src="ico/$1.png" alt="tecla-$1" />');
   $mag = preg_replace($buscarRegex, $reemplazo, $cadena,-1,$contador);
   // Si las sustituciones son menores a 1, significa que no se ha encontrado el patrón.
   if($contador >= 1){return $mag;}else{return 'desconocida';}
}

El poder de regex es total . El caso es que las imágenes se deberán llamar flechas.png, enter.png, der.png, izq.png etc..etc..

Bien, en vez de hacer:

Código (php) [Seleccionar] Expandir


$tecla0 = tecla2($_POST['tecla0']);
$accion0 = reem($_POST['accion0]);
/* bla bla bla */

Haremos esto:

Código (php) [Seleccionar] Expandir

/* Por cada campo de tecla ... */
foreach($_POST['tecla'] as $tecla){
   /* Le pasamos tecla2 y le agregamos a un array. */
   $teclas[] = tecla2($tecla);
}

/* Lo mismo con las acciones.. */
foreach($_POST['accion'] as $accion){
   $acciones = reem($accion);
}

Y ahora llega la magia. ¿ Como hacer que un array entero de teclas y acciones se guarde en la base de datos en una sola columna ? La magia esta en serialize() http://php.net/manual/es/function.serialize.php .. básicamente te permite guardar arrays y objetos y luego recuperarlos como si nada.

Código (php) [Seleccionar] Expandir

$teclas = serialize($teclas);
$acciones = serialize($acciones);

$query = "INSERT INTO juegos (teclas,acciones) VALUES ('".$teclas."','".$acciones."')";

CONSEJO: Asegúrate de que los campos teclas y acciones de la tabla juegos sean de tipo TEXT, MEDIUMTEXT o LONGTEXT. La razon es que la cadena del serialize es mas larga cuantos mas campos añades.

Bien, ahora que ya lo tienes todo bien guardadito en la base de datos, te toca sacarlo de ahí y mostrarlo como los monos de la jungla mandan.

Código (php) [Seleccionar] Expandir


/* Conexion a base de datos
   bla bla bla blab  */
$query = "SELECT * FROM juegos";
....

/* Supongamos que la variable que tiene el resultado de la query se llama $row */
// Primero toca quitar el serialize a lo que hemos sacado. Para ello unserialize().
$teclas = unserialize($row['teclas']);
$acciones = unserialize($row['acciones']);
// Ahora ya tenemos metidos en un array las teclas y las acciones. Toca mostrarlos en una tabla
echo '<table><tr><th>Tecla</th><th>Accion</th></tr>';
// Queremos tener el index, para obtener la accion que corresponde a la tecla.
foreach($teclas as $index=>$tecla){
   echo '<tr><td>'.$tecla.'</td><td>'.$acciones[$index].'</td></tr>';
}
// cerramos tabla y nos vamos :P
echo '</table>';

Consejos:
   1. Busca tutoriales sobre REGEX, te va a ayudar mucho.
   2. Utiliza MYSQLI en vez e MYSQL. Esta ultima esta marcada como obsoleta y sera eliminada.
   3. Este codigo NO ES SEGURO. Te lo he dejado como muestra.. deberas aplicar los correspondientes filtros antes de guardarlo en la bd.
   4. Si Chuck Norris existe que me de una hostia contra el tecla sdosaifjdioas fjsaofpjsaiofhsadfpsfj


Saludos espero que te sirva.

[z3nth10n]

LOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOL y LOL!

Tremendo, eres tremendo, joder macho, tu eres bueno eh? Voy a ver los codigos y ahora te comento es que estoy haciendo vídeos. xD

---

Y que cambios tengo que hacer? xDDDDD No entiendo, nunca entendi eso de las filtraciones e inyecciones mysql, que sesupone que algún gracioso puede ver poner un script que borre toda la body con una cookie? Que vaaa! Si solo yo tengo acceso al formulario, bueno lo voy a restringir xD



Ya le he estado hechando un vistazo a tu code, y bueno lo primero que tiene algunos bugs en lo de clonar nodos, he hice mi propia funcón que por cierto ya encontré:

Código (javascript) [Seleccionar] Expandir

var orden=1;
function clonarNodos()
{
  var id=document.getElementById("teclas2");
  var nuevos=id.cloneNode(true);
  nuevos.style.id='enlaces'+orden;
  orden++;
  id=document.getElementById("teclas");
  id.appendChild(nuevos);
}

Código [Seleccionar] Expandir

<b>Controles:</b><br>

<input type="button" value="A&ntilde;adir tecla" onclick="clonarNodos();" />
   <div style="display:none;"><div id="teclas2">
      <i>Tecla: </i><input type="text" name="tecla[]" /> - <i>Acci&oacute;n:</i><input type="text" name="accion[]" /><br>
   </div></div>
   <div id="teclas">
      <i>Tecla: </i><input type="text" name="tecla[]" /> - <i>Acci&oacute;n:</i><input type="text" name="accion[]" /><br>
   </div>

Luego, he estado viendo lo de la bd y mira lo que pasa:



Yo creo que lo alinea verticalmente el serialize en vez de meterlo horizontalmente XD Es un fail XD No he tocado nada de nada. Solo he hecho los cambios que tu dijistes. 

[#!drvy]

creo que lo alinea verticalmente el serialize en vez de meterlo horizontalmente

Eh ? A que te refieres ? Yo no veo ningún fallo ahí -.-

PD:

tiene algunos bugs en lo de clonar nodos

Si te fijas, no clona nodos. Reescribe el html agregando otra columna mas =)

Saludos

[z3nth10n]

Eh ? A que te refieres ? Yo no veo ningún fallo ahí -.-

Pues a mi me carga el este verticalmente, no me lo researializa bien...  

Sobre lo del PD: es más util si vás añadiendo xD

PD: Si quieres echarle una ojeada:

http://pastebin.com/f80EM1wn - Formulario.php
http://pastebin.com/xUU3DdnD - Envia.php

PD: Como soy tan retarded le he cambiado los nombres xDD

[#!drvy]

xD Sigues sin explicarte. No los carga verticalmente. Los carga según el orden en el que fueron introducidos. Y serialize y unserialize no tienen nada que ver con eso o.O

Sobre lo del PD: es más util si vás añadiendo xD

Ya te dije que era un ejemplo xD

Saludos