How to get the value of an inputtext and generate an IMG URL

Navigation
2

How can I get the X value of an INPUT and generate a URL for IMG using JavaScript?

Example:

  • I put the number 505050 on form and gave submit;

Form Code: 

<form action="teste" method="GET"> 
<input name="qtdfor" type="text" class="inputtext" size="10" maxlength="10"> 
<input type="Submit" name="botaoEnviar" value="Enviar"> 
</form>

How do I get value 505050 concatenated with .jpg already inside the IMG tag?

IMG TAG: 

<img src="https://localhost/sig/_downloadFoto?parametro2=Alunos/**505050**.jpg"alt="Foto perfil" height="42" width="42">
    
asked by anonymous 19.11.2015 / 16:47

3 answers

1

Well I guess that's what you asked for. I'm using jQuery to make it easier. Here is the code: 

$("#btnInput").on("click",function(e){
	var urlFixa = "https://localhost/sig/_downloadFoto?parametro2=Alunos/";
    var valorInput = $("#campoInput").val();
    var urlFinal = urlFixa + valorInput + ".jpg";
    $("#campoInput").attr("src",urlFinal);
    $("#srcImg").html(urlFinal);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" id="campoInput" />
<button id="btnInput" name="button">Carrega url img</button><br><br>
<img alt="Foto perfil" height="42" width="42" />
<div id="srcImg"></div>
    
19.11.2015 / 17:09
1

has a solution like this, with jquery: 

$('#botao').click(function () {
    var num = $('#num').val();
    $('#img').attr('src', "https://localhost/sig/_downloadFoto?parametro2=Alunos/" + num + ".jpg");
})
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><inputname="qtdfor" id="num" type="text" class="inputtext" size="10" maxlength="10">
<button id="botao" name="botaoEnviar">Enviar</button>
<img src="https://localhost/sig/_downloadFoto?parametro2=Alunos/**505050**.jpg"id="img" alt="Foto perfil" height="42" width="42">
    
19.11.2015 / 17:06
0

First, give an ID for the image (eg photo): 

<img src="https://localhost/sig/_downloadFoto?parametro2=Alunos/**505050**.jpg"alt="Foto perfil" height="42" width="42" id="foto" />

Create a javascript file with the code below and import it on the second page where it has the image. 

(function(){
 var akira = location.search.match('.*qtdfor=([^=&]*)');
 var foto = document.getElementById('foto');
 foto.setAttribute('src', "https://localhost/sig/_downloadFoto?parametro2=Alunos/"+akira[1]+".jpg");
})()

On the first page you will submit the data (qtdfor) via GET, and on the second page (/ test) you will retrieve the submitted data.

    
19.11.2015 / 18:28
create_function can be a risk to my code? Merge two Word documents