Foros del Web » Programando para Internet » Javascript »

Como modificar link con Javascript

Estas en el tema de Como modificar link con Javascript en el foro de Javascript en Foros del Web. Hola! Les comento... yo tengo un formulario en donde deben ingresar una direccion web y luego al apretar enviar me muestra lo que puso en ...
  #1 (permalink)  
Antiguo 30/01/2015, 08:29
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Como modificar link con Javascript

Hola! Les comento... yo tengo un formulario en donde deben ingresar una direccion web y luego al apretar enviar me muestra lo que puso en otra hoja (usando $_POST)

El tema es el siguiente, por una seguridad de apache no esta permitido pasar links mediante POST, y como estoy en un webhosting no puedo modificarlo.


Pero consultando, me comentaron que con Javascript se puede hacer antes del boton de submit un codigo para que detecte los links (https//:google.com) y los recorte (google.com) de esta manera me dejaria mandarlo sin ningun problema.

El tema es que no tengo la menor idea de como hacerlo, alguno me podria ayudar?

Gracias !
  #2 (permalink)  
Antiguo 30/01/2015, 12:29
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 3 meses
Puntos: 29
Respuesta: Como modificar link con Javascript

Prueba eliminar 7 caracteres (http://) u once (http://www.), como convenga.
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.    <head>
  3.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.       <title>js</title>
  5.       <style type="text/css">
  6.          input{width: 250px;}
  7.       </style>
  8.       <script type="text/javascript">
  9.          window.onload = function () {
  10.  
  11.             var test = document.getElementById('test');
  12.             var boton = document.getElementById('boton');
  13.  
  14.             boton.addEventListener('click', function (e) {
  15.                e.preventDefault();
  16.                var url = document.getElementById('url').value;
  17.                var string = url.substring(7); // eliminar http://
  18.                test.innerHTML = string;
  19.             });
  20.  
  21.          };
  22.       </script>
  23.    </head>
  24.    <body>
  25.       <form id="form1">
  26.          <input type="text" id="url" value="http://www.forosdelweb.com/f13/" />
  27.          <button id="boton">enviar</button>
  28.       </form>
  29.       <div id="test">test</div>
  30.    </body></html>
  #3 (permalink)  
Antiguo 30/01/2015, 14:08
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

Al momento de intentar enviar los datos del formulario para ser procesados, cancelas el evento submit (que es el que se produce cuando ocurre esto) utilizando el método preventDefault, tomas el valor de la caja de texto, aplicas una expresión regular que elimine ya sea el 'http://' o 'https://' del inicio y/o el 'www.'. Luego de hacer esto, asignas el valor resultante a la caja de texto y envías el formulario utilizando el método submit.

Código Javascript:
Ver original
  1. document.querySelector("#id_del_formulario").addEventListener("submit", function(event){
  2.     event.preventDefault(); //Evito el envío de la información
  3.  
  4.     var caja = this.querySelector("#id_de_la_caja"); //Tomo a la caja de texto
  5.  
  6.     caja.value = caja.value.replace(/(https?:\/\/|www\.)/gi, ""); //Hago el filtrado
  7.  
  8.     this.submit(); //Envío el formulario
  9. }, false);

Asegúrate de tener este código después de todos los elementos del documento y justo antes de la etiqueta </body>.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #4 (permalink)  
Antiguo 30/01/2015, 15:59
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Hola! Gracias a los dos, probe y no pude, me sigue tirarndo el mismo error:


Forbidden

You don't have permission to access /formulario/mostrar.php on this server.
----------------------------------------

Les paso mis dos archivos asi los ven, tal vez coloque mal las cosas.

formulario.php
Código:
<!DOCTYPE html>     
<html>
<head>
<title>Formulario de contacto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script type="text/javascript">
         window.onload = function () {
            var test = document.getElementById('test');
            var boton = document.getElementById('boton');
 
            boton.addEventListener('click', function (e) {
               e.preventDefault();
               var url = document.getElementById('url').value;
               var string = url.substring(7); // eliminar http://
               test.innerHTML = string;
            });
         };
      </script>
</head>
<body>
<form name="formulario" method="post" action="mostrar.php">
<table width="423" border="0" align="center">
  <tr>
    <td width="166">Datos de la Pelicula: </td>
    <td width="247"><input id="datos" type="text" name="datos" placeholder="Datos" required="" /></td>
    </tr>
  <tr>
    <td><div align="center">
      <p>Sinopsis:    </div></td>
    <td><input id="sin" type="text" name="sin" placeholder="Sinopsis" required="" /></td>
  </tr>
  <tr>
    <td>Captura de Pantalla:
      <div align="center"></div></td>
    <td><input id="cap" type="text" name="cap" placeholder="Captura" required="" /></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><input name="submit" type="submit" /></td>
  </tr>
</table>
</form>
<script>
document.querySelector("formulario").addEventListener("submit", function(event){
    event.preventDefault(); //Evito el envío de la información
 
    var caja = this.querySelector("datos"); //Tomo a la caja de texto
 
    caja.value = caja.value.replace(/(https?:\/\/|www\.)/gi, ""); //Hago el filtrado
 
    this.submit(); //Envío el formulario
}, false);
</script>
</body>
</html>

mostrar.php
Código PHP:
 <?php

$datos 
$_POST['datos'];
$sin $_POST['sin'];
$cap $_POST['cap'];
$url '[noparse][url]';
$img '[img]';
$cen '[center]';
$url_c '[/url][/noparse]';
$cen_c '[/center]';
$img_c '[/img]';


echo 
$url$datos$url_c;
echo 
$cen$sin$cen_c;
echo 
$img$cap$img_c;

?>
No se que estare haciendo mal :(

Última edición por Juan228; 30/01/2015 a las 16:20
  #5 (permalink)  
Antiguo 30/01/2015, 16:42
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

Fíjate que en el ejemplo que te di, el id va con un # adelante.

Código Javascript:
Ver original
  1. //DEBE DE SER ASÍ
  2. var caja = this.querySelector("#datos");

Además, estás intentando tomar al formulario por su nombre puesto que no le has asignado un id. Asígnale uno y tómalo como debe de ser (con el # adelante).

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 30/01/2015, 17:09
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Cita:
Iniciado por Alexis88 Ver Mensaje
Fíjate que en el ejemplo que te di, el id va con un # adelante.

Código Javascript:
Ver original
  1. //DEBE DE SER ASÍ
  2. var caja = this.querySelector("#datos");

Además, estás intentando tomar al formulario por su nombre puesto que no le has asignado un id. Asígnale uno y tómalo como debe de ser (con el # adelante).

Saludos
GENIAL, ahora al apretar "enviar" me lo modifica n.n, pero no me envia el formulario...

No deberia meter el script antes del </form>???
  #7 (permalink)  
Antiguo 30/01/2015, 17:11
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

Por favor, muéstranos el código actualizado.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #8 (permalink)  
Antiguo 30/01/2015, 17:13
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Cita:
Iniciado por Alexis88 Ver Mensaje
Por favor, muéstranos el código actualizado.

Saludos
formulario.php

Código HTML:
<!DOCTYPE html>     
<html>
<head>
<title>Formulario de contacto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="formulario" id="creador"  method="post" action="mostrar.php">
<table width="423" border="0" align="center">
  <tr>
    <td width="166">Datos de la Pelicula: </td>
    <td width="247"><input id="datos" type="text" name="datos" placeholder="Datos" required="" /></td>
    </tr>
  <tr>
    <td><div align="center">
      <p>Sinopsis:    </div></td>
    <td><input id="sin" type="text" name="sin" placeholder="Sinopsis" required="" /></td>
  </tr>
  <tr>
    <td>Captura de Pantalla:
      <div align="center"></div></td>
    <td><input id="cap" type="text" name="cap" placeholder="Captura" required="" /></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><input name="submit" type="submit" /></td>
  </tr>
</table>
</form>
<script type="text/javascript">
document.querySelector("#creador").addEventListener("submit", function(event){
    event.preventDefault(); //Evito el envío de la información
 
    var caja = this.querySelector("#datos"); //Tomo a la caja de texto
 
    caja.value = caja.value.replace(/(https?:\/\/|www\.)/gi, ""); //Hago el filtrado
 
    this.submit(); //Envío el formulario
}, false);
</script>
</body>
</html> 
  #9 (permalink)  
Antiguo 30/01/2015, 17:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

¿Y dices que no se envía el formulario? Prueba limpiando la caché con Ctrl + F5 e inténtalo de nuevo.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #10 (permalink)  
Antiguo 30/01/2015, 17:26
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Cita:
Iniciado por Alexis88 Ver Mensaje
¿Y dices que no se envía el formulario? Prueba limpiando la caché con Ctrl + F5 e inténtalo de nuevo.

Saludos
No, no lo envia, te dejo el link asi lo podes probar vos!!

http://butaca15.com/formulario/formulario.php


Muchas gracias por toda la ayuda!
  #11 (permalink)  
Antiguo 30/01/2015, 17:37
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

La verdad es que no sé por qué no toma al elemento como un elemento de formulario pues incluso viendo su clase constructora en la consola, se muestra que es un elemento de ese tipo.

La solución es aplicar el método submit al formulario como si este no fuera uno:

Código Javascript:
Ver original
  1. //EN LUGAR DE ESTO
  2. this.submit();
  3.  
  4. //PON ESTO
  5. HTMLFormElement.prototype.submit.call(this);

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #12 (permalink)  
Antiguo 30/01/2015, 17:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Cita:
Iniciado por Alexis88 Ver Mensaje
La verdad es que no sé por qué no toma al elemento como un elemento de formulario pues incluso viendo su clase constructora en la consola, se muestra que es un elemento de ese tipo.

La solución es aplicar el método submit al formulario como si este no fuera uno:

Código Javascript:
Ver original
  1. //EN LUGAR DE ESTO
  2. this.submit();
  3.  
  4. //PON ESTO
  5. HTMLFormElement.prototype.submit.call(this);

Saludos

Sos un maestro! ahora si funciono n.n!!!


Te hago una consulta, yo en este caso puse tu codigo que se aplica para una de las cajas..yo tengo que aplicarlo en 8 cajas mas

Si tu codigo es:

Código PHP:
<script type="text/javascript">
document.querySelector("#creador").addEventListener("submit", function(event){
    
event.preventDefault(); //Evito el envío de la información
 
    
var caja this.querySelector("#datos"); //Tomo a la caja de texto
 
    
caja.value caja.value.replace(/(https?://|www.)/gi""); //Hago el filtrado
 
    
HTMLFormElement.prototype.submit.call(this); //Envío el formulario
}, false);
</script> 

Yo deberia agregar luego del filtrado, otra vez lo mismo? es decir:

Código PHP:
<script type="text/javascript">
document.querySelector("#creador").addEventListener("submit", function(event){
    
event.preventDefault(); //Evito el envío de la información
 
    
var caja this.querySelector("#datos"); //Tomo a la caja de texto
 
    
caja.value caja.value.replace(/(https?://|www.)/gi""); //Hago el filtrado
 
    
var caja this.querySelector("#otrodato"); //Tomo a la caja de texto
 
    
caja.value caja.value.replace(/(https?://|www.)/gi""); //Hago el filtrado
 
    
HTMLFormElement.prototype.submit.call(this); //Envío el formulario
}, false);
</script> 

???
  #13 (permalink)  
Antiguo 30/01/2015, 18:07
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

Si en las 8 cajas de texto vas a ingresar URLs, puedes hacer algo práctico. Asigna una clase a todas las cajas de texto, por ejemplo, 'url', y luego solo te queda usar un bucle para recorrer al conjunto de cajas y en cada iteración aplicar lo que te expliqué.

Un ejemplo:

Código HTML:
Ver original
  1. <input type = "text" class = "url" />
  2. <input type = "text" class = "url" />
  3. <input type = "text" class = "url" />

Código Javascript:
Ver original
  1. document.querySelector("#creador").addEventListener("submit", function(event){
  2.     event.preventDefault(); //Evito el envío de la información
  3.  
  4.     [].forEach.call(this.querySelectorAll(".url"), function(caja){ //Recorro las cajas
  5.         caja.value = caja.value.replace(/(https?:\/\/www\.|www\.)/gi, ""); //Hago el filtrado
  6.     });
  7.  
  8.     HTMLFormElement.prototype.submit.call(this); //Envío el formulario
  9. }, false);

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #14 (permalink)  
Antiguo 30/01/2015, 18:14
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Genial! a la noche lo aplico en mi casa y te digo! Muchas gracias por la buena onda :)!
  #15 (permalink)  
Antiguo 30/01/2015, 20:33
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

Alexis sabes que me tira el error de acceso denegado de antes, quiere decir que debo tener algun problema con las url otra vez, te dejo el codigo a ver que opinas


Código HTML:
<!DOCTYPE html>     
<html>
<head>
<title>Formulario de contacto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-image: url(../body.png);
}
-->
</style></head>
<body>
<form name="formulario" id="creador"  method="post" action="../mostrar.php">
<table width="688" border="0" align="center" bordercolor="#000000" bgcolor="#FFFFFF">
  <tr>
    <td colspan="3" bgcolor="#FFFFFF"><div align="center"><img src="creapost.png" width="356" height="56"></div></td>
    </tr>
  <tr>
    <td width="146" bgcolor="#FFFFFF"><div align="center">Datos de la Pelicula</div></td>
    <td width="145" bgcolor="#FFFFFF"><input id="datos" type="text" class="url" name="datos" placeholder="Datos" required="" /></td>
    <td width="383" bgcolor="#FFFFFF"><div align="left">[Ingresar el link de la imagen de los datos de la pelicula] </div></td>
    </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">Sinopsis</div></td>
    <td bgcolor="#FFFFFF"><input id="sin" type="text" name="sin" placeholder="Sinopsis" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el texto de la sinopsis] </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">Captura de Pantalla</div></td>
    <td bgcolor="#FFFFFF"><input id="cap" type="text" class="url" name="cap" placeholder="Captura" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el link de la captura de pantalla] </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">Trailer</div></td>
    <td bgcolor="#FFFFFF"><input id="trai" type="text" class="url" name="trai" placeholder="Trailer" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el link de youtube donde esta el trailer] </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">Streamin</div></td>
    <td bgcolor="#FFFFFF"><input id="stre" type="text" class="url" name="stre" placeholder="Streamin" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el link de descarga para ver online desde Streamin] </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">PowVideo</div></td>
    <td bgcolor="#FFFFFF"><input id="pow" type="text" class="url" name="pow" placeholder="Powvideo" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el link de descarga para ver online desde PowVideo] </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">1Fichier</div></td>
    <td bgcolor="#FFFFFF"><input id="fiche" type="text" class="url" name="fiche" placeholder="1Fichier" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el lin de descarga de 1Fichier] </div></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><div align="center">Mega</div></td>
    <td bgcolor="#FFFFFF"><input id="mega" type="text" class="url" name="mega" placeholder="Mega" required="" /></td>
    <td bgcolor="#FFFFFF"><div align="left">[Ingresar el lin de descarga de Mega] </div></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3"><div align="center">
      <input name="submit" type="submit" value="Generar Post" />
    </div></td>
  </tr>
</table>
</form>
<script type="text/javascript">
document.querySelector("#creador").addEventListener("submit", function(event){
    event.preventDefault(); //Evito el envío de la información
 
    [].forEach.call(this.querySelectorAll(".url"), function(caja){ //Recorro las cajas
        caja.value = caja.value.replace(/(https?:\/\/www\.|www\.)/gi, ""); //Hago el filtrado
    });
 
    HTMLFormElement.prototype.submit.call(this); //Envío el formulario
}, false);
</script>
</body>
</html> 

EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT

Sin los https funciona de maravilla, el problema radica ahi, seguramente copie mal lo que me pasastes


Última edición por Juan228; 30/01/2015 a las 21:02
  #16 (permalink)  
Antiguo 30/01/2015, 21:19
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Como modificar link con Javascript

Cambia esto:
Código Javascript:
Ver original
  1. [].forEach.call(this.querySelectorAll(".url"), function(caja){ //Recorro las cajas
  2.     caja.value = caja.value.replace(/(https?:\/\/www\.|www\.)/gi, ""); //Hago el filtrado
  3. });

Por esto:
Código Javascript:
Ver original
  1. [].forEach.call(document.querySelectorAll(".url"), function(caja){ //Recorro las cajas
  2.     caja.value = caja.value.replace(/^(https?:\/\/(www\.)?|www\.)/gi, ""); //Hago el filtrado
  3. });

Me di cuenta que el scope de this, no alcanzaba para tomar a las cajas desde el método forEach, además, hice una pequeña mejora a la expresión regular para que elimine correctamente lo que no debe de ir.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #17 (permalink)  
Antiguo 31/01/2015, 09:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 9 meses
Puntos: 0
Respuesta: Como modificar link con Javascript

PERFECTO! anda a la perfeccion! Muchisimas gracias :D!

Etiquetas: formulario, link, modificar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:04.