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

Question

How can I take the X value of an INPUT and generate an IMG URL using Javascript?

Example:

• I put the number 505050 in the 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> 

As I do for Value 505050 be concatenated with . jpg already inside the IMG tag so?

IMG TAG:

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

Answer 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>
<input name="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">

Answer 2

Good I think that’s what you asked for. I’m using jQuery to make it a little easier. Follow 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>
<input type="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>

Answer 3

First, give an ID to the image (e.g., 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 in the second page where you have 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.