0

How to pass input type image (name of pic) to img src inside div, when load modal?

<div class="form-group">
  <label for="image" class="col-sm-2 control-label">
    <?=l ang( 'image') ?>
  </label>
  <div class="col-sm-4">
    <input type="image" id="pimage" width="300px">
  </div>
</div>


<script>
  var imageSrc = 'http://ricap.pt/encomendas/assets/uploads/' + pimage + '';
  var input = document.getElementById('pimage');
  input.src = imageSrc;
</script>

This show blank div and is getting the name of image

Pic url : http://ricap.pt/encomendas/assets/uploads/2774cc3506ee269c379b215d3a1876d5.jpg

dvorak
  • 1
  • 1
  • where is the code where you save the img on the server? – madalinivascu Dec 13 '15 at 15:19
  • The script is getting the right name of pic from table. The issue is to put him into img src.. Into input text works. I don't wanna to save image. just to visualize – dvorak Dec 13 '15 at 15:23
  • your assigning `src` to an `input`... – Lawrence Cherone Dec 13 '15 at 15:28
  • because this is a editing modal. Inputs are getting data from table. I need show picture too. Only to see Suposing that could be like this – dvorak Dec 13 '15 at 15:33
  • http://stackoverflow.com/questions/33979140/html-form-not-changing-url-as-expected/33979311#33979311 You need something to update the variable like an `onKeypress()` event. If those are php tags use ` – Steve Dec 13 '15 at 19:34
  • like this? http://jsfiddle.net/webmarkcompt/m39kk5bz/5/ thanks for advice, its running ok but if so I will change them – dvorak Dec 13 '15 at 20:03

2 Answers2

0

Try this:

 var imageSrc = 'http://ricap.pt/encomendas/assets/uploads/' + pimage + '';
$('#pimage').parent().append('<img src="'imageSrc'">');
madalinivascu
  • 32,064
  • 4
  • 39
  • 55
  • Seems not work If i right click show image shows http://ricap.pt/encomendas/assets/uploads/%5Bobject%20HTMLInputElement%5D on url http://s9.postimg.org/e8uxhxk0f/Captura_de_ecra_2015_12_13_a_s_15_52_21.png /[object HTMLInputElement] – dvorak Dec 13 '15 at 15:50
  • are you trying to show a picture if you click a button? – madalinivascu Dec 13 '15 at 16:19
  • No The idea is showing when load modal. It was just to see an example. However, could be an(last) option if work... – dvorak Dec 13 '15 at 16:41
  • inputs are getting the data from database. Using input I can get the name of the image. So, the idea, is try to pass him to img src with some kind of attr. Inputs are visibible by modal window http://imgur.com/QVYa5Z7 I could use img scr way the problem is to pass id="pimage" to img src="pimage" – dvorak Dec 13 '15 at 17:36
  • why aren't you using a simple img tag? – madalinivascu Dec 13 '15 at 17:46
  • I prefer if I know how to pass it to img tag... Please check the html and .js file that get the data http://jsfiddle.net/webmarkcompt/m39kk5bz/ – dvorak Dec 13 '15 at 19:37
0

The problem is you don't have a src="" in your tag, so you're trying to edit an attribute that isn't there. Add a blank attribute to your code like this:

<input src="" type="image" id="pimage" width="300px">

input.src doesn't add an attribute; it only changes what is already there.

As you mentioned in your comment, you could also do that with PHP like this:

<input src="assets/uploads/<?php echo $row->image; ?>" type="image" id="pimage" width="300px">
frostycoles
  • 78
  • 7
  • Ok. Got that I tried with php but modal is getting text data with jquery and I do not know how to do it with images. Is getting an error http://ricap.pt/encomendas/assets/uploads/%5Bobject%20HTMLInputElement%5D if I try to visualize (blank) image I also tried something like this http://jsfiddle.net/cBJXn/4/ but the question is how to insert data value in input text value – dvorak Dec 13 '15 at 15:59