Autor Tema: Construir url a partir de datos existentes en un formulario HTML con JavaScript  (Leído 1872 veces)

xandrexitox

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil


Lo que intento hacer es que al seleccionar algo de cada lista me entregue los valores, formando el nombre del documento con terminación pdf y me lo muestre; pero por el momento solo me salen los nombres de lista y sus valores seleccionados: programa1=OTLP155005&programa2=1&programa3=000N&programa4=04&programa5=0500PE

Código: [Seleccionar]
<table cellspacing="0" cellpadding="0"><form method="get" action="">
        <col width="240" span="2">
        <tr>
          <td><i class="mdicon verification-mark"></i>Almacenamiento</td>
          <td align="right"><select name="programa5">
            <option value="0500PE" selected="selected">500 GB</option>
            <option value="1000PE">1 TB</option>
          </select></td>
        </tr>
        <tr>
          <td></td>
          <td align="center"><input type="submit" value="Mostrar PDF" /></td>
        </tr></form>
      </table>

Como podría hacerlo?
« última modificación: 19 de Julio 2016, 11:11 de César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2228
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola!

Para formar el nombre concatenando los valores que toman los elementos del formulario puedes usar JavaScript. Una vez se produce el evento onclick (cuando se pulsa el botón) tendrías que capturar con JavaScript los valores que tienen los elementos del formulario, usando concatenación de cadenas JavaScript construir la URL, y usando JavaScript hacer que se cargue la url correspondiente.

Todo esto lo tienes explicado en el Tutorial Básico de programador web: JavaScript desde cero, disponible en http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

xandrexitox

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
http://jsfiddle.net/eNNZX/6/

Lo llegué a hacer de esta manera

Ya me muestra el concatenado de valores .pdf pero todavia no me salta el archivo

este es el javascript que uso
Código: [Seleccionar]
<script language="JavaScript">
$(document).ready(function(){
    $("#programa1, #programa2, #programa3, #programa4, #programa5").change(function(){
        concatenated_string = 'DESS/PDF2016_2/' + $("#programa1").val() + $("#programa2").val() + $("#programa3").val() + $("#programa4").val() + $("#programa5").val() + '.pdf';
        $("#product_description_product").val(concatenated_string);
        $("#temp_display").text(concatenated_string)
    })
})
</script>

y este es mi boton
Código: [Seleccionar]
<a href="#" onclick="function();">
            <button type="button">Mostrar PDF</button>

me falto un código?
« última modificación: 22 de Julio 2016, 11:09 de Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2553
    • Ver Perfil
Buenas si lo que quieres es que se abra la dirección web lo que te faltaría sería solo hacer la redirección a esa dirección. Puedes ver ejemplos en JavaScript: redireccionar y recargar webs. window.location. href, hostname, assign, reload, replace (CU01171E): http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=859:javascript-redireccionar-y-recargar-webs-windowlocation-href-hostname-assign-reload-replace-cu01171e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Salu2

xandrexitox

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Este es mi nuevo script, con algunas mejoras:

Código: [Seleccionar]
<script language="JavaScript">
$(document).ready(function concatenador(){
    $("#programa1, #programa2, #programa3, #programa4, #programa5").change(function concatenador(){
        concatenated_string = 'DESS/PDF2016_2/' + $("#programa1").val() + $("#programa2").val() + $("#programa3").val() + $("#programa4").val() + $("#programa5").val() + '.pdf';
        $("#product_description_product").val(concatenated_string);
$("#mostrar_product").text(concatenated_string);
    })
})
function redirectTo() {
window.location.assign('http://olitec.pe/'+ concatenador(mostrar_product).text(concatenated_string))
}
</script>

Y este es mi nuevo boton:
<button type="button" onclick="redirectTo()">Mostrar PDF</button>


function redirectTo() {
window.location.assign('http://olitec.pe/'+ concatenador(mostrar_product).text(concatenated_string))
}

Mi problema es que en la re dirección de la pagina no me es leída la parte pintada de rojo  :'(
Cual es la forma en la que tengo que llamarlo?
« última modificación: 06 de Agosto 2016, 20:21 de César Krall »

xandrexitox

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Este es mi nuevo script, con algunas mejoras:

Código: [Seleccionar]
<script language="JavaScript">
$(document).ready(function concatenador(){
    $("#programa1, #programa2, #programa3, #programa4, #programa5").change(function concatenador(){
        concatenated_string = 'DESS/PDF2016_2/' + $("#programa1").val() + $("#programa2").val() + $("#programa3").val() + $("#programa4").val() + $("#programa5").val() + '.pdf';
        $("#product_description_product").val(concatenated_string);
$("#mostrar_product").text(concatenated_string);
    })
})
function redirectTo() {
window.location.assign('http://olitec.pe/'+ $("#mostrar_product"))
}
</script>

Y este es mi nuevo boton:
<button type="button" onclick="redirectTo()">Mostrar PDF</button>


function redirectTo() {
window.location.assign(('http://olitec.pe/'+ $("#mostrar_product"))
}

Mi problema es que en la re dirección de la pagina no me es leída la parte pintada de rojo,  saliendo al final de la url el texto [object% 20object]
Como se corrige eso?
« última modificación: 11 de Agosto 2016, 18:06 de xandrexitox »

xandrexitox

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Hola a todos, este es mi nuevo script
Código: [Seleccionar]
<script type="text/javascript">
 $(document).ready(function() {
  $("#programa1, #programa2, #programa3, #programa4, #programa5").change(function() {
    concatenated_string = 'http://olitec.pe/DESS/PDF2016_2/' + $("#programa1").val() + $("#programa2").val() + $("#programa3").val() + $("#programa4").val() + $("#programa5").val() + '.pdf';
    $("#product_description_product").val(concatenated_string);
    $("#mostrar_product").text(concatenated_string)
  })
})
 window.onload = function() {
                document.getElementById('btnPDF').onclick = function () {
                    location=$("#mostrar_product").text(concatenated_string);
                }
            }
</script>

y este es mi nuevo boton:
Código: [Seleccionar]
<button id="btnPDF" type="button">Mostrar PDF</button>
Según una amiga me dice que ya me debería de correr pero todavía no se depura, sera algún problema externo?

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2228
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Supongo que ya lo habrás comprobado, pero estás usando jQuery, con lo cual es necesario importar las librerías de jQuery con las instrucción correspondiente. Comprueba que lo haces (y que las rutas de importación sean correctas)

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

xandrexitox

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
No sabia lo de las librerias, gracias
creo que sera algo complicado

 

Esto es un laboratorio de ideas...
Aprender a programar

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".