Insert value into input value when expanding image with javascript

Asked

Viewed 84 times

0

I have the following code (Its function is to expand the image into a div where has the id #expandedImg.

        function myFunction(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
            $("#expandedImg").attr('value', imgs.alt );
        }

It works perfectly, but I wanted to implement that when it expands the image it also picks up the alt image (What works) and add within a value of an input with Hidden.

I have tried several codes to add the value of the alt in value but could not.

Below my full code:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";

  //O quero implementar
  $("#expandedImg").attr('value', imgs.alt);
}
* {
  box-sizing: border-box;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<img class="excluirImagem" id="expandedImg" style="width:100%">
<form>
  <input id="expandedImg" type="hidden" name="excluirImagem" value="">
  <button type="submit">Excluir imagem</button>

</form>
<div id="imgtext"></div>

<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

javascript

  • You’re using the same id expandedImg image and input, so the problem. The value is being inserted in the image and not in the input.

  • I hadn’t thought about it, in a way it’s logical. So that’s why I was able to use another id for the input.

  • You don’t even have to put an id in the input name even: $("[name=excluirImagem]")

1 answer

0


Use expandImg.value to receive the value.

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  
  expandImg.parentElement.style.display = "block";

  //O quero implementar
  expandImg.value =  imgs.alt
  console.log("Valor do hidden: " +  document.getElementById("expandedImg").value);
}
* {
  box-sizing: border-box;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
<img class="excluirImagem" id="expandedImg" style="width:100%">
<form>
  <input id="expandedImg" type="hidden" name="excluirImagem" value="">
  <button type="submit">Excluir imagem</button>

</form>
<div id="imgtext"></div>

<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

  • Yes, I’ve tried this before, but I can’t carry that value on a form.

  • I was able to define exactly how my input is: Function myFunction(imgs) {&#xA; var expandImg = document.getElementById("expandedImg");&#xA; var imgText = document.getElementById("imgtext");&#xA; expandImg.src = imgs.src;&#xA; imgText.innerHTML = imgs.alt;&#xA; expandImg.parentElement.style.display = "block"; expandImg.value = imgs.alt; $('input[type=Hidden].excluirImage'). val(imgs.alt); }

  • Glad you made it, but note that you are sitting twice the value for the input hidde. One through Javascript: expandImg.value = imgs.alt; and another through Jquery $('input[type=Hidden]. excluirImagem'). val(imgs.alt);

  • Yeah, I fixed it, now it’s all right.

Browser other questions tagged javascript

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