1

Como mandar o valor do src de uma tag img para o valor de um campo texto?

 <script>
    // Inicia o Clipboard no elemento "button"

    function teste() {
        alert("t");
        var src = $("#imagem").attr("src");
        alert(src);
    }

    </script>


    <!-- Código com suas imagens! -->
    <div class="col-xs-10 col-offset-2">
    <div class="col-xs-5">
      <img src="aoi1.jpg" id="imagem" class="img-thumbnail" alt="Cinque Terre" width="100%">
      <input type="button" class="btn btn-block btn-primary" onclick="teste();" value="TESTE">
      <input type="text" value="" id="button"/>
    </div>

    </div>
2
  • 2
    Basta utilizar $("#button").val( src ) após var src = ... 7/05/2018 às 11:28
  • Esse id=button é um bocado macaco XD. Aconselho a mudar o nome do elemento.
    – lazyFox
    7/05/2018 às 11:30

2 Respostas 2

1

Segundo comentário do Valdeir Psr basta acrescentar no seu script $('#button').val(src);

Veja funcionando

      function teste() {
        //alert("t");
        var src = $("#imagem").attr("src");
        $('#button').val(src);
        //alert(src);
    } 
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-xs-10 col-offset-2">
    <div class="col-xs-5">
      <img src="aoi1.jpg" id="imagem" class="img-thumbnail" alt="Cinque Terre" width="100%">
      <input type="button" class="btn btn-block btn-primary" onclick="teste();" value="TESTE">
      <input type="text" value="" id="button"/>
    </div>

    </div>

Alternativamente temos

$(document).ready(function() {
  $(document).on('click', function(event) {
    if (event.target.tagName.toUpperCase() == 'IMG') {
       $('#imgSrc').val(event.target.src);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td>
        1 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/CD_icon_test.svg/120px-CD_icon_test.svg.png" width="30px" />
      </td>
    </tr>
    <tr>
      <td>
        2 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Nuvola_Brazilian_flag.svg/50px-Nuvola_Brazilian_flag.svg.png" width="30px" />
      </td>
    </tr>
    <tr>
      <td>
        3 <IMG src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Icona_news_videogiochi_ps.png/120px-Icona_news_videogiochi_ps.png" width="30px" />
      </td>
    </tr>
  </table>
  <!-- removed 1 from table1 -->
  Image src:
  <input type="text" id="imgSrc" size="75" />
</div>

  • event.target.tagName - identifica o elemento que foi clicado img
  • método toUpperCase() retorna o valor da string chamada convertida para maiúscula, uma vez que pode haver tags img ou IMG
  • $('#imgSrc').val(event.target.src); coloca no value do input de id imgSrc o src da imagem
0

function teste() {

  //Você pode colocar outro id em imagem também, já que "imagem" é algo muito generico.
  var src = $("#imagem").attr("src");
  
  //Você pode colocar um id no seu input, já que provavelmente existirão outros inputs na sua pagina.
  $('[type="text"]').val(src);
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-10 col-offset-2">
  <div class="col-xs-5">
    <img src="aoi1.jpg" id="imagem" class="img-thumbnail" alt="Cinque Terre" width="100%">
    <input type="button" class="btn btn-block btn-primary" onclick="teste();" value="TESTE">
    <input type="text" value="" id="button"/>
  </div>
</div>

Você pode setar no "val" do seu input selecionado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .