How do I send the src value of an img tag to the value of a text field?

Asked

Viewed 171 times

1

How to send the src value of an img tag to the value of a text field? 

 <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>
javascript jquery
  • 2

    Just use $("#button").val( src ) after var src = ...

  • That one id=button is a bit monkey XD. I advise to change the name of the element.

2 answers

1

Valdeir Psr’s second comment just add to your script $('#button').val(src);

See working

      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>

Alternatively we have

$(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 - identifies the element that was clicked img
  • toUpperCase() method returns the value of the named string converted to uppercase, since there may be tags img or IMG
  • $('#imgSrc').val(event.target.src); puts in the value of id input imgSrc src of the image

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>

You can set in the "val" of your selected input.

Browser other questions tagged javascript jquery

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