Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: xandrexitox en 14 de Julio 2016, 19:27

Título: Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: xandrexitox en 14 de Julio 2016, 19:27
(http://i.imgur.com/FXJPyiF.png)

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?
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: César Krall en 19 de Julio 2016, 11:11
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 https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Saludos!
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: xandrexitox en 21 de Julio 2016, 21:53
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?
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: Ogramar en 24 de Julio 2016, 19:26
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
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: xandrexitox en 03 de Agosto 2016, 23:21
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?
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: xandrexitox en 11 de Agosto 2016, 18:02
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?
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: xandrexitox en 17 de Agosto 2016, 23:07
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?
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: César Krall en 20 de Agosto 2016, 23:36
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!
Título: Re:Construir url a partir de datos existentes en un formulario HTML con JavaScript
Publicado por: xandrexitox en 24 de Agosto 2016, 23:56
No sabia lo de las librerias, gracias
creo que sera algo complicado