Construir url a partir de datos existentes en un formulario HTML con JavaScript

[xandrexitox]

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?

[César Krall]

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!

[xandrexitox]

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?

[Ogramar]

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]

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?

[xandrexitox]

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?

[xandrexitox]

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]

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!

[xandrexitox]

No sabia lo de las librerias, gracias
creo que sera algo complicado