1

I am displaying images in a table and image id in same cell in a text box. how can i get value of each text box on text box click

   echo
        "<td style='border:1px solid #F3F5F6;'; align='middle' width='20%'> 

      <figure>
         $imageshow
         <input type='text' size='4' id='imageid' name='imageid'  value='$PHPimageid'  onclick ='displayID();' /> 

     </figure>

      </td>";


    function displayID()
    {
        alert(  document.getElementById("imageid").value  );

    }

imageshow: holds the image string to display image PHPimageid: holds image id e.g 2001

this is a sample code. Echo statement which displays image and image id is in while loop.

All text boxes has right id value but Every time I click on textbox it displaces last loaded ID value . e.g if there are 10 images from id 1 to 10 . no matter which text box i click , it shows id 10 how can i get individual id. Hope this makes sense. if you need further information, d let me know. thanks

here is picture to give you an idea.

Picture of images

chris85
  • 23,846
  • 7
  • 34
  • 51
Devloper
  • 11
  • 1
  • 1
  • 5
  • 1
    Try, document.getElementById("imageid").id instead of document.getElementById("imageid").value – JGV Jul 11 '15 at 15:29
  • You also might want to tidy the sample up a bit, i know its a snippet from a loop, but having that "**{**" might make users confused – Ali Jul 11 '15 at 15:32
  • Add the full code... – Malik Naik Jul 11 '15 at 15:41
  • @VimalanJayaGanesh i tried document.getElementById("imageid").id output is: imageid – Devloper Jul 11 '15 at 15:49
  • Ids should be unique you are going to have many elements with the same id with this code. – chris85 Jul 11 '15 at 15:57
  • @chris85 how can assign id on run time. how can i get an ID of image I click on run time. any solution then ?? – Devloper Jul 11 '15 at 16:02
  • Change `id='imageid'` to something incrementing, maybe `$PHPimageid`.. See the linked thread for how the JS interaction should work. – chris85 Jul 11 '15 at 16:05
  • @chris85 thanks a lot. tried this last time but did not work. just checked it again after you mentioned, had a syntax error. its all sorted into. thanks once again :) – Devloper Jul 11 '15 at 16:12
  • @Devloper, how are you dynamically adding the items? through a button click event or an iteration? – JGV Jul 11 '15 at 17:20
  • @VimalanJayaGanesh through page ready .. its sorted .by dynamically generation id . thanks – Devloper Jul 11 '15 at 17:55

3 Answers3

4

First, you're not supposed to have multiple DOM elements with the same id value on one page. Second, you can pass the clicked element to you handler:

<input type='text' size='4' value='$PHPimageid'  onclick ='displayID(this);' />

Then, in you javascript:

function displayID(el)
{
    alert(  el.value  );

}
David Sulc
  • 25,946
  • 3
  • 52
  • 54
0

You should avoid to us javascript in onclick attribute. And like @David Sulc said it, you must not have DOM elements with the same id.

So for your HTML you can just forget the id and onclick attributes: 

<input type='text' size='4' name='imageid'  value='$PHPimageid'/>

And put some javascript after your html has been loaded:

var inputs = document.getElementsByTagName("input");
for(var i = 0, n = inputs.length; i < n; ++i) {
    if(inputs[i].name == "imageid") {
        inputs[i].addEventListener("click", function(e) {
            var id = this.value;
            alert(id);
        });
    }
}

In this code, the only problem is you create one function for each input elements you have. And these functions have all the same code.

You could avoid that, listening the click event on body and verify in the function if the clicked element is the input you look for or not. In that case you have to create only one function for all your inputs and, the best thing is if you create inputs dynamically, your code will be valid too.

var body = document.getElementsByTagName("body")[0];
body.addEventListener("click", function(e) {
    var item = e.target;
    if(item.tagName == "INPUT" && item.name == "imageid") {
        alert(item.value);
    }
});

And last, if you want to use jQuery, you could write that with a lot of simplicity:

$("body").delegate("input[name=imageid]", "click", function(e) {
    alert($(this).val());
});
Sébastien Doncker
  • 290
  • 4
  • 11
-1
  function displayID(e)
{
   alert(e.target.id.value);// or just e.target.id

}

You can use an event listner too it may be longer but it's better to separate your code from the mark up

var imageId = document.getElementById("imageId");
imageId.addEventListener("click", function(e){  alert(e.target.id.value); });// or just e.target.id
Prince
  • 65
  • 9