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

Question

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

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

How do I 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

asked by anonymous 07.05.2018 / 13:26

2 answers

How to give select in XML and return a specific column from an anonymous block? Change "createTextNode" to insert in HTML?

score 1 · Answer 1

Second comment from Valdeir Psr just add in 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><divclass="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<imgsrc="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 string called converted to uppercase, since there may be tags img or IMG
$('#imgSrc').val(event.target.src); puts in value of the input of id imgSrc the src of the image

score 0 · Answer 2

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><divclass="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 the "val" of your selected input.