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

Asked

Viewed 248 times

2

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">
  • The only thing that will change is the image id?

  • That: <img src="https://localhost/Sig/_downloadFoto? parametro2=Students/XXXXXX*. jpg" alt="Profile photo" height="42" width="42">

  • You will always take the input value and add it to XXXX

  • Also: if you need it to be in pure Javascript, please add this information as well... there are already 2 answers with jQuery

  • Some of the answers served you @Erickamoedo?

  • 1

    Hello @Danilo! It worked yes, thank you very much!!

Show 1 more comment

3 answers

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">

1


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>

0

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.

  • Important to import after tag <img>;

Browser other questions tagged

You are not signed in. Login or sign up in order to post.