Help with javascript script

-1

I need a little hand here!

<script>
  window.onload = function() {
    var oTextbox = document.getElementById('myTextBox');
    for (var i = 0; i < document.oTextbox.length; i++) {
        document.oTextbox[i].onfocus = function() {
            oTextbox.value = this.alt;
        };

    for (var i = 0; i < document.images.length; i++) {
        document.images[i].onclick = function() {
            oTextbox.value = this.alt;
        };
    }
};
</script>

I got this script right here on the stack in script link , and use with one input and multiple images works perfectly! but when using the php script in foreach, it creates several inputs but all with the same name, I imagine that it is possible to click on or focus on the input and click on the image it can pass the values to another selected field! / p>

My foreach!

<?php foreach($data["category"] as $categ):?>
<label><?=$categ->name;?></label>
 <input type="text" name="img_ent" id="myTextBox" value="Imagen entrada" 
 class="form-control" placeholder="Imagen Entrada">
<?php endforeach; ?>

Explaining better!

I got the script that I clicked on the image it automatically already puts the name of the image in the input ok, until then everything works fine, what I did was to make the input loop in foreach with php, that's okay too, he generates several inputs according to my database example 5 ... dae comes the problem when generating these 5 inputs I click on the image and it does exactly what it does without the loop, it only adds the text in the first input even though I click the second input it adds to the first one the same way! I thought I would do this on focus the other inputs because of clicking on the input and selecting by clicking on the image it passed the values to the other input. I can not imagine if it's possible ...

    
asked by anonymous 21.12.2017 / 23:20

1 answer

2

What you're trying to do is not working.

  • With ids of equal inputs , it will always fall into the first input
  • With ids of the different inputs , at the end of the loop, it will always fall into the last input
  • Suggestions

    With javascript:

    In php generate the ids of the inputs with sequential numbers at the end of the value ex:

    id="myTextBox0" id="myTextBox1" id="myTextBox2" etc ...

    In each img tag add the event with its numbering in the value of id

    onclick="document.getElementById('myTextBox0').value=this.alt"

    onclick="document.getElementById('myTextBox1').value=this.alt"

    Result

    <input type="text" name="Example" id="myTextBox0"/>
    <input type="text" name="Example" id="myTextBox1"/>
    <input type="text" name="Example" id="myTextBox2"/>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ejnQio1K4_9rPAg4gccOyubd9MDsm9EHqFPSj775hxt3NAW2"alt="primary image" onclick="document.getElementById('myTextBox0').value=this.alt" width="100"/>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrWio0j91C833kB_x-UeRsqc52Ft2TJGDC-YTjyEYb8k7X-PpH"alt="second image" onclick="document.getElementById('myTextBox1').value=this.alt" width="100"/>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBUDSuBgsJFMgAnDk0qCNvlJtXcEVrqsaH7nXCiCtcUEVMMTT_Jg"alt="third image" onclick="document.getElementById('myTextBox2').value=this.alt" width="100"/>

    With Jquery

    $(document).ready(function() {
      $('.clickable').click(function(){
        var idimg = $(this).attr('id');
        document.getElementById('myTextBox'+idimg).value = this.alt;
      });
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" name="Example" id="myTextBox0" />
    <input type="text" name="Example" id="myTextBox1" />
    <input type="text" name="Example" id="myTextBox2" />
    <img id="0" class="clickable" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ejnQio1K4_9rPAg4gccOyubd9MDsm9EHqFPSj775hxt3NAW2"alt="primary image" width="100" />
    <img id="1" class="clickable" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrWio0j91C833kB_x-UeRsqc52Ft2TJGDC-YTjyEYb8k7X-PpH"alt="second image" width="100" />
    <img id="2" class="clickable" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBUDSuBgsJFMgAnDk0qCNvlJtXcEVrqsaH7nXCiCtcUEVMMTT_Jg"alt="third image" width="100" /> 
        
    22.12.2017 / 02:54